Tutorial Dark Theme pada Android

Affandy Murad
4 min readOct 6, 2020

--

Tema gelap (dark theme atau night mode) merupakan fitur Android yang memungkinkan pengguna untuk menukar warna tema secara keseluruhan menjadi warna monokrom. Fitur ini diperkenalkan secara resmi oleh Google pada acara tahunan Google I/O 2019 sebagai fitur andalan pada Android Q (API level 29). Namun, fitur ini sebelumnya sudah diterapkan pada Android Pie (API level 28) yang terdapat di aplikasi pengaturan.

Pemanfaatan fitur tema gelap ini dianggap memiliki beberapa keuntungan, diantaranya penurunan konsumsi daya pada layar secara signifikan dan meningkatkan visibilitas baik pada pengguna yang sensitif terhadap cahaya terang maupun dalam lingkungan yang kurang cahaya.

Saat ini sudah banyak aplikasi Android yang sudah mendukung fitur ini adalah WhatsApp, Instagram, Twitter, YouTube, Line, Telegram, dan Slack. Tidak menutup kemungkinan aplikasi lain juga akan menyusul untuk mengadopsi fitur ini.

Walaupun baru diimplementasikan pada Android Pie, kita juga dapat membuat fitur ini dapat digunakan pada versi Android lama (backward support) dengan adanya AppCompat. AppCompat merupakan salah satu pustaka dari serangkaian pustaka Android Jetpack yang dikhususkan untuk memberi dukungan tema Android terbaru pada Android versi yang lebih lama. Saat ini, AppCompat sudah menjadi pustaka baku pada Android Studio saat membuat aplikasi baru.

Pada kesempatan kali ini saya akan mencoba menjelaskan tutorial membuat aplikasi Android yang mendukung fitur tema gelap.

Membuat Aplikasi Tema Gelap

Buat aplikasi Android baru menggunakan IDE Android Studio, pilih Empty Activity, lalu klik Next.

Tampilan templat projek baru

Kemudian tentukan nama dan paket aplikasi sesuai keinginan. Karena pada tutorial kali ini menggunakan bahasa pemrograman Kotlin, pilih Kotlin pada bagian Language lalu klik Finish. Harap tunggu sampai proses sinkronisasi Gradle sampai selesai untuk lanjut ke tahap berikutnya.

Tampilan detail projek yang akan dibuat

Pada app > build.gradle tambahkan pustaka baru di bagian dependencies seperti yang tertera di bawah ini kemudian sinkronkan lagi sampai selesai.

Setelah itu, buat satu kelas singleton sebagai basis aplikasi yang sedang dibuat. Kelas singleton inilah yang nantinya digunakan sebagai context dalam mengakses dan mengatur tema aplikasi yang diinginkan.

Jangan lupa untuk mendeklarasikan kelas singleton tadi kedalam Application pada AndroidManifest.

Kemudian buat kelas BaseActivity yang berisi fungsi untuk set tema pada StatusBar dan cek tema yang sedang digunakan. Jangan lupa untuk mengganti MainActivity : AppCompatActivity() menjadi MainActivity : BaseActivity()

Tahap berikutnya yaitu menentukan source night mode yang berisi warna-warna yang akan diimplementasikan dalam tema gelap. Caranya klik kanan pada direktori res > New > Android Resource Directory. Pilih Night Mode, ubah nama direktori menjadi values-night lalu klik OK.

Tampilan kotak dialog sumber baru

Untuk bagian styles.xml, ubah parent AppTheme seperti berikut

Untuk bagian colors.xml, ubah nilainya seperti berikut

Salin styles.xml dan colors.xml ke dalam direktori values-night, kemudian ubah nilai colorPrimary menjadi #424242, colorPrimaryDark dan colorAccent menjadi #ffffff dan colorLightPurple menjadi #424242.

Tahap berikutnya yaitu menentukan drawable night mode yang berisi gambar/grafik yang akan diimplementasikan dalam tema gelap. Caranya klik kanan pada direktori res > New > Android Resource Directory. Pilih Night Mode, ubah nama direktori menjadi drawable-night lalu klik OK. Pilih Vector Asset dengan klik kanan pada direktori res > New. Pilih gambar yang berbeda dengan nama yang sama agar dapat digunakan pada 2 tema yang berbeda (contoh gambar ic_mode dalam direktori drawable bergambar matahari sementara drawable-night bergambar bulan).

Implementasi gambar sesuai mode

Langkah berikutnya ubah activity_main.xml seperti berikut

Langkah terakhir, ubah MainActivity.kt seperti berikut

Selesai! Jika berhasil maka tampilan aplikasi akan menjadi seperti ini

Tampilan aplikasi tema gelap yang dapat ditukar menggunakan switch

Untuk mengunduh projek utuh dapat mengunjungi pranala GitHub berikut ini

Semoga tutorial membuat aplikasi Android dengan fitur tema gelap ini bermanfaat bagi para pembaca. Terima kasih.

--

--

Affandy Murad
Affandy Murad

Written by Affandy Murad

Mobile Developer · Associate Mobile Engineer · Android · iOS

No responses yet