Android Academy · Pelajaran

Tema & Gaya

Definisikan Style yang dapat digunakan kembali untuk widget dan Theme untuk aplikasi Anda. Siapkan peran warna Material 3, skala tipografi, font khusus, dan mode gelap.

Tema & Gaya adalah pelajaran Android Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 5. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Android Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Android Academy mencakup 5 pelajaran total.

Gaya vs Tema

Dua konsep yang sering tertukar:

Gaya — kumpulan atribut tampilan yang diterapkan pada satu widget (misalnya ukuran teks, warna, dan padding). Atur dengan style="@style/MyButton".
Tema — kumpulan atribut semantik yang diterapkan pada Activity atau aplikasi. Tampilan mencari atribut tema dengan ?attr/colorPrimary.

Mendefinisikan Gaya

Buat gaya di res/values/styles.xml. Gaya dapat mewarisi dari induknya:

<!-- res/values/styles.xml -->
<resources>
    <style name="TitleText" parent="TextAppearance.Material3.HeadlineMedium">
        <item name="android:textColor">@color/on_surface</item>
        <item name="android:fontFamily">@font/roboto_bold</item>
    </style>

    <style name="PrimaryButton" parent="Widget.Material3.Button">
        <item name="android:paddingHorizontal">24dp</item>
        <item name="cornerRadius">8dp</item>
    </style>
</resources>

<!-- Using a style in XML: -->
<TextView
    style="@style/TitleText"
    android:text="Hello!" />

Mendefinisikan Tema

Tema mewarisi dari induk Material 3 dan menimpa atribut warna serta bentuk:

<!-- res/values/themes.xml -->
<resources>
    <style name="Theme.MyApp" parent="Theme.Material3.DayNight.NoActionBar">
        <!-- Color -->
        <item name="colorPrimary">@color/primary</item>
        <item name="colorOnPrimary">@color/on_primary</item>
        <item name="colorSecondary">@color/secondary</item>
        <item name="colorSurface">@color/surface</item>
        <item name="colorBackground">@color/background</item>

        <!-- Typography -->
        <item name="textAppearanceBodyMedium">@style/BodyMedium</item>

        <!-- Shape -->
        <item name="shapeAppearanceMediumComponent">@style/Shape.Medium</item>
    </style>
</resources>

Sistem Warna Material 3

Material 3 menggunakan peran warna semantik, bukan nilai heksadesimal mentah. Peran utama:

colorPrimary — warna merek utama
colorOnPrimary — teks/ikon di atas latar utama
colorSecondary — warna aksen
colorSurface — latar kartu/lembar
colorError — keadaan error
colorBackground — latar jendela

Sumber Daya Warna

Definisikan warna di res/values/colors.xml:

<!-- res/values/colors.xml -->
<resources>
    <color name="primary">#6750A4</color>
    <color name="on_primary">#FFFFFF</color>
    <color name="secondary">#625B71</color>
    <color name="on_secondary">#FFFFFF</color>
    <color name="surface">#FFFBFE</color>
    <color name="background">#FFFBFE</color>
    <color name="error">#B3261E</color>
</resources>

Tema Gelap

Tema Material 3 DayNight menangani mode gelap secara otomatis. Tambahkan varian malam untuk warna:

<!-- res/values-night/colors.xml  (night override) -->
<resources>
    <color name="primary">#D0BCFF</color>
    <color name="on_primary">#381E72</color>
    <color name="surface">#1C1B1F</color>
    <color name="background">#1C1B1F</color>
</resources>

// Switch dark mode programmatically:
AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES)   // force dark
AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO)    // force light
AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_FOLLOW_SYSTEM) // auto

Tipografi

Material 3 mendefinisikan skala tipografi. Gunakan atribut textAppearance untuk teks yang konsisten:

<TextView
    android:textAppearance="?attr/textAppearanceDisplayLarge"
    android:text="Big Title" />

<TextView
    android:textAppearance="?attr/textAppearanceHeadlineMedium"
    android:text="Section Header" />

<TextView
    android:textAppearance="?attr/textAppearanceBodyMedium"
    android:text="Body text content here" />

<TextView
    android:textAppearance="?attr/textAppearanceLabelSmall"
    android:text="Caption" />

Font Kustom

Tambahkan font ke res/font/ dan referensikan dari tema atau gaya Anda:

<!-- res/font/my_font.xml — font family -->
<font-family xmlns:app="http://schemas.android.com/apk/res-auto">
    <font app:fontStyle="normal" app:fontWeight="400"
          app:font="@font/roboto_regular" />
    <font app:fontStyle="normal" app:fontWeight="700"
          app:font="@font/roboto_bold" />
</font-family>

<!-- Apply to a style: -->
<style name="Theme.MyApp" parent="...">
    <item name="android:fontFamily">@font/my_font</item>
</style>

Menerapkan Tema ke Activity

Atur tema di AndroidManifest.xml. Anda dapat menggunakan tema yang berbeda untuk setiap Activity:

<!-- AndroidManifest.xml -->
<application
    android:theme="@style/Theme.MyApp">

    <!-- Different theme for splash screen -->
    <activity
        android:name=".SplashActivity"
        android:theme="@style/Theme.MyApp.Splash" />

    <activity
        android:name=".MainActivity" />
</application>

Membaca Atribut Tema dalam Kode

Access any theme attribute in Kotlin code at runtime:

fun getColorFromTheme(context: Context, attrResId: Int): Int {
    val typedValue = TypedValue()
    context.theme.resolveAttribute(attrResId, typedValue, true)
    return typedValue.data
}

// Usage:
val primaryColor = getColorFromTheme(this, com.google.android.material.R.attr.colorPrimary)
binding.myView.setBackgroundColor(primaryColor)

Material Theme Builder

Gunakan Material Theme Builder (m3.material.io/theme-builder) untuk membuat skema warna Material 3 lengkap dari warna merek Anda. Alat ini mengekspor file XML siap pakai untuk colors.xml dan themes.xml. Ini adalah cara tercepat untuk mendapatkan sistem desain yang konsisten.

Pemeriksaan Singkat

Apa perbedaan utama antara Style dan Theme di Android?

Ringkasan: Tema & Gaya

Desain yang konsisten dimulai dari sini:

Gaya — atribut tingkat widget yang dapat digunakan kembali di banyak tampilan
Tema — atribut tingkat aplikasi/Activity, dengan peran warna semantik
Peran warna Material 3: colorPrimary, colorSurface, colorError, dan lainnya
Mode gelap melalui values-night/colors.xml + MODE_NIGHT_FOLLOW_SYSTEM
Skala tipografi melalui atribut textAppearance
Gunakan Material Theme Builder untuk membuat skema warna dengan cepat

Berikutnya: menggambar tampilan kustom dari awal.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Tema & Gaya” gratis?

Ya — teks lengkap “Tema & Gaya” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Android Academy, upgrade ke CoddyKit PRO. Kursus Android Academy mencakup 5 pelajaran total.

Apa yang akan aku pelajari di “Tema & Gaya”?

Definisikan Style yang dapat digunakan kembali untuk widget dan Theme untuk aplikasi Anda. Siapkan peran warna Material 3, skala tipografi, font khusus, dan mode gelap. Kamu berlatih Android Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Android Academy?

Tidak diperlukan pengalaman sebelumnya. Android Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 5.

Berapa lama pelajaran “Tema & Gaya” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Android Academy ini?

Ya. Setiap pelajaran Android Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Android Academy