Cara Menggunakan Tema Dinamis Android

Apa Itu Tema Dinamis?

Android 12 memperkenalkan Material You yang memungkinkan aplikasi menyesuaikan warna, tipografi, dan elemen UI lainnya secara otomatis berdasarkan gambar latar belakang atau preferensi pengguna. Fitur ini disebut Dynamic Theme (Tema Dinamis).

Mengaktifkan Tema Dinamis di Proyek Anda

1. Pastikan Gradle Menggunakan Versi yang Tepat

Update compileSdkVersion dan targetSdkVersion menjadi 31 atau lebih tinggi.

android { compileSdkVersion 33 defaultConfig { applicationId "com.example.dynamictheme" minSdkVersion 21 targetSdkVersion 33 versionCode 1 versionName "1.0" } }

2. Tambahkan Dependency Material

dependencies { implementation 'com.google.android.material:material:1.9.0' }

3. Gunakan Theme Theme.Material3.DayNight

Di res/values/themes.xml:

<resources> <style name="Theme.MyApp" parent="Theme.Material3.DayNight.NoActionBar"> <!-- Override custom color if needed --> </style> </resources>

Mengambil Warna Dominan Secara Otomatis

Gunakan DynamicColors pada Application atau Activity Anda.

Contoh di Application

class MyApp : Application() { override fun onCreate() { super.onCreate() DynamicColors.applyToActivitiesIfAvailable(this) } }

Contoh di Activity

class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { MyAppTheme { // UI Anda di sini } } } }

Menggunakan Warna Dinamis di Compose

Jika Anda memakai Jetpack Compose, cukup bungkus UI dengan tema yang telah dikonfigurasi.

@Composable fun MyAppTheme(content: @Composable () -> Unit) { val dynamicColor = Build.VERSION.SDK_INT >= Build.VERSION_CODES.S val colors = if (dynamicColor) { dynamicLightColorScheme(LocalContext.current) } else { lightColorScheme() } MaterialTheme( colorScheme = colors, typography = Typography(), content = content ) }

Menggunakan Warna Dinamis di XML Layout

Setelah mengaktifkan DynamicColors, warna yang di resolve secara otomatis tersedia melalui attribute ?attr/colorPrimary, ?attr/colorSecondary, dll.

<Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:backgroundTint="?attr/colorPrimary" android:text="Tombol Dinamis" />

Mengontrol Penggunaan Tema Dinamis

Anda dapat menonaktifkan tema dinamis untuk satu activity atau seluruh aplikasi.

• Menonaktifkan untuk seluruh aplikasi:

  DynamicColors.applyToActivitiesIfAvailable(this, false)

• Menonaktifkan untuk satu activity:

  @OptIn(ExperimentalMaterial3Api::class) class NoDynamicThemeActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { DynamicColors.applyToActivityIfAvailable(this, true) // false = tidak pakai super.onCreate(savedInstanceState) // ... } }

Tips & Trik

• Gunakan DynamicColors.isDynamicColorAvailable() untuk memeriksa dukungan perangkat.
• Jika aplikasi Anda ingin tetap konsisten pada dark mode, pertimbangkan Theme.Material3.DayNight yang otomatis menyesuaikan.
• Hindari hard code warna utama di colors.xml bila Anda mengandalkan warna dinamis.
• Testing: gunakan emulator atau device dengan Android 12+ untuk melihat hasil warna dinamis.

Referensi Tambahan

Berikut beberapa sumber yang dapat Anda pelajari lebih lanjut:

• Material Design Dynamic Color
• Jetpack Compose Material3
• Android Developers Dynamic Colors