1. Sebelum memulai
Dalam codelab ini, Anda akan mengupdate aplikasi starter, yaitu aplikasi kalkulator tip, untuk menggunakan fitur baru di Desain Material 3 yang memungkinkan antarmuka pengguna aplikasi diberi tema secara dinamis berdasarkan wallpaper pengguna. Berikut adalah beberapa Screenshot aplikasi dengan warna dinamis diterapkan. Anda juga akan mempelajari beberapa skenario tambahan yang memungkinkan Anda mengontrol cara warna diterapkan.
Prasyarat
Developer harus
- Memahami konsep tema dasar di Android
- Merasa nyaman dengan memodifikasi tema aplikasi
Yang akan Anda pelajari
- Cara membedakan antara Tema Komponen Material yang ada dan Tema Material 3
- Cara mengupdate tema ke Material 3
- Cara membuat tema menggunakan alat kami dan menerapkannya
- Bagaimana atribut tema saling terkait satu sama lain
Yang Anda butuhkan
- Komputer yang dilengkapi Android Studio.
- Kode untuk aplikasi Tip Time. https://github.com/google-developer-training/android-basics-kotlin-tip-calculator-app-solution
2. Ringkasan Aplikasi Awal
Aplikasi Tip Time adalah aplikasi kalkulator tip dengan opsi untuk menyesuaikan tip. Aplikasi ini adalah salah satu aplikasi contoh dari kursus pelatihan Dasar-Dasar Android di Kotlin.
3. Memperbarui Dependensi Gradle
Sebelum kita memperbarui tema sebenarnya dan menerapkan warna dinamis, ada beberapa perubahan yang perlu dilakukan pada file build.gradle untuk aplikasi Anda.
Di bagian dependensi, pastikan library material adalah 1.5.0-alpha04 atau yang lebih baru:
dependencies {
// ...
implementation 'com.google.android.material:material:<version>'
}
Di bagian android, ubah compileSdkVersion dan targetSdkVersion
hingga 31 atau yang lebih baru:
android {
compileSdkVersion 31
// ...
defaultConfig {
// ...
targetSdkVersion 31
}
}
Petunjuk ini mengasumsikan aplikasi dengan dependensi yang relatif baru. Untuk aplikasi yang belum menggunakan Material atau versi yang lebih lama, periksa petunjuk dalam dokumentasi Memulai Komponen Desain Material untuk Android.
Di mana pun Anda membuat tema, ubah referensi Theme.MaterialComponents.* menjadi Theme.Material3.*. Beberapa gaya belum memiliki gaya baru di namespace Material3, tetapi sebagian besar komponen akan tetap mewarisi gaya baru setelah tema induk diperbarui ke Theme.Material3.*. Kita dapat melihat di bawah bahwa tombol kini menggunakan tema baru yang membulat.
Dalam file tema di bawah, satu-satunya hal yang telah diubah adalah tema induk. Kita akan mengganti tema ini sepenuhnya sebentar lagi. Beberapa atribut warna sudah tidak digunakan lagi dan beberapa gaya kustom yang telah kami buat kini menjadi standar di Material3, tetapi kami ingin Anda memiliki
themes.xml
<style name="Theme.TipTime" parent="Theme.Material3.Light">
<!-- 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>
<!-- For text input fields -->
<item name="textInputStyle">@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox</item>
<!-- For radio buttons -->
<item name="radioButtonStyle">@style/Widget.TipTime.CompoundButton.RadioButton</item>
<!-- For switches -->
<item name="switchStyle">@style/Widget.TipTime.CompoundButton.Switch</item>
</style>
4. Memahami Tema Warna dan Peran Warna
Sistem warna Material 3 menggunakan pendekatan teratur untuk menerapkan warna ke UI Anda. Sejumlah atribut dari Theme.AppCompat masih digunakan. Namun, lebih banyak atribut ditambahkan di Theme.MaterialComponents.* dan bahkan lebih banyak lagi di Theme.Material3.*, jadi penting untuk memeriksa semua layar aplikasi Anda untuk memastikan tidak ada properti yang tidak diterapkan yang muncul dari tema dasar.
Memahami peran warna
Ada lebih dari dua puluh atribut terkait warna dalam tema Material 3. Awalnya mungkin tampak sulit, tetapi sebenarnya ada beberapa warna utama yang dikombinasikan dengan 4-5 peran warna yang sama untuk membuat warna turunan.
Grup warna tersebut adalah:
- Primer, warna primer aplikasi Anda
- Sekunder, warna sekunder aplikasi Anda
- Tersier, baik warna ketiga yang melengkapi Warna Primer dan Sekunder
- Error, digunakan untuk teks dan dialog error
- Latar belakang
- Surface, SurfaceVariant, Surface Inverse
Perannya adalah sebagai berikut untuk Primer, Sekunder, Tersier, dan Error:
<base color> | Warna dasar |
on<base color> | warna ikon dan teks yang muncul pada warna dasar |
<base color>Wadah | berasal dari warna dasar, digunakan untuk tombol, dialog, dll. |
on<base color>Container | warna ikon dan teks pada penampung |
Misalnya, Tombol Tindakan Mengambang dengan gaya default di Material 3 menggunakan Primary sebagai warna dasarnya, sehingga menggunakan primaryContainer untuk warna latar belakang tombol dan onPrimaryContainer untuk kontennya.
Saat menyesuaikan tema secara manual, Anda setidaknya harus memverifikasi bahwa atribut on<base color> untuk setiap warna dasar yang Anda ubah masih dapat dibaca.
Praktik terbaiknya adalah menyesuaikan semua peran dalam grup warna secara bersamaan untuk memastikan tidak ada artefak dari dasar hingga ke aplikasi Anda.
Warna dasar Latar Belakang dan Permukaan umumnya memiliki dua peran, untuk warna dasar itu sendiri dan on<base color> untuk ikon atau teks yang muncul di atasnya.
5. Membuat tema Material 3 dengan Material Theme Builder
Material Theme Builder memudahkan pembuatan skema warna kustom, penggunaan ekspor kode bawaannya untuk bermigrasi ke sistem warna M3, dan memanfaatkan warna dinamis. Pelajari lebih lanjut di material.io/material-theme-builder
Tema aplikasi Tip Time berisi beberapa gaya untuk komponen, tetapi sebagian besar gaya adalah default dalam tema Material 3. Dua warna utama yang perlu kita perhatikan adalah Primer dan Sekunder.
Warna tersebut sesuai dengan warna primer hijau (#1B5E20) dan warna sekunder biru (#0288D1).
Anda dapat memasukkan warna tersebut ke dalam Builder Tema Material dan mengekspor tema lengkap (dengan asumsi ada link ke ringkasan lengkap di tempat lain).
Perlu diketahui bahwa warna yang Anda masukkan dapat berubah nuansanya agar sesuai dengan algoritma pembuatan warna dan memastikan warna yang saling melengkapi dan mudah dibaca.
Di bawah ini adalah subset nilai yang dihasilkan saat Anda memasukkan warna kustom.
6. Bekerja dengan File Ekspor Material Theme Builder
Arsip ekspor berisi direktori values dan values-night/ dengan file themes.xml-nya sendiri, yang sesuai dengan tema terang dan gelap. Semua warna ditentukan dalam values/colors.xml.
File dapat disalin apa adanya, tetapi Anda harus mengubah nama tema di AndroidManifest.xml atau di file tema agar cocok satu sama lain. Nama default dari alat adalah AppTheme.
Mulai ulang aplikasi dan aplikasi akan terlihat hampir sama persis. Salah satu perubahan penting adalah Switch dan RadioButton, yang status terpilihnya kini diberi tema dengan warna dari warna primer, bukan warna sekunder. Dalam aplikasi yang lebih besar, Anda mungkin harus meninjau kembali beberapa desain.
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.tiptime">
<application ...>
<activity android:name=".MainActivity"
android:exported="true">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
7. Menambahkan warna dinamis
Dengan tema Material 3 yang tepat, kita dapat membuat UI dinamis dengan beberapa tambahan kecil.
Dynamic Colors API memungkinkan Anda menerapkan warna dinamis ke semua Aktivitas
di aplikasi, aktivitas individual, atau ke View atau Fragment individual. Untuk
aplikasi ini, kita akan menerapkan warna dinamis secara global.
Buat file class Aplikasi
class TipTimeApplication: Application() {
override fun onCreate() {
// Apply dynamic color
DynamicColors.applyToActivitiesIfAvailable(this)
}
}
Kita perlu mereferensikan file yang baru dibuat ini dalam manifes Android:
AndroidManifest.xml
< application android name=".TipTimeApplication
<!--- Other existing attributes –>
</application >
Pada sistem Android 12+, wallpaper pengguna untuk skema default) diperiksa untuk menghasilkan beberapa palet tonal. Nilai dari palet ini digunakan untuk membuat ThemeOverlay.
Class DynamicColors mendaftarkan ActivityLifecycleCallbacks yang mencegat ActivityPreCreated untuk menerapkan overlay tema dinamis yang dibuat sistem atau yang telah Anda berikan.
8. Menerapkan overlay tema kustom
Alat kami dapat mengekspor overlay tema, tetapi Anda juga dapat membuatnya secara manual jika mengganti sejumlah kecil atribut.
Overlay tema dimaksudkan untuk digunakan bersama dengan tema lain dan hanya memberikan nilai yang akan diubah di atas tema dasar.
Misalkan karena alasan tertentu, mungkin branding, kita memerlukan warna primer bernuansa merah. Kita dapat melakukannya dengan file dan atribut berikut.
colors.xml
<resources>
<color name="overlay_light_primary">#9C4146</color>
<color name="overlay_light_onPrimary">#FFFFFF</color>
<color name= "overlay_light_primaryContainer">#FFDADB</color>
<color name="overlay_light_onPrimaryContainer">#400008</color>
</resources >
themes_overlays.xml
<style name="AppTheme.Overlay" parent="ThemeOverlay.Material3.DynamicColors.Light">
<item name="colorPrimary">@color/overlay_light_primary</item>
<item name="colorOnPrimary">@color/overlay_light_onPrimary</item>
<item name="colorPrimaryContainer">@color/overlay_light_primaryContainer</item>
<item name="colorOnPrimaryContainer">@color/overlay_light_onPrimaryContainer<item>
</style>
Untuk kode di atas, Android 12 akan menerapkan tema terang dinamis dan menempatkan perubahan Anda di atasnya. Atau, Anda dapat menggunakan ThemeOverlay yang valid sebagai induk, termasuk salah satu dari berikut ini:
ThemeOverlay.Material3.Light
ThemeOverlay.Material3.Dark
ThemeOverlay.Material3.DayNight ThemeOverlay.Material3.DynamicColors.Dark
ThemeOverlay.Material3.DynamicColors.DayNight
Untuk menggunakan Overlay Tema ini, bukan default Material, ubah panggilan ke DynamicColors.applyToActivitiesIfAvailable menjadi:
DynamicColors.applyToActivitiesIfAvailable(this, R.style.AppTheme_Overlay)
9. Menambahkan warna dinamis ke atribut khusus
Sejauh ini kita telah mengganti properti yang sudah ada dalam tema Material 3. Kita memiliki kemungkinan kasus lain dalam warna dinamis di mana kita mungkin memiliki satu atau beberapa atribut kustom yang perlu dialokasikan.
Saat aplikasi memilih untuk menggunakan warna dinamis, aplikasi tersebut akan mendapatkan akses ke 5 palet tone - tiga palet aksen dan dua palet netral dengan perkiraan peran berikut:
system_accent1 | Nuansa warna primer |
system_accent2 | Nuansa warna sekunder |
system_accent3 | Tona warna tersier |
system_neutral1 | Latar belakang dan permukaan netral |
system_neutral2 | Permukaan dan garis batas netral |
Setiap palet memiliki sejumlah langkah tonal mulai dari putih
ke hitam: 0, 10, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000.
Saat mendesain UI untuk warna dinamis, Anda harus lebih sedikit memikirkan warna tertentu dan lebih banyak memikirkan hubungan antara tone dan luminans komponen tersebut dengan komponen lain dalam sistem desain.
Misalnya, Anda ingin ikon diberi tema menggunakan palet aksen sekunder dan Anda menambahkan atribut untuk mewarnai ikon dengan entri berikut di attrs.xml.
attrs.xml
<resources>
<attr name="iconColor" format="color" />
</resources>
Overlay tema Anda mungkin terlihat seperti ini:
<style name="AppTheme.Overlay" parent="ThemeOverlay.Material3.DynamicColors.DayNight">
<item name="iconColor">@android:color/system_accent2_600</item>
</style>
Saat Anda menginstal ulang aplikasi dan mengubah wallpaper, aplikasi akan mengambil palet sekunder tersebut.
Palet ini khusus untuk Android 12 (API 31) sehingga Anda harus menempatkan file yang relevan di folder dengan akhiran -v31, kecuali jika aplikasi Anda memiliki SDK minimum yang disetel ke 31 atau yang lebih tinggi.
10. Ringkasan
Dalam codelab ini, Anda telah dapat:
- Tambahkan dependensi untuk mengupgrade tema Anda ke Material 3.
- Pahami grup dan peran warna baru.
- Pahami cara bermigrasi dari tema statis ke warna dinamis.
- Pahami cara menggunakan overlay tema dan menggunakan warna dinamis untuk atribut tema kustom.