Warna Dinamis, yang ditambahkan di Android 12, memungkinkan pengguna mempersonalisasi perangkat mereka agar selaras dengan skema warna wallpaper pribadi mereka atau melalui warna yang dipilih di pemilih wallpaper.
Anda dapat memanfaatkan fitur ini dengan menambahkan DynamicColors API, yang
menerapkan tema ini ke aplikasi atau aktivitas Anda untuk membuat aplikasi Anda lebih dipersonalisasi
kepada pengguna.
Halaman ini berisi petunjuk untuk menerapkan Warna Dinamis di aplikasi Anda. Fitur ini juga tersedia secara terpisah untuk widget dan ikon adaptif, seperti yang akan dijelaskan nanti dalam halaman ini. Anda juga dapat mencoba codelab.
Cara Android membuat skema warna
Android melakukan langkah-langkah berikut untuk membuat skema warna dari wallpaper.
Sistem mendeteksi warna utama pada gambar wallpaper yang dipilih dan mengekstrak warna sumber.
Sistem menggunakan warna sumber itu untuk mengekstrapolasi lebih lanjut lima warna utama yang dikenal sebagai Primary, Secondary, Tertiary, Netral, dan Netral varian.
Gambar 2. Contoh ekstraksi warna sumber dari ekstraksi dan gambar wallpaper ke lima warna utama Sistem menafsirkan setiap warna kunci menjadi palet tonal dengan 13 tone.
Gambar 3. Contoh pembuatan palet tonal tertentu Sistem menggunakan satu wallpaper ini untuk mendapatkan lima warna berbeda skema kustom, yang memberikan dasar untuk setiap tema terang dan gelap.
Cara varian warna ditampilkan di perangkat pengguna
Pengguna dapat memilih varian warna dari warna yang diekstrak dan warna lain mulai Android 12, dengan lebih banyak varian yang ditambahkan di Android 13. Sebagai misalnya, pengguna ponsel Pixel yang menjalankan Android 13 akan memilih varian dari Wallpaper & gaya, seperti yang ditunjukkan pada gambar 4.
Android 12 menambahkan varian Tonal Spot, diikuti dengan Neutral, Vibrant Varian Tonal, dan Ekspresif di Android 13. Setiap varian memiliki resep yang mengubah warna benih wallpaper pengguna melalui warna-warna cerah dan memutar hue. Contoh berikut menunjukkan skema warna tunggal yang diekspresikan melalui empat varian warna ini.
Aplikasi Anda masih menggunakan token yang sama untuk mengakses warna ini. Untuk detailnya tentang token, lihat Membuat tema dengan token di halaman ini.
Mulai menggunakan Compose
Jika Anda membangun UI dengan Compose, lihat Penerapan Tema Material di Compose untuk detail tentang cara menerapkan Warna Dinamis ke .
Mulai menggunakan View
Anda dapat menerapkan Warna Dinamis di tingkat aplikasi atau aktivitas. Untuk melakukannya, panggil
applyToActivitiesIfAvailable() untuk mendaftarkan
ActivityLifeCycleCallbacks ke aplikasi Anda.
Kotlin
class MyApplication: Application() {
override fun onCreate() {
DynamicColors.applyToActivitiesIfAvailable(this)
}
}
Java
public class MyApplication extends Application {
@Override
public void onCreate() {
super.onCreate();
DynamicColors.applyToActivitiesIfAvailable(this);
}
}
Selanjutnya, tambahkan tema ke aplikasi Anda.
<style
name="AppTheme"
parent="ThemeOverlay.Material3.DynamicColors.DayNight">
...
</style>
Membuat tema dengan token
{i>Dynamic Color<i} memanfaatkan token desain untuk membuat penetapan warna ke elemen UI yang berbeda menjadi lebih efisien dan konsisten. Token desain memungkinkan Anda untuk menetapkan peran warna secara semantik, bukan berdasarkan nilai yang ditetapkan, ke berbagai elemen UI. Hal ini memungkinkan sistem tonal aplikasi Anda memiliki lebih banyak fleksibilitas, skalabilitas, dan konsistensi, serta sangat efektif ketika mendesain untuk tema terang dan gelap serta warna dinamis.
Cuplikan berikut menunjukkan contoh tema terang dan gelap, dan xml warna yang sesuai, setelah menerapkan token warna dinamis.
Tema terang
Themes.xml
<resources>
<style name="AppTheme" parent="Theme.Material3.Light.NoActionBar">
<item name="colorPrimary">@color/md_theme_light_primary</item>
<item name="colorOnPrimary">@color/md_theme_light_onPrimary</item>
<item name="colorPrimaryContainer">@color/md_theme_light_primaryContainer</item>
<item name="colorOnPrimaryContainer">@color/md_theme_light_onPrimaryContainer</item>
<item name="colorError">@color/md_theme_light_error</item>
<item name="colorOnError">@color/md_theme_light_onError</item>
<item name="colorErrorContainer">@color/md_theme_light_errorContainer</item>
<item name="colorOnErrorContainer">@color/md_theme_light_onErrorContainer</item>
<item name="colorOnBackground">@color/md_theme_light_onBackground</item>
<item name="colorSurface">@color/md_theme_light_surface</item>
<item name="colorOnSurface">@color/md_theme_light_onSurface</item>
…..
</style>
</resources>
Tema gelap
Themes.xml
<resources>
<style name="AppTheme" parent="Theme.Material3.Dark.NoActionBar">
<item name="colorPrimary">@color/md_theme_dark_primary</item>
<item name="colorOnPrimary">@color/md_theme_dark_onPrimary</item>
<item name="colorPrimaryContainer">@color/md_theme_dark_primaryContainer</item>
<item name="colorOnPrimaryContainer">@color/md_theme_dark_onPrimaryContainer</item>
<item name="colorError">@color/md_theme_dark_error</item>
<item name="colorOnError">@color/md_theme_dark_onError</item>
<item name="colorErrorContainer">@color/md_theme_dark_errorContainer</item>
<item name="colorOnErrorContainer">@color/md_theme_dark_onErrorContainer</item>
<item name="colorOnBackground">@color/md_theme_dark_onBackground</item>
<item name="colorSurface">@color/md_theme_dark_surface</item>
<item name="colorOnSurface">@color/md_theme_dark_onSurface</item>
……
</style>
</resources>
xml warna
Colors.xml
<resources>
<color name="md_theme_light_primary">#6750A4</color>
<color name="md_theme_light_onPrimary">#FFFFFF</color>
<color name="md_theme_light_primaryContainer">#EADDFF</color>
<color name="md_theme_light_onPrimaryContainer">#21005D</color>
<color name="md_theme_light_error">#B3261E</color>
<color name="md_theme_light_onError">#FFFFFF</color>
<color name="md_theme_light_errorContainer">#F9DEDC</color>
<color name="md_theme_light_onErrorContainer">#410E0B</color>
<color name="md_theme_light_surface">#FFFBFE</color>
<color name="md_theme_light_onSurface">#1C1B1F</color>
<color name="md_theme_light_surfaceVariant">#E7E0EC</color>
<color name="md_theme_dark_primary">#D0BCFF</color>
<color name="md_theme_dark_onPrimary">#381E72</color>
<color name="md_theme_dark_primaryContainer">#4F378B</color>
<color name="md_theme_dark_onPrimaryContainer">#EADDFF</color>
<color name="md_theme_dark_secondary">#CCC2DC</color>
<color name="md_theme_dark_onSecondary">#332D41</color>
<color name="md_theme_dark_secondaryContainer">#4A4458</color>
<color name="md_theme_dark_onSurface">#E6E1E5</color>
<color name="md_theme_dark_surfaceVariant">#49454F</color>
</resources>
Untuk informasi selengkapnya:
Untuk mempelajari lebih lanjut Warna Dinamis, warna kustom, dan cara membuat token, lihat halaman Warna Dinamis Material 3.
Untuk membuat palet warna dasar serta warna dan tema aplikasi, periksa Material Theme Builder, tersedia melalui Plugin Figma atau di browser).
Untuk mempelajari lebih lanjut tentang bagaimana penggunaan skema warna dapat memungkinkan aksesibilitas yang lebih baik melihat halaman Material 3 tentang Aksesibilitas sistem warna.
Pertahankan warna khusus atau merek
Jika aplikasi Anda memiliki warna khusus atau merek yang tidak ingin diubah dengan preferensi pengguna, Anda dapat menambahkannya satu per satu saat membangun warna skema baru. Contoh:
Themes.xml
<resources>
<style name="AppTheme" parent="Theme.Material3.Light.NoActionBar">
...
<item name="home_lamp">@color/home_yellow</item>
...
</style>
</resources>
Colors.xml
<resources>
<color name="home_yellow">#E8D655</color>
</resources>
Atau, Anda dapat menggunakan Material Theme Builder untuk mengimpor
warna yang memperluas skema warna Anda, sehingga menciptakan sistem warna terpadu.
Dengan opsi ini, gunakan HarmonizedColors untuk mengubah gaya bahasa kustom
warna. Cara ini mencapai keseimbangan visual dan kontras yang mudah diakses jika digabungkan
dengan warna buatan pengguna. Hal ini terjadi saat {i>runtime<i} dengan
applyToContextIfAvailable()
Lihat panduan Material 3 tentang menyelaraskan warna kustom.
Menerapkan Warna Dinamis ke ikon dan widget adaptif
Selain mengaktifkan tema Warna Dinamis di aplikasi, Anda juga dapat mendukung Tema Warna Dynanmic untuk widget dimulai dalam Android 12, dan untuk ikon adaptif mulai Android 13.