Tema adalah kumpulan gaya atau atribut seperti warna, jenis, dan bentuk, yang dapat memengaruhi tampilan dan nuansa perangkat seluler atau layar besar dan pengalaman dalam aplikasi pengguna.
Takeaway
- Untuk memberikan pengalaman yang lebih dipersonalisasi dan mudah diakses kepada pengguna, pastikan aplikasi Anda menggunakan preferensi sistem, termasuk tema, seperti terang atau gelap, dinamis, dan kontras.
- Buat tema kustom untuk digunakan sebagai penggantian jika dinamis tidak tersedia.
- Pertimbangkan setelan jenis saat menggunakan berbagai tema.
- Selalu periksa kontras teks dan permukaan untuk memastikan keterbacaan.
Jenis tema
Tema berbasis sistem atau berbasis aplikasi. Tema sistem dapat memengaruhi seluruh UI perangkat pengguna dan memberikan kontrol yang sesuai dalam setelan perangkat, sementara tema aplikasi hanya memengaruhi aplikasi yang menerapkannya.
Aplikasi Anda harus mengimplementasikan salah satu jenis tema untuk menampilkannya, tetapi tema aplikasi hanya berlaku dalam aplikasi, tidak di tempat lain pada perangkat. Anda juga dapat mengganti beberapa setelan tema sistem dengan setelan dalam aplikasi.
Tema sistem
Tema sistem berlaku di seluruh perangkat Android, termasuk setiap aplikasi, bergantung pada setelan pengguna. Tema sistem mencakup tema terang dan gelap, tema buatan pengguna, dan tema produsen.
Tema terang dan gelap
Tema terang, atau mode Siang, terdiri dari mode tampilan terang dengan pencahayaan yang lebih tinggi dan permukaan yang dibuat dari nilai tonal tinggi. Sebaliknya, tema gelap, atau Mode malam, menggeser UI untuk mengurangi luminans. Permukaan dibuat dari abu-abu gelap atau nilai warna yang rendah.
Tema gelap memiliki beberapa manfaat: membantu meningkatkan keterbacaan layar dalam kondisi cahaya cerah atau rendah, mengurangi ketegangan mata karena kecerahan yang lebih rendah, dan menghemat baterai. Selain itu, fitur ini sering kali menjadi fitur aplikasi yang paling banyak diminta di antara pengguna.
Pertimbangkan hal-hal berikut saat menerapkan tema terang dan gelap:
- Anda dapat menyesuaikan skema warna untuk ekspresi yang lebih besar. Jika Anda menggunakan Material Theme Builder untuk membuat skema, skema akan otomatis membuat skema gelap. Baca selengkapnya tentang Menyesuaikan Material dan sistem Warna untuk membuat tema bermerek.
- Pengguna dapat menetapkan tema terang atau tema gelap di setelan Display tingkat sistem ke selalu aktif, selalu nonaktif, atau otomatis berdasarkan waktu. Sebaiknya Anda menentukan setelan sistem pilihan pengguna, tetapi sebaiknya buat kontrol dalam aplikasi untuk memberi pengguna modifikasi yang lebih terperinci.
- Konten web di WebView juga dapat menggunakan gaya terang, gelap, atau default. Baca cara tema gelap di webview didukung.
- Jika pengguna telah mengaktifkannya, Android dapat memaksa tema gelap. Anda juga dapat membuat tema gelap kustom untuk mendapatkan kontrol yang lebih baik.
- Jika pengguna belum mengaktifkan tema atau setelan lain, Anda memiliki opsi untuk "mengunci" aplikasi ke tema terang. Namun, sebaiknya jangan lakukan hal ini, karena dapat bertentangan dengan kebutuhan aksesibilitas dan personalisasi pengguna.
Tema buatan pengguna
Tema buatan pengguna didukung oleh warna dinamis, yang kami sediakan dengan Material You mulai Android 12. Jika diaktifkan, warna dinamis akan memperoleh warna kustom dari wallpaper pengguna untuk diterapkan ke aplikasi dan UI sistemnya. Palet warna ini digunakan sebagai titik awal untuk menghasilkan skema warna terang dan gelap.
Setelan font juga dapat diperbarui dalam setelan perangkat untuk memenuhi preferensi dan kebutuhan aksesibilitas pengguna. Setelan ini dapat dan harus diterapkan ke dalam aplikasi, jadi pastikan untuk menggunakan nilai piksel yang dapat diskalakan untuk font.
Tema produsen
Produsen perangkat dapat memberikan kemampuan tema eksklusif tambahan yang dapat memengaruhi setelan tampilan dan UI sistem.
Tema aplikasi
Dasar pengukuran
Komponen Material di library Material menyediakan tema dasar bawaan yang menggunakan skema warna ungu dan font Roboto. Aplikasi apa pun yang tidak menentukan atribut tema akan dikembalikan ke atribut dasar pengukuran ini.
Kustom (merek)
Penggunaan tema kustom memberi Anda lebih banyak ekspresi untuk tampilan dan nuansa aplikasi, atau untuk bertindak sebagai penggantian saat tema sistem tertentu tidak tersedia. Hal ini berguna baik saat Anda bekerja dengan sistem desain kustom yang lengkap, panduan merek yang kecil, atau beberapa warna favorit Anda.
Aplikasi Anda juga dapat memiliki beberapa skema kustom, baik skema penuh yang dapat dipilih pengguna, elemen yang terinspirasi konten, maupun sub-merek.
Konten
Untuk meningkatkan fokus ke beberapa konten, UI dapat menggunakan warna dinamis untuk mewarisi warna dari konten tersebut. Warna konten berfungsi baik dengan satu sumber konten utama, tetapi pastikan untuk menggunakannya dengan hati-hati dalam penayangan dengan beberapa sumber konten.
Tema biasanya memengaruhi aplikasi secara keseluruhan, tetapi juga dapat diterapkan secara selektif dan bersama tema lainnya. Hindari terlalu banyak tema dan kombinasi dengan mempertahankan hierarki: sumber tema utama (baik dinamis maupun kustom) yang berlaku untuk sebagian besar UI.
Bahan
Desain Material menyediakan tema dasar dan sistem tema (Warna, Jenis, Bentuk). Penerapan Tema Material juga dapat diperluas untuk menyelesaikan atribut tambahan pada tema.
Merek
Jika sistem tema Desain Material tidak selaras dengan tampilan dan nuansa yang Anda inginkan di aplikasi, Anda dapat menerapkan tema yang sepenuhnya kustom. Pastikan untuk menguji properti kustom untuk kontras dan keterbacaan.
Lihat cara menerapkan sistem kustom di Compose.
Atribut tema
Atribut tema diselaraskan dengan gaya visual umum yang digunakan dalam desain UI untuk meningkatkan berbagai estetika. Dalam aplikasi, properti ini sering dikaitkan dengan sistem tema Material untuk memungkinkan penyesuaian pembuat aplikasi.
Warna
Menggunakan warna untuk mengekspresikan gaya dan menyampaikan makna. Menetapkan warna aplikasi dapat menjadi hal yang sangat penting untuk personalisasi, menentukan tujuan semantik, dan tentu saja menentukan identitas merek.
Dalam tema, skema warna adalah grup nada yang ditetapkan ke peran tertentu yang dipetakan ke komponen. Pelajari warna di UI Android dan sistem warna Material 3 lebih lanjut.
Jenis
Font sistem Android adalah Roboto (yang tersedia secara gratis untuk semua aplikasi), tetapi Anda dapat menyesuaikan jenisnya. Pertimbangkan keterbacaan font yang dipilih agar selaras dengan perannya. Baca tentang menerapkan jenis.
Bentuk
Menyesuaikan bentuk sudut penampung setelah default dasar pengukuran membantu menentukan karakter aplikasi Anda. Misalnya, Anda dapat menggunakan sudut lengkung penuh untuk memberikan nuansa yang lebih lembut dan menyenangkan dengan atau menggunakan potongan angular untuk nuansa yang lebih serius. Lihat token bentuk dan gaya untuk Komponen Material.
Ikon
Ikon Material tersedia untuk digunakan di aplikasi Anda dalam lima gaya: Filled, Outlined, Sharp, Rounded, Two Tone. Gunakan gaya ikon yang sama di seluruh aplikasi Anda untuk mempertahankan tampilan yang konsisten dan menarik.
Atribut tema lainnya
Meskipun warna, jenis, dan bentuk membentuk sistem tema Material utama, sistem desain tidak terbatas pada konsep yang diandalkan Material. Anda dapat memodifikasi sistem yang ada dan memperkenalkan sistem yang benar-benar baru — dengan class dan jenis baru — untuk membuat konsep lain kompatibel dengan tema. Anda mungkin juga perlu memperluas atau mengganti sistem yang ada untuk memanfaatkan atribut khusus selain yang disediakan. Misalnya, Anda mungkin ingin menambahkan sistem dimensi gradien atau spasi.
Menerapkan tema di aplikasi
Tema versus gaya plus kelas
Baik tema maupun gaya dapat memiliki beberapa atribut desain. Gaya dapat tidak bergantung pada tema dan mengacu pada tampilan setiap elemen (atau Tampilan), sementara Anda dapat menetapkan tema di beberapa elemen dan bahkan seluruh aplikasi. Gaya adalah pilihan gaya yang dapat digunakan kembali, yang serupa dengan gaya atau token dalam software desain Anda. Misalnya, Isi Besar adalah gaya, sedangkan Terang dan Gelap adalah tema.
Mengimplementasikan tema di Compose
Sebuah tema biasanya terdiri dari beberapa sistem yang mengelompokkan konsep visual dan perilaku umum, yang Anda modelkan menggunakan class dengan nilai tema.
Lihat Desain Material 3 di Compose untuk informasi selengkapnya tentang cara menggunakan Jetpack Compose untuk membuat implementasi tema Desain Material 3.
Color.kt
val md_theme_light_primary = Color(0xFF476810)
val md_theme_light_onPrimary = Color(0xFFFFFFFF)
val md_theme_light_primaryContainer = Color(0xFFC7F089)
val md_theme_dark_primary = Color(0xFFACD370)
val md_theme_dark_onPrimary = Color(0xFF213600)
val md_theme_dark_primaryContainer = Color(0xFF324F00)
Mengimplementasikan tema di View
Tema adalah kumpulan resource dengan nama semantik yang dapat digunakan di seluruh aplikasi. Tema memiliki sintaksis gaya yang sama.
Colors.xml
<resources>
<color name="home_yellow">#E8D655</color>
</resources>
Webview
Konten web di WebView juga dapat menggunakan gaya terang, gelap, atau default. Baca cara tema gelap di webview didukung.
Menyesuaikan tema Material
Anda dapat menggunakan plugin Figma Builder Tema Material untuk menyesuaikan Tema Material. Membuat tema dengan API tersebut akan memberi Anda file tema yang dapat diimplementasikan dengan skema warna terang dan gelap yang sudah dihasilkan, sehingga Anda dapat melakukan penyesuaian lebih lanjut dengan memperbarui file tema yang diekspor dengan nilai yang tepat.
