Mengubah tema aplikasi

1. Sebelum memulai

Material merupakan sistem desain yang dibuat oleh Google untuk membantu developer menciptakan pengalaman digital berkualitas tinggi untuk Android dan platform lainnya. Sistem Material yang lengkap menyertakan panduan desain tentang visual, gerak, dan desain interaksi untuk aplikasi Anda, tetapi codelab ini akan berfokus pada cara mengubah tema warna untuk aplikasi Android Anda.

Codelab ini menggunakan template aplikasi Empty Activity, tetapi Anda dapat menggunakan aplikasi Android apa pun yang sedang Anda jalankan. Jika Anda mengambil materi ini sebagai bagian dari kursus Dasar Android, Anda dapat menggunakan aplikasi Tip Time.

Prasyarat

• Cara membuat aplikasi Android dari template di Android Studio.
• Cara menjalankan aplikasi Android di emulator atau perangkat di Android Studio.
• Emulator atau perangkat Android yang menjalankan API 28 (Android 9), atau API 29 (Android 10) atau yang lebih tinggi.
• Cara mengedit file XML.

Yang akan Anda pelajari

• Cara memilih warna yang efektif untuk aplikasi Anda sesuai dengan prinsip Desain Material
• Cara menetapkan warna sebagai bagian dari tema aplikasi Anda
• Komponen RGB warna
• Cara menerapkan gaya ke View
• Mengubah tampilan aplikasi menggunakan Tema
• Memahami pentingnya kontras warna

Yang Anda perlukan

• Komputer yang diinstal Android Studio versi stabil terbaru
• Browser web dan koneksi internet untuk mengakses alat warna Material

2. Desain dan warna

Desain Material

Desain Material terinspirasi oleh dunia nyata dan teksturnya, termasuk cara objek memantulkan cahaya dan memancarkan bayangan. Panduan ini berisi langkah-langkah membuat UI aplikasi Anda dengan cara yang mudah dibaca, menarik, dan konsisten. Penerapan Tema Material memungkinkan Anda menyesuaikan Desain Material untuk aplikasi, dengan panduan tentang penyesuaian warna, tipografi, dan bentuk. Desain Material dilengkapi dengan tema dasar bawaan yang dapat digunakan sebagaimana adanya. Anda kemudian dapat menyesuaikannya sesedikit, atau sebanyak yang Anda inginkan agar Material berfungsi untuk aplikasi Anda.

Pembahasan singkat tentang warna

Warna ada di mana-mana, baik di dunia nyata maupun di dunia digital. Hal pertama yang harus diketahui adalah tidak semua orang melihat warna dengan cara yang sama. Karenanya, sangat penting untuk memilih warna yang tepat untuk aplikasi Anda agar pengguna dapat secara efektif menggunakannya. Memilih warna dengan kontras warna yang cukup hanyalah salah satu bagian untuk membuat aplikasi yang lebih mudah diakses.

Warna dapat direpresentasikan sebagai 3 angka heksadesimal, #00-#FF (0-255), yang mewakili komponen merah, hijau, dan biru (RGB) dari warna tersebut. Semakin tinggi angkanya, semakin banyak kemunculan komponen tersebut.

Perhatikan bahwa warna juga dapat ditentukan dengan menyertakan nilai alfa #00-#FF, yang mewakili transparansi (#00 = 0% = sepenuhnya transparan, #FF = 100% = sepenuhnya buram). Jika disertakan, nilai alfa adalah nilai pertama dari 4 angka heksadesimal (ARGB). Jika nilai alfa tidak disertakan, nilai tersebut diasumsikan sebagai #FF = 100% buram.

Namun, Anda tidak perlu membuat angka heksadesimal sendiri. Tersedia alat untuk membantu Anda memilih warna yang akan menghasilkan angkanya untuk Anda.

