Hallo kawan-kawan. Seperti yang kujanjikan pada artikel Apa itu Rate Limit pada Github API?, kita akan membahas tentang dark mode. Inilah salah satu fitur yang diwujudkan pada Android Q. Dirilisnya pun masih tergolong baru loh. Bulan Mei 2019 lalu saat event tahunan Google yaitu I/O 2019!
Tapi tunggu dulu. Sebelum lanjut, apa sih dark mode itu? Dark mode adalah sebuah fitur yang membuat tampilan setiap aplikasi di smartphone kita menjadi gelap. Lalu apa manfaatnya? Smartphone jadi lebih signifikan hemat dalam penggunaan daya. Juga jadi lebih visible alias mudah dipandang bagi pengguna dengan penglihatan rendah.
Manfaat lain, kita kita tak perlu lagi khawatir berlebihan dengan dampak buruk penggunaan smartphone untuk mata. Asal digunakan secara proporsional, radiasi cahaya smartphone yang terpapar ke mata kita jadi berkurang. Eh tunggu dulu! Bukan artinya fitur dark mode bikin kita makin berlama-lama dengan smartphone untuk hal-hal nirfaedah ya. Apalagi cuman buat buka IG nyari peninggi badan atau stalking IG mantan. Ambyar!
💻 Mulai Belajar Pemrograman
Belajar pemrograman di Dicoding Academy dan mulai perjalanan Anda sebagai developer profesional.
Daftar SekarangSebenarnya dark mode sendiri sudah dapat berjalan dengan baik pada Android di bawah versi Q. Namun di versi terbaru, dark mode lebih prima lagi performanya dari segi fitur, penggunaan, dan implementasi di dalam aplikasi yang kita kembangkan. Nah, agar aplikasi mendukung fitur tersebut, ada beberapa yang perlu kita ketahui terlebih dahulu. Yaitu:
Tema Untuk Dark Mode
Untuk mendukung dark mode, aplikasi wajib menggunakan style yang disediakan AppCompat yaitu DayNight seperti berikut:
|
1 |
<style name="AppTheme" parent="Theme.AppCompat.DayNight"> |
Atau, bisa juga menggunakan style DayNight yang sediakan oleh Material Component seperti berikut:
|
1 |
<style name="AppTheme" parent="Theme.MaterialComponents.DayNight"> |
Dengan menggunakan tema seperti di atas, aplikasi kita akan mengikuti dark mode yang dikontrol oleh sistem.
Mengganti Tema dalam Aplikasi
Ada yang menarik dalam dark mode yang bisa kita terapkan. Yaitu, kita bisa membuat dark mode yang tidak mengikuti kontrol sistem. Kita bisa menentukan apakah aplikasi kita menggunakan dark mode saat sistem dalam keadaan light mode atau pun sebaliknya.
Saat aplikasi kita dijalankan di bawah Android Q, berikut pilihan tema yang disediakan.
- Light Mode
- Dark Mode
- Diatur oleh penghemat daya (opsi default yang disarankan)
Berbeda dengan dengan opsi di atas, berikut jika aplikasi kita dijalankan di Android Q.
- Light Mode
- Dark Mode
- Default system seperti yang sudah disebutkan sebelumnya (opsi default yang sarankan)
Project Android Dark Mode
Terasa kurang jika kita sekadar tahu saja. Untuk itu, mari kita buat project baru dan coba menerapkan dark mode ini.
Oke, langsung saja buat project baru. Setelah selesai, kita awali dengan mengganti style aplikasi yang berada pada berkas styles.xml menjadi seperti berikut:
|
1 2 3 4 5 6 7 8 9 |
<resources> <!-- Base application theme. --> <style name="AppTheme" parent="Theme.AppCompat.DayNight"> <!-- Customize your theme here. --> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorAccent">@color/colorAccent</item> </style> </resources> |
Setelah selesai dengan style aplikasi, kita akan menentukan skema warna dari dark mode yang akan kita gunakan. Caranya kita akan membuat berkas colors baru yang khusus untuk dark mode itu sendiri. Caranya? Ikuti beberapa langkah berikut:Bisa diperhatikan bahwa pada attribute parent di atas, kita menggunakan tema DayNight yang disediakan AppCompat. Tapi jika teman-teman ingin menggunakan tema DayNight dari Material Component, jangan lupa tambahkan dependensinya pada berkas build.gradle.
- Klik kanan pada folder values kemudian pilih New -> Values Resources Files.
- Setelah jendela baru terbuka, masukkan colors pada kolom File Name.
- Masih di jendela yang sama, pilih Night Mode yang berada pada kolom Qualifiers. Selanjutnya klik tombol >> dan ubah pilihan Night mode menjadi Night. Contohnya seperti berikut:
Android Studio create new resources
- Jika dirasa sudah sesuai, klik OK. maka pada submenu values akan ada seperti folder baru dengan nama colors. Di dalamnya akan ada 2 (dua) berkas colors.xml seperti berikut:
Android Studio
colors.xml (night) adalah berkas colors baru yang sudah kita buat, sedangkan colors.xml adalah berkas colors default saat kita membuat project baru.
Selanjutnya kita akan mengubah isi dari berkas colors yang sebelumnya kita buat. Nah, untuk skema warnanya seperti berikut:
Colour schema
Dan untuk konfigurasi pada berkas colors.xml akan seperti berikut:
|
1 2 3 4 5 6 7 8 |
<?xml version="1.0" encoding="utf-8"?> <resources> <color name="colorPrimary">#303030</color> <color name="colorPrimaryDark">#202020</color> <color name="colorAccent">#03DAC5</color> <color name="textPopupEditTextColor">#03DAC5</color> </resources> |
Sampai di sini sebenarnya kita bisa langsung menjalankan aplikasi yang kita buat. Namun kita hanya akan melihat tampilan yang sederhana. Untuk itu, mari kita ubah sedikit tampilan dari aplikasi agar kita bisa melihat perbedaan yang jelas antara dark mode dan light mode.Jika kita perhatikan, di dalam konfigurasi di atas terdapat satu item resources yang eror. Ini karena kita belum menambah item dengan resources yang sama pada berkas default colors.xml. Untuk mengatasinya, langsung saja buka berkas colors.xml default dan tambahkan item resources tersebut. Ubah juga beberapa value dari setiap item menjadi seperti berikut:
|
1 2 3 4 5 6 7 8 |
<?xml version="1.0" encoding="utf-8"?> <resources> <color name="colorPrimary">#FFFFFF</color> <color name="colorPrimaryDark">#D3D3D3</color> <color name="colorAccent">#DA4003</color> <color name="textPopupEditTextColor">#333333</color> </resources> |
Sampai di sini sebenarnya kita bisa langsung menjalankan aplikasi yang kita buat. Namun kita hanya akan melihat tampilan yang sederhana. Untuk itu, mari kita ubah sedikit tampilan dari aplikasi agar kita bisa melihat perbedaan yang jelas antara dark mode dan light mode.Langsung saja buka berkas main_activity.xml dan ubah kode yang berada di dalamnya menjadi seperti berikut:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout 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" tools:context=".MainActivity"> <TextView android:id="@+id/tvEmail" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Email" android:textSize="12sp" android:textColor="@color/textPopupEditTextColor" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" android:layout_margin="32dp"/> <EditText android:id="@+id/email" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginStart="30dp" android:layout_marginEnd="32dp" android:hint="john@gmail.com" android:layout_marginTop="5dp" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="@+id/tvEmail" app:layout_constraintTop_toBottomOf="@+id/tvEmail" /> <TextView android:id="@+id/tvPassword" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="26dp" android:text="Password" android:textColor="@color/textPopupEditTextColor" android:textSize="12sp" app:layout_constraintStart_toStartOf="@+id/tvEmail" app:layout_constraintTop_toBottomOf="@id/email" /> <EditText android:id="@+id/password" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginStart="30dp" android:layout_marginEnd="32dp" android:hint="*******" android:layout_marginTop="5dp" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="@+id/tvEmail" app:layout_constraintTop_toBottomOf="@+id/tvPassword" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="16dp" app:layout_constraintEnd_toEndOf="@+id/password" app:layout_constraintTop_toBottomOf="@+id/password" android:text="sign in"/> </androidx.constraintlayout.widget.ConstraintLayout> |
Jika dirasa sudah sesuai dan tidak terdapat eror, maka seperti inilah tampilan aplikasi buatan kita saat dijalankan.
Berdasarkan style yang sudah kita tentukan di awal, aplikasi kita akan mengikuti tema dark mode berdasarkan kontrol sistem seperti contoh di atas. Lantas bagaimana cara agar aplikasi kita tidak mengikuti kontrol sistem? Penasaran? Ayo kita buat.
Buka kelas MainActivity kemudian override fungsi onCreateOptionsMenu. Ubah kode yang berada di dalamnya seperti berikut:
|
1 2 3 4 5 6 |
override fun onCreateOptionsMenu(menu: Menu?): Boolean { menu?.add(Menu.NONE, 1 , Menu.NONE, "Dark Mode") menu?.add(Menu.NONE, 2 , Menu.NONE, "Light Mode") menu?.add(Menu.NONE, 3 , Menu.NONE, "Follow by system") return super.onCreateOptionsMenu(menu) } |
Selanjutnya override fungsi onOptionsItemSelected. Ubah kode yang berada di dalamnya menjadi seperti di bawah ini:
|
1 2 3 4 5 6 7 8 |
override fun onOptionsItemSelected(item: MenuItem): Boolean { when(item.itemId){ 1 -> AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES) 2 -> AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO) else -> AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_FOLLOW_SYSTEM) } return super.onOptionsItemSelected(item) } |
Jika sudah selesai, kode keseluruhan dari kelas MainActivity akan seperti berikut:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) } override fun onCreateOptionsMenu(menu: Menu?): Boolean { menu?.add(Menu.NONE, 1 , Menu.NONE, "Dark Mode") menu?.add(Menu.NONE, 2 , Menu.NONE, "Light Mode") menu?.add(Menu.NONE, 3 , Menu.NONE, "Follow by system") return super.onCreateOptionsMenu(menu) } override fun onOptionsItemSelected(item: MenuItem): Boolean { when(item.itemId){ 1 -> AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES) 2 -> AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO) else -> AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_FOLLOW_SYSTEM) } return super.onOptionsItemSelected(item) } } |
Okey, langsung saja jalankan kembali aplikasinya. Jika tak terdapat eror saat kompilasi, kamu akan melihat tampilan aplikasinya menjadi seperti berikut:
Wohoo! Aplikasi kita tidak lagi bergantung pada kontrol sistem untuk dark mode. Tapi seperti yang dicontohkan di atas, kita masih bisa mengatur tema dark mode yang mengikuti kontrol sistem dengan menu yang kita tambahkan.
Eits, tapi aplikasi yang sudah kita buat masih ada kurangnya nih. Jika kita menutup dan membukanya kembali, temanya akan kembali seperti semula atau mengikuti kontrol sistem. Nah sekarang aku tantang kamu untuk menyimpan state dari tema yang sudah kita atur agar tidak kembali seperti semula jika aplikasi ditutup. Diterima?
Mungkin segitu dulu bahasan tentang dark mode pada Android. Jika ada yang kurang jelas atau ada yang mau ditanyakan, silakan tulis komentar di kolom yang sudah tersedia di bawah yaa.
Cheers!
