Tema adalah serangkaian gaya atau atribut seperti warna, jenis, dan bentuk, yang dapat memengaruhi tampilan dan nuansa perangkat seluler atau layar besar pengguna, dan pengalaman dalam aplikasi.
Poin-poin penting
- Untuk memberikan pengalaman yang lebih dipersonalisasi dan mudah diakses kepada pengguna, pastikan aplikasi Anda mengadopsi preferensi sistem, termasuk tema, seperti terang atau gelap, dinamis, dan warna 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 dan menyediakan kontrol yang sesuai dalam setelan perangkat, sementara tema hanya memengaruhi aplikasi tempat tema tersebut diimplementasikan.
Aplikasi Anda harus menerapkan salah satu jenis tema untuk menampilkannya, tetapi tema aplikasi tetap berlaku hanya di dalam aplikasi dan bukan 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 masing-masing aplikasi tergantung pada pengaturan 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 luminans dan permukaan yang dibuat dari nilai tonal tinggi. Sebaliknya, tema gelap, atau Mode malam, menggeser UI untuk mengurangi luminans. Permukaannya dibangun dari warna gelap abu-abu atau nilai tonal rendah.
Tema gelap memiliki beberapa manfaat: membantu keterbacaan layar saat cerah atau rendah kondisi cahaya, mengurangi ketegangan mata karena kecerahan yang lebih rendah, dan daya baterai. Selain itu, fitur tersebut 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, secara otomatis membuat gelap skema baru. Baca selengkapnya tentang Menyesuaikan Material dan sistem Warna untuk membuat tema bermerek.
- Pengguna dapat menyetel tema terang atau tema gelap di setelan Tampilan tingkat sistem ke selalu aktif, selalu nonaktif, atau otomatis berdasarkan waktu. Saran dari kami mencerminkan pengaturan sistem yang disukai pengguna, tetapi sebaiknya membuat kontrol dalam aplikasi untuk memberikan modifikasi yang lebih terperinci kepada pengguna.
- 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 kontrol yang lebih besar.
- Jika pengguna belum mengaktifkan tema atau setelan lainnya, Anda memiliki opsi untuk "mengunci" aplikasi Anda ke tema terang. Namun, kami tidak merekomendasikan hal ini, karena dapat bertentangan dengan kebutuhan aksesibilitas dan personalisasi pengguna.
Tema buatan pengguna
Tema buatan pengguna didukung oleh warna dinamis, yang kami tersedia dengan Material You mulai Android 12. Saat diaktifkan, setelan warna memperoleh warna kustom dari wallpaper pengguna untuk diterapkan ke aplikasi mereka dan UI sistem. Palet warna ini digunakan sebagai titik awal untuk membuat skema warna terang dan gelap.
Setelan font juga dapat diperbarui dalam setelan perangkat untuk memenuhi keinginan pengguna preferensi dan kebutuhan aksesibilitas. Pengaturan ini dapat dan harus dibawa ke dalam aplikasi, jadi pastikan untuk memanfaatkan nilai piksel yang dapat diskalakan untuk font.
Tema produsen
Produsen perangkat dapat memberikan kemampuan tema eksklusif tambahan yang dapat memengaruhi setelan UI dan tampilan sistem.
Tema aplikasi
Dasar pengukuran
Komponen Material di library Material menyediakan tema dasar yang menggunakan skema warna ungu dan {i>font<i} Roboto. Aplikasi apa pun yang tidak menentukan tema kembali ke atribut dasar pengukuran tersebut.
Kustom (merek)
Menggunakan tema kustom akan memberi Anda rentang ekspresi yang lebih besar untuk tampilan aplikasi dan terasa, atau bertindak sebagai pengganti ketika tema sistem tertentu tidak tersedia. Ini berguna baik saat Anda bekerja dengan sistem desain khusus sepenuhnya, sebuah pedoman merek, atau beberapa warna favorit Anda.
Aplikasi Anda juga dapat memiliki beberapa skema kustom, baik skema penuh yang dapat dilakukan pengguna pilihan, inspirasi konten, atau elemen sub-merek.
Konten
Untuk meningkatkan fokus ke beberapa konten, UI dapat menggunakan warna dinamis untuk mewarisi warna dari konten tersebut. Warna konten cocok dengan satu sumber konten utama, tetapi pastikan Anda menggunakannya dengan hati-hati dalam penayangan dengan berbagai sumber konten.
Tema biasanya memengaruhi aplikasi secara keseluruhan, tetapi juga dapat diterapkan secara selektif dan di samping tema-tema lainnya. Hindari terlalu banyak tema dan kombinasi dengan dengan 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, {i>Shape<i}). Penerapan Tema Material juga dapat diperluas untuk menyelesaikan ke tema.
Merek
Jika sistem tema Desain Material tidak selaras dengan tampilan dan nuansa yang Anda inginkan di aplikasi Anda, Anda dapat menerapkan tema yang sepenuhnya kustom. Pastikan untuk menguji properti 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 membangkitkan berbagai estetika. Dalam aplikasi, properti ini sering dikaitkan dengan Material sistem tema untuk memungkinkan penyesuaian pembuat aplikasi.
Warna
Menggunakan warna untuk mengekspresikan gaya dan menyampaikan makna. Menyetel warna aplikasi Anda bisa sangat penting untuk personalisasi, menentukan tujuan semantik, dan tentu saja mendefinisikan {i>brand identity<i}.
Dalam tema, skema warna adalah sekelompok nuansa yang ditetapkan untuk peran tertentu yang dipetakan ke dalam komponen. Pelajari lebih lanjut warna di Android UI dan sistem warna Material 3.
Jenis
Font sistem Android adalah Roboto (yang tersedia secara gratis untuk semua aplikasi), tetapi Anda dapat menyesuaikan jenis. Pertimbangkan keterbacaan font yang dipilih untuk diselaraskan peran mereka. Baca tentang cara menerapkan jenis.
Bentuk
Menyesuaikan bentuk sudut penampung setelah batas default dasar pengukuran akan membantu menentukan karakter aplikasi Anda. Misalnya, Anda dapat menggunakan sudut tumpul penuh untuk berikan nuansa lebih lembut dan menyenangkan dengan atau gunakan potongan sudut untuk nuansa yang lebih serius. Lihat token dan gaya bentuk untuk komponen Material.
Ikon
Ikon Material tersedia untuk digunakan di aplikasi Anda dalam lima gaya: Terisi, Tergarisbatasi, Tajam, Bulat, Dua Corak. Manfaatkan gaya ikon yang sama di seluruh untuk mempertahankan tampilan yang konsisten dan rapi.
Atribut tema lainnya
Meskipun warna, jenis, dan bentuk membentuk sistem penerapan tema Material utama, sistem desain tidak terbatas pada konsep yang diandalkan Material. Anda dapat memodifikasi sistem yang ada dan memperkenalkan sistem yang sama sekali baru — dengan kelas dan — untuk membuat konsep lain kompatibel dengan tema. Anda mungkin juga perlu memperluas atau mengganti sistem yang ada untuk memanfaatkan atribut khusus di luar apa disediakan. Misalnya, Anda mungkin ingin menambahkan sistem gradien atau spasi dimensi kustom.
Menerapkan tema di aplikasi
Class tema versus gaya plus
Tema dan gaya dapat memiliki beberapa atribut desain. Gaya dapat berupa terlepas dari tema dan mengacu pada tampilan elemen individu (atau View), meskipun Anda dapat menyetel tema di beberapa elemen dan bahkan seluruh . Gaya adalah pilihan gaya yang dapat digunakan kembali, analog dengan gaya atau token dalam perangkat lunak desain Anda. Misalnya, Tubuh Besar adalah gaya, sedangkan Terang dan Gelap adalah tema.
Mengimplementasikan tema di Compose
Sebuah tema biasanya terdiri dari beberapa sistem yang mengelompokkan visualisasi dan konsep perilaku, yang dimodelkan 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 yang diberi nama secara semantik yang dapat digunakan di seluruh aplikasi Anda. 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 caranya tema gelap dalam webview didukung.
Menyesuaikan tema Material
Anda dapat menggunakan plugin Figma Material Theme Builder untuk menyesuaikan Tema Material. Membangun tema dengan SQL memberi Anda kemampuan untuk mengimplementasikan tema dengan skema warna terang dan gelap yang telah dibuat, memungkinkan Anda untuk melakukan penyesuaian lebih lanjut dengan memperbarui file tema yang diekspor dengan nilai yang tepat.