Beberapa contoh yang mungkin pernah Anda lihat di file colors.xml aplikasi Android Anda mencakup 100% hitam (R=#00, G=#00, B=#00) dan 100% putih (R=#FF, G=#FF, B=#FF):

<color name="black">#FF000000</color>
<color name="white">#FFFFFFFF</color>

3. Tema

Gaya dapat menentukan atribut untuk View, seperti warna font, ukuran font, warna latar belakang, dan banyak lagi.

Tema adalah kumpulan gaya yang diterapkan ke seluruh aplikasi, aktivitas, atau hierarki tampilan—bukan hanya View individual. Saat Anda menerapkan tema ke aplikasi, aktivitas, tampilan, atau kelompok tampilan, tema akan diterapkan ke elemen tersebut dan semua turunannya. Tema juga dapat menerapkan gaya ke elemen non-tampilan, seperti status bar dan latar belakang jendela.

Membuat project Empty Activity

Jika menggunakan aplikasi Anda sendiri, Anda dapat melewati bagian ini. Jika Anda harus menginstal aplikasi, ikuti langkah-langkah berikut untuk membuat aplikasi Empty Activity.

1. Buka Android Studio.
2. Buat project Kotlin baru menggunakan template Empty Activity.
3. Gunakan nama "TipTime". Anda juga dapat menyimpan nama default, "My Application" jika tidak sedang menjalankan codelab lainnya.
4. Pilih level API minimum 19 (KitKat).
5. Setelah Android Studio selesai membuat aplikasi, buka activity_main.xml (app > res > layout > activity_main.xml).
6. Jika perlu, beralihlah ke tampilan Kode.
7. Ganti semua teks dengan XML ini:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="16dp"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="48dp"
        android:layout_gravity="center_horizontal"
        android:gravity="center_vertical"
        android:text="@string/primary_color"
        android:textAllCaps="true"
        android:textSize="12sp" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:text="@string/button" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="48dp"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="8dp"
        android:gravity="center_vertical"
        android:text="@string/secondary_color"
        android:textAllCaps="true"
        android:textSize="12sp" />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:contentDescription="@string/email_icon"
        app:srcCompat="@android:drawable/ic_dialog_email" />

</LinearLayout>

8. Buka strings.xml (app > res > values > strings.xml).
9. Ganti semua teks dengan XML ini:

<resources>
    <string name="app_name">TipTime</string>
    <string name="primary_color">Primary color</string>
    <string name="button">Button</string>
    <string name="secondary_color">Secondary color</string>
    <string name="email_icon">email icon</string>
</resources>

10. Jalankan aplikasi Anda. Aplikasi akan terlihat seperti screenshot di bawah.

Aplikasi ini menyertakan TextView dan Button agar Anda dapat melihat tampilan warna pilihan Anda di aplikasi Android yang sebenarnya. Kita akan mengubah warna tombol menjadi warna dari warna primer tema di langkah berikutnya.

Mempelajari warna tema

Bagian lain UI untuk aplikasi Android menggunakan warna yang berbeda. Untuk membantu Anda menggunakan warna dengan cara yang berarti di aplikasi Anda, dan menerapkannya secara konsisten dan menyeluruh, sistem tema mengelompokkan warna ke dalam 12 atribut bernama yang berkaitan dengan warna yang akan digunakan pada teks, ikon, dan lainnya. Tema tidak perlu menentukan semuanya; Anda akan memilih warna primer dan sekunder, beserta warna untuk teks dan ikon yang digambar pada warna tersebut.

Warna "Aktif" digunakan untuk teks dan ikon yang digambar di berbagai platform.

Lihat warna yang ditentukan di tema default.

1. Di Android Studio, buka themes.xml (app > res > values > theme > theme.xml).
2. Perhatikan nama tema, Theme.TipTime, yang didasarkan pada nama aplikasi Anda.

<style name="Theme.TipTime" parent="Theme.MaterialComponents.DayNight.DarkActionBar">

3. Perhatikan bahwa baris XML juga menentukan tema induk, Theme.MaterialComponents.DayNight.DarkActionBar. DayNight adalah tema yang telah ditentukan sebelumnya di library Komponen Material. DarkActionBar berarti bahwa panel tindakan menggunakan warna gelap. Sama seperti class yang mewarisi atribut dari class induknya, tema mewarisi atribut dari tema induknya.

4. Lihat item dalam file, dan perhatikan bahwa nama tersebut mirip dengan item dalam diagram di atas: colorPrimary, colorSecondary, dan seterusnya.

themes.xml

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.TipTime" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/purple_500</item>
        <item name="colorPrimaryVariant">@color/purple_700</item>
        <item name="colorOnPrimary">@color/white</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/teal_200</item>
        <item name="colorSecondaryVariant">@color/teal_700</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->
    </style>
</resources>

Tidak semua atribut tema warna ditentukan. Warna yang tidak ditentukan akan mewarisi warna dari tema induk.

5. Perhatikan juga bahwa Android Studio menarik sampel kecil warna di margin kiri.
6. Terakhir, perhatikan bahwa warna ditentukan sebagai resource warna, misalnya, @color/purple_500, bukan menggunakan nilai RGB secara langsung.
7. Buka colors.xml (app > res > values > colors.xml), dan Anda akan melihat nilai heksadesimal untuk setiap resource warna. Ingat kembali bahwa awalan #FF adalah nilai alfa, dan berarti warnanya 100% buram.

colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="purple_200">#FFBB86FC</color>
    <color name="purple_500">#FF6200EE</color>
    <color name="purple_700">#FF3700B3</color>
    <color name="teal_200">#FF03DAC5</color>
    <color name="teal_700">#FF018786</color>
    <color name="black">#FF000000</color>
    <color name="white">#FFFFFFFF</color>
</resources>

4. Memilih warna tema aplikasi

Sekarang setelah Anda memiliki gambaran tentang atribut tema, tiba saatnya untuk memilih beberapa warna! Cara termudah untuk melakukannya adalah menggunakan Color Tool, aplikasi berbasis web yang disediakan oleh tim Material. Alat ini menyediakan palet warna standar, dan memungkinkan Anda dengan mudah melihat tampilannya jika digunakan oleh elemen UI yang berbeda.

Memilih beberapa warna

1. Mulai dengan memilih warna Primer (colorPrimary), misalnya, Hijau 900. Alat warna ini akan menunjukkan seperti apa tampilan warna tersebut di aplikasi tiruan, dan pilih juga varian Terang dan Gelap.
2. Ketuk bagian Sekunder dan pilih warna sekunder (colorSecondary) yang Anda sukai, misalnya, Biru Terang 700. Warna ini akan menunjukkan seperti apa tampilan warna tersebut di aplikasi tiruan, dan sekali lagi pilih varian Terang dan Gelap.
3. Perlu diperhatikan bahwa aplikasi tiruan menyertakan 6 "layar" tiruan yang berbeda. Lihat seperti apa tampilan warna pilihan Anda di berbagai layar dengan mengetuk panah di atas layar tiruan.
4. Alat warna juga memiliki tab Aksesibilitas untuk memberi tahu apakah warna Anda cukup jelas untuk dibaca saat digunakan dengan teks hitam atau putih. Cara membuat aplikasi Anda lebih nyaman digunakan adalah memastikan kontras warnanya cukup tinggi: 4,5:1 atau lebih tinggi untuk teks berukuran kecil, dan 3,0:1 atau lebih tinggi untuk teks yang lebih besar. Baca kontras warna lebih lanjut.
5. Untuk primaryColorVariant dan secondaryColorVariant, Anda dapat memilih varian terang atau gelap yang disarankan.

Menambahkan warna ke aplikasi Anda

Penentuan resource untuk warna mempermudah penggunaan ulang warna yang sama di berbagai bagian aplikasi Anda secara konsisten.

1. Di Android Studio, buka colors.xml (app > res > values > colors.xml).
2. Setelah warna yang ada, tentukan resource warna bernama green menggunakan nilai yang dipilih di atas, #1B5E20.

<color name="green">#1B5E20</color>

3. Lanjutkan penentuan resource untuk warna lainnya. Sebagian besar resource tersebut berasal dari alat warna. Perlu diketahui bahwa nilai untuk green_light dan blue_light berbeda dengan nilai yang ditampilkan oleh alat tersebut; Anda akan menggunakan nilai tersebut di langkah selanjutnya.

Resource warna untuk hitam dan putih sudah ditentukan, sehingga Anda tidak perlu menentukannya.

File colors.xml untuk aplikasi Anda sekarang seharusnya tampak seperti ini:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="purple_200">#FFBB86FC</color>
    <color name="purple_500">#FF6200EE</color>
    <color name="purple_700">#FF3700B3</color>
    <color name="teal_200">#FF03DAC5</color>
    <color name="teal_700">#FF018786</color>
    <color name="black">#FF000000</color>
    <color name="white">#FFFFFFFF</color>

    <color name="green">#1B5E20</color>
    <color name="green_dark">#003300</color>
    <color name="green_light">#A5D6A7</color>
    <color name="blue">#0288D1</color>
    <color name="blue_dark">#005B9F</color>
    <color name="blue_light">#81D4FA</color>
</resources>

Menggunakan warna di tema Anda

Setelah memiliki nama untuk warna yang dipilih, kini saatnya menggunakannya di tema Anda.

1. Buka themes.xml (app > res > values > themes > themes.xml).
2. Ubah colorPrimary ke warna primer yang Anda pilih, @color/green.
3. Ubah colorPrimaryVariant menjadi @color/green_dark.
4. Ubah colorSecondary menjadi @color/blue.
5. Ubah colorSecondaryVariant menjadi @color/blue_dark.
6. Pastikan Text on P dan Text on S masih berwarna putih (#FFFFFF) dan hitam (#000000). Jika menggunakan alat warna Anda sendiri dan memilih warna lain, Anda mungkin perlu menentukan resource warna tambahan.

Setelah selesai, tema seharusnya terlihat seperti ini:

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.TipTime" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/green</item>
        <item name="colorPrimaryVariant">@color/green_dark</item>
        <item name="colorOnPrimary">@color/white</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/blue</item>
        <item name="colorSecondaryVariant">@color/blue_dark</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->
    </style>
</resources>

7. Jalankan aplikasi Anda di emulator atau di perangkat, dan lihat tampilan aplikasi Anda dengan tema baru.

5. Tema gelap

Template aplikasi menyertakan tema terang yang default, dan juga menyertakan varian tema gelap. Tema gelap menggunakan warna yang lebih gelap, lebih tenang, dan:

• Dapat mengurangi penggunaan daya secara signifikan (bergantung pada teknologi layar perangkat).
• Meningkatkan visibilitas bagi pengguna dengan gangguan penglihatan dan mereka yang sensitif terhadap cahaya terang.
• Memudahkan penggunaan perangkat di lingkungan dengan sedikit cahaya.

Memilih warna untuk tema gelap

Warna untuk tema gelap tetap harus dapat dibaca. Tema gelap menggunakan warna platform gelap, dengan aksen warna terbatas. Untuk membantu memastikan keterbacaan, warna primer biasanya versi lebih lembut dari warna primer tema terang.

Untuk memberikan lebih banyak fleksibilitas dan kegunaan di tema gelap, sebaiknya gunakan warna yang lebih terang (200-50) di tema gelap, bukan tema warna default Anda (warna tersaturasi antara 900-500). Sebelumnya Anda memilih hijau 200 dan biru terang 200 sebagai warna terang. Untuk aplikasi, Anda akan menggunakan warna terang sebagai warna utama, dan warna primer sebagai varian.

Memperbarui versi gelap tema Anda

1. Buka themes.xml (night). Di panel Project, pilih Android, lalu buka app > res > values > themes > themes.xml (night).

2. Ubah colorPrimary ke varian terang dari warna primer yang Anda pilih, @color/green_light.
3. Ubah colorPrimaryVariant menjadi @color/green.
4. Ubah colorSecondary menjadi @color/blue_light.
5. Ubah colorSecondaryVariant menjadi @color/blue_light. Perlu diperhatikan bahwa colorSecondaryVariant dapat memiliki warna yang sama dengan colorSecondary.

Setelah selesai, file themes.xml (night) Anda seharusnya terlihat seperti ini:

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Application theme for dark theme. -->
    <style name="Theme.TipTime" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/green_light</item>
        <item name="colorPrimaryVariant">@color/green</item>
        <item name="colorOnPrimary">@color/black</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/blue_light</item>
        <item name="colorSecondaryVariant">@color/blue_light</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->
    </style>
</resources>

6. Pada tahap ini, warna asli yang ditetapkan di colors.xml, misalnya, purple_200, tidak lagi digunakan sehingga Anda dapat menghapusnya.

Mencoba tema gelap

Anda dapat melihat tampilan tema dalam mode gelap dengan mengaktifkan mode gelap di perangkat.

Untuk API 28 (Android 9)

1. Jalankan aplikasi Anda lagi.
2. Beralih ke aplikasi Setelan.
3. Di bagian Baterai, cari Penghemat Baterai.

4. Tekan Aktifkan Sekarang.

Lanjutkan dengan langkah-langkah di bawah ini.

Untuk API 29 (Android 10) atau yang lebih tinggi

1. Jalankan aplikasi Anda lagi.
2. Beralih ke aplikasi Setelan.
3. Di bagian Tampilan, cari tombol Tema gelap.

4. Ubah Tema gelap ke posisi "aktif", dan perangkat akan beralih ke mode malam.

Untuk kedua API

5. Kembali ke aplikasi Anda, dan lihat perbedaannya.

Perubahan yang paling jelas adalah latar belakang gelap dengan teks terang, bukan latar belakang terang dengan teks gelap. Selain itu, warna yang digunakan untuk tombol lebih lembut di tema gelap dibandingkan di tema terang.

Selamat! Anda telah berhasil membuat tema aplikasi baru, dengan tema terang dan tema gelap.

6. Kode solusi

Codelab ini berfokus pada penyesuaian warna untuk tema, tetapi ada banyak atribut yang dapat disesuaikan oleh tema Anda, termasuk teks, bentuk, gaya tombol, dan banyak lagi. Baca artikel ini untuk mengetahui cara lain menyesuaikan tema aplikasi. Gaya Visual Android: Atribut Tema Umum

Kode solusi untuk codelab ini ditunjukkan di bawah ini.

colors.xml (app > res > values > colors.xml)

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="black">#FF000000</color>
    <color name="white">#FFFFFFFF</color>
    <color name="green">#1B5E20</color>
    <color name="green_dark">#003300</color>
    <color name="green_light">#A5D6A7</color>
    <color name="blue">#0288D1</color>
    <color name="blue_dark">#005B9F</color>
    <color name="blue_light">#81D4FA</color>
</resources>

values/themes.xml (app > res > values > themes > themes.xml)

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.TipTime" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/green</item>
        <item name="colorPrimaryVariant">@color/green_dark</item>
        <item name="colorOnPrimary">@color/white</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/blue</item>
        <item name="colorSecondaryVariant">@color/blue_dark</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->
    </style>
</resources>

values-night/themes.xml (app > res > values > themes > themes.xml (night))

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Application theme for dark theme. -->
    <style name="Theme.TipTime" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/green_light</item>
        <item name="colorPrimaryVariant">@color/green</item>
        <item name="colorOnPrimary">@color/black</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/blue_light</item>
        <item name="colorSecondaryVariant">@color/blue_light</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->
    </style>
</resources>

7. Ringkasan

• Gunakan Alat Warna Material untuk memilih warna tema aplikasi Anda.
• Atau, Anda dapat menggunakan generator palet Material untuk membantu memilih palet warna.
• Deklarasikan resource warna di file colors.xml untuk mempermudah penggunaan kembali resource.
• Tema gelap dapat mengurangi penggunaan daya dan membuat aplikasi Anda lebih mudah dibaca dengan sedikit cahaya.

8. Mempelajari lebih lanjut

• Sistem warna
• Tema gelap
• Gaya Visual Android: Tema vs Gaya
• Gaya Visual Android: Atribut Tema Umum
• Menyiapkan tema Komponen Material untuk Android
• Tips untuk tema gelap
• Pemeriksa Kontras WebAIM
• Tema Komponen Material (lihat langkah 4)
• Penerapan Tema Material dengan MDC
• Tema Gelap dengan MDC
• Gaya Visual Android: Atribut Tema Umum