Gaya dan tema di Android memungkinkan Anda memisahkan detail desain aplikasi dari struktur dan perilaku UI, mirip dengan stylesheet di desain web.
Gaya adalah kumpulan atribut yang
menentukan tampilan untuk View
tunggal.
Gaya dapat menentukan atribut seperti warna font, ukuran font,
warna latar belakang, dan banyak lagi.
Tema adalah kumpulan atribut yang diterapkan ke seluruh aplikasi, aktivitas, atau hierarki tampilan, bukan hanya tampilan individual. Saat Anda menerapkan tema, setiap tampilan di aplikasi atau aktivitas akan menerapkan setiap atribut tema yang didukungnya. Tema juga dapat menerapkan gaya ke elemen nontampilan, seperti status bar dan latar belakang jendela.
Gaya dan tema dideklarasikan di file
resource gaya dalam res/values/
, biasanya bernama styles.xml
.

Gambar 1. Dua tema diterapkan ke dalam aktivitas yang sama:
Theme.AppCompat
(kiri) dan Theme.AppCompat.Light
(kanan)
Tema versus Gaya
Tema dan gaya memiliki banyak kemiripan, tetapi digunakan untuk tujuan yang berbeda. Tema dan gaya memiliki struktur dasar yang sama—pasangan nilai kunci yang memetakan atribut ke resource.
Gaya menentukan atribut untuk jenis tampilan tertentu. Misalnya, satu gaya dapat menentukan atribut tombol. Setiap atribut yang Anda tentukan dalam gaya adalah atribut yang dapat disetel dalam file tata letak. Dengan mengekstrak semua atribut ke suatu gaya, mudah untuk digunakan dan memeliharanya di beberapa widget.
Tema menentukan koleksi resource bernama yang dapat
direferensikan oleh gaya, tata letak, widget, dan sebagainya. Tema menetapkan nama semantik,
seperti colorPrimary
, ke resource Android.
Gaya dan tema dimaksudkan untuk bekerja sama. Misalnya, Anda mungkin memiliki
gaya yang menentukan bahwa satu bagian tombol harus
colorPrimary
, dan bagian lainnya harus
colorSecondary
. Definisi aktual warna tersebut
tersedia dalam tema. Saat perangkat masuk ke mode malam, aplikasi Anda
dapat beralih dari tema "terang" ke tema "gelap" sehingga mengubah
nilai untuk semua nama resource tersebut. Anda tidak perlu mengubah gaya,
karena gaya menggunakan nama semantik dan bukan definisi warna
tertentu.
Untuk informasi selengkapnya tentang cara kerja tema dan gaya bersama, lihat postingan blog Gaya Android: Tema vs Gaya.
Membuat dan menerapkan gaya
Untuk membuat gaya atau tema yang baru, buka file res/values/styles.xml
project Anda. Untuk setiap gaya yang ingin Anda buat, ikuti langkah-langkah berikut:
- Tambahkan elemen
<style>
dengan nama yang mengidentifikasi gaya secara unik. - Tambahkan elemen
<item>
untuk setiap atribut gaya yang ingin Anda tetapkan.name
di setiap item menentukan atribut yang biasanya digunakan sebagai atribut XML dalam tata letak Anda. Nilai dalam elemen<item>
adalah nilai untuk atribut tersebut.
Sebagai contoh, jika Anda menentukan gaya berikut:
<?xml version="1.0" encoding="utf-8"?> <resources> <style name="GreenText" parent="TextAppearance.AppCompat"> <item name="android:textColor">#00FF00</item> </style> </resources>
Anda dapat menerapkan gaya ke tampilan sebagai berikut:
<TextView style="@style/GreenText" ... />
Setiap atribut yang ditentukan dalam gaya diterapkan ke tampilan tersebut jika tampilan menerimanya. Tampilan cukup mengabaikan atribut yang tidak diterimanya.
Catatan:
Hanya elemen yang Anda tambahkan atribut style
yang akan menerima atribut tersebut—tampilan turunan apa pun tidak menerapkan gaya tersebut. Jika ingin
tampilan turunan mewarisi gaya, terapkan gaya dengan
atribut android:theme
.
Namun, daripada menerapkan gaya ke masing-masing tampilan, biasanya Anda akan menerapkan gaya sebagai tema untuk seluruh aplikasi, aktivitas, atau kumpulan tampilan.
Memperluas dan menyesuaikan gaya
Saat membuat gaya Anda sendiri, Anda harus selalu memperluas gaya yang sudah ada dari
framework atau support library sehingga Anda dapat mempertahankan kompatibilitas dengan gaya UI platform.
Untuk memperluas gaya, tentukan gaya yang ingin Anda perluas dengan atribut parent
.
Anda kemudian dapat mengganti atribut gaya turunan dan menambahkan gaya yang baru.
Misalnya, Anda dapat mewarisi tampilan teks default platform Android dan mengubahnya sebagai berikut:
<style name="GreenText" parent="@android:style/TextAppearance"> <item name="android:textColor">#00FF00</item> </style>
Namun, Anda harus selalu mewarisi gaya aplikasi inti Anda dari Android Support Library.
Gaya di dalam support library menyediakan kompatibilitas
Android 4.0 (API level 14) dan yang lebih baru
dengan mengoptimalkan setiap gaya untuk atribut UI yang tersedia di setiap versi.
Gaya di dalam support library sering kali memiliki nama yang mirip dengan
gaya dari platform, tetapi dengan AppCompat
yang disertakan.
Untuk mewarisi gaya dari library atau project Anda sendiri, deklarasikan nama gaya induk
tanpa bagian @android:style/
yang ditampilkan di atas.
Misalnya, contoh berikut mewarisi gaya tampilan teks
dari support library:
<style name="GreenText" parent="TextAppearance.AppCompat"> <item name="android:textColor">#00FF00</item> </style>
Anda juga dapat mewarisi beberapa gaya (kecuali gaya yang berasal dari platform) dengan memperluas
nama gaya dengan notasi titik, daripada menggunakan atribut parent
.
Yakni, dengan memberikan gaya yang
ingin Anda warisi sebagai awalan namanya, dipisahkan dengan titik. Lakukan tindakan ini
hanya saat memperluas gaya Anda sendiri, bukan gaya dari library lain. Misalnya,
gaya berikut mewarisi semua gaya dari gaya GreenText
di atas
lalu meningkatkan ukuran teks:
<style name="GreenText.Large"> <item name="android:textSize">22dp</item> </style>
Anda dapat terus mewarisi gaya seperti ini sebanyak yang Anda inginkan dengan merangkaikan lebih banyak nama.
Catatan:
Jika Anda menggunakan notasi titik untuk memperluas gaya, dan Anda juga menyertakan
atribut parent
, maka gaya induk akan mengganti semua gaya
yang diwarisi melalui notasi titik.
Untuk menemukan atribut yang dapat dideklarasikan dengan tag <item>
,
lihat tabel "atribut XML" di berbagai referensi class. Semua
tampilan mendukung atribut XML dari
class View
dasar, dan berbagai tampilan menambahkan atribut khusus mereka sendiri.
Misalnya, atribut XML
TextView menyertakan atribut
android:inputType
yang dapat Anda terapkan ke tampilan teks yang menerima
input, seperti widget EditText
.
Menerapkan gaya sebagai tema
Anda dapat membuat tema dengan cara yang sama seperti membuat gaya. Perbedaannya terletak pada cara
penerapannya: daripada menerapkan gaya dengan atribut style
pada tampilan,
terapkan tema dengan atribut
android:theme
pada tag <application>
atau tag
<activity>
di dalam file AndroidManifest.xml
.
Contohnya, berikut adalah cara menerapkan tema "gelap" desain material Android Support Library ke seluruh aplikasi:
<manifest ... > <application android:theme="@style/Theme.AppCompat" ... > </application> </manifest>
Berikut ini cara menerapkan tema "terang" ke hanya satu aktivitas:
<manifest ... > <application ... > <activity android:theme="@style/Theme.AppCompat.Light" ... > </activity> </application> </manifest>
Sekarang, setiap tampilan dalam aplikasi atau aktivitas menerapkan gaya yang ditentukan dalam tema yang diberikan. Jika tampilan hanya mendukung sebagian atribut yang dideklarasikan dalam gaya, maka tampilan hanya akan menerapkan atribut tersebut dan mengabaikan atribut yang tidak didukungnya.
Mulai dari Android 5.0 (API level 21) dan Android Support Library v22.1,
Anda juga dapat menentukan atribut android:theme
ke tampilan dalam file tata letak.
Tindakan ini mengubah tema untuk tampilan tersebut dan setiap
tampilan turunan, yang berguna untuk mengubah palet warna tema di bagian
tertentu dari antarmuka Anda.
Contoh sebelumnya menunjukkan cara menerapkan tema seperti Theme.AppCompat
yang disediakan oleh Android Support Library. Namun,
Anda mungkin ingin menyesuaikan tema agar sesuai dengan brand aplikasi Anda. Cara terbaik
untuk melakukannya adalah dengan memperluas gaya ini dari support library dan mengganti
beberapa atribut, seperti yang dijelaskan di bagian berikutnya.
Hierarki gaya
Android menyediakan berbagai cara untuk menetapkan atribut di seluruh aplikasi Android Anda. Misalnya, Anda dapat menetapkan atribut secara langsung dalam tata letak, Anda dapat menerapkan gaya ke tampilan, Anda dapat menerapkan tema ke tata letak, dan bahkan dapat menetapkan atribut secara terprogram.
Saat memilih cara menyesuaikan gaya pada aplikasi, perhatikan hierarki gaya Android. Secara umum, Anda sebaiknya menggunakan tema dan gaya sebanyak mungkin agar konsisten. Jika Anda telah menentukan atribut yang sama di beberapa tempat, daftar di bawah menentukan atribut mana yang akhirnya diterapkan. Daftar ini diurutkan dari prioritas tertinggi hingga prioritas rendah:
- Menerapkan gaya tingkat karakter atau paragraf melalui rangkaian teks ke
class yang berasal dari
TextView
- Menerapkan atribut secara terprogram
- Menerapkan masing-masing atribut langsung ke View
- Menerapkan gaya ke View
- Gaya default
- Menerapkan tema ke kumpulan View, aktivitas, atau seluruh aplikasi Anda
- Menerapkan gaya khusus View tertentu, seperti menetapkan
TextAppearance
padaTextView
Gambar 2. Gaya dari span
akan menggantikan gaya dari
textAppearance
.
Jika Anda mencoba memberikan gaya ke aplikasi dan tidak dapat melihat hasil yang Anda harapkan, gaya lainnya
kemungkinan mengganti perubahan yang Anda buat. Misalnya, jika Anda menerapkan tema ke
aplikasi Anda, bersama dengan gaya untuk masing-masing View
, atribut gaya akan mengganti
semua atribut tema yang cocok untuk View
tersebut. Namun, perhatikan bahwa atribut
tema yang tidak diganti oleh atribut gaya tersebut akan tetap digunakan.
TextAppearance
Gaya memiliki satu keterbatasan, yaitu Anda hanya dapat menerapkan satu gaya ke View
. Namun,
dalam TextView
, Anda juga dapat menentukan
atribut TextAppearance
yang berfungsi mirip dengan gaya, seperti yang ditunjukkan dalam contoh berikut:
<TextView ... android:textAppearance="@android:style/TextAppearance.Material.Headline" android:text="This text is styled via textAppearance!" />
TextAppearance
memungkinkan Anda menentukan
gaya khusus teks tanpa mengubah gaya View
yang tersedia untuk kegunaan lain. Namun,
perhatikan bahwa jika Anda menentukan atribut teks secara langsung pada View
atau dalam gaya,
nilai tersebut akan menggantikan nilai TextAppearance
.
TextAppearance
mendukung subset atribut gaya yang ditawarkan oleh TextView
Untuk daftar lengkap atribut, lihat
TextAppearance
.
Beberapa atribut TextView
umum yang tidak disertakan adalah
lineHeight[Multiplier|Extra]
,
lines
,
breakStrategy
, dan
hyphenationFrequency
.
TextAppearance
bekerja pada tingkat karakter, bukan tingkat paragraf, sehingga
atribut yang memengaruhi seluruh tata letak tidak didukung.
Menyesuaikan tema default
Saat Anda membuat project dengan Android Studio, tema desain material akan diterapkan
ke aplikasi secara default, sebagaimana ditentukan dalam file styles.xml
project Anda. Gaya AppTheme
ini
memperluas tema dari support library dan mencakup penggantian untuk
atribut warna yang digunakan oleh elemen UI utama, seperti
panel aplikasi dan tombol tindakan mengambang (jika digunakan).
Jadi, Anda dapat menyesuaikan dengan cepat desain warna aplikasi dengan memperbarui warna yang disediakan.
Misalnya, file styles.xml
Anda akan terlihat seperti ini:
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"> <!-- Customize your theme here. --> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorAccent">@color/colorAccent</item> </style>
Perhatikan bahwa nilai gaya sebenarnya merupakan rujukan bagi resource warna lainnya, yang didefinisikan
dalam file res/values/colors.xml
project. Itulah file yang
harus diedit untuk mengubah warna.
Namun, sebelum Anda mulai mengubah warna tersebut, pratinjau warna Anda dengan
Alat Warna Material. Alat ini membantu Anda memilih
warna dari palet material dan melihat pratinjau tampilannya di aplikasi.
Setelah memilih warna Anda, perbarui nilainya di res/values/colors.xml
:
<?xml version="1.0" encoding="utf-8"?> <resources> <!-- color for the app bar and other primary UI elements --> <color name="colorPrimary">#3F51B5</color> <!-- a darker variant of the primary color, used for the status bar (on Android 5.0+) and contextual app bars --> <color name="colorPrimaryDark">#303F9F</color> <!-- a secondary color for controls like checkboxes and text fields --> <color name="colorAccent">#FF4081</color> </resources>
Lalu Anda dapat mengganti gaya lain apa pun yang Anda inginkan. Misalnya, Anda dapat mengubah warna latar belakang aktivitas sebagai berikut:
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"> ... <item name="android:windowBackground">@color/activityBackground</item> </style>
Untuk daftar atribut yang dapat Anda gunakan dalam tema, lihat tabel
atribut di R.styleable.Theme
. Saat menambahkan gaya
untuk tampilan di tata letak, Anda juga dapat
menemukan atribut dengan melihat tabel "atribut XML" di referensi class tampilan. Misalnya,
semua tampilan mendukung atribut XML dari class View
dasar.
Sebagian besar atribut diterapkan ke jenis tampilan tertentu, dan beberapa atribut diterapkan ke semua tampilan.
Namun, beberapa atribut tema yang tercantum pada R.styleable.Theme
diterapkan ke jendela aktivitas, bukan tampilan dalam tata letak.
Misalnya, windowBackground
mengubah
latar belakang jendela dan windowEnterTransition
mendefinisikan animasi transisi untuk digunakan
saat aktivitas dimulai (untuk mengetahui detailnya, lihat Memulai
Aktivitas dengan Animasi).
Android Support Library juga menyediakan atribut lain yang dapat Anda gunakan untuk menyesuaikan
tema yang diperluas dari Theme.AppCompat
(seperti atribut colorPrimary
yang ditunjukkan di atas). Atribut ini ditampilkan paling baik di
file attrs.xml library
Catatan: Nama atribut dari support library
tidak menggunakan awalan android:
. Awalan tersebut hanya digunakan untuk atribut dari
framework Android.
Ada juga berbagai tema yang tersedia dari support library yang mungkin ingin Anda perluas, daripada yang ditampilkan di atas. Tempat terbaik untuk melihat tema yang tersedia adalah file themes.xml library.
Menambahkan gaya khusus versi
Jika versi baru Android menambahkan atribut tema yang ingin Anda gunakan, Anda dapat menambahkannya ke
tema Anda dengan tetap mempertahankan kompatibilitas dengan versi yang lebih lama. Yang Anda butuhkan hanya file
styles.xml
lain yang tersimpan di direktori values
yang menyertakan
penentu versi resource
. Contoh:
res/values/styles.xml # themes for all versions res/values-v21/styles.xml # themes for API level 21+ only
Karena gaya pada file values/styles.xml
tersedia untuk
semua versi, tema Anda di values-v21/styles.xml
dapat mewarisinya.
Dengan demikian, Anda dapat menghindari duplikasi gaya dengan memulainya menggunakan tema "dasar" dan kemudian
memperluasnya dalam gaya khusus versi Anda.
Misalnya, untuk mendeklarasikan transisi jendela untuk Android 5.0 (API level 21) dan yang lebih baru, Anda harus
menggunakan beberapa atribut baru. Jadi, tema dasar Anda di res/values/styles.xml
akan terlihat seperti ini:
<resources> <!-- base set of styles that apply to all versions --> <style name="BaseAppTheme" parent="Theme.AppCompat.Light.DarkActionBar"> <item name="colorPrimary">@color/primaryColor</item> <item name="colorPrimaryDark">@color/primaryTextColor</item> <item name="colorAccent">@color/secondaryColor</item> </style> <!-- declare the theme name that's actually applied in the manifest file --> <style name="AppTheme" parent="BaseAppTheme" /> </resources>
Lalu, tambahkan gaya khusus versi di res/values-v21/styles.xml
seperti berikut:
<resources> <!-- extend the base theme to add styles available only with API level 21+ --> <style name="AppTheme" parent="BaseAppTheme"> <item name="android:windowActivityTransitions">true</item> <item name="android:windowEnterTransition">@android:transition/slide_right</item> <item name="android:windowExitTransition">@android:transition/slide_left</item> </style> </resources>
Sekarang Anda dapat menerapkan AppTheme
dalam file manifes dan sistem akan memilih
gaya yang tersedia untuk setiap versi sistem.
Untuk informasi selengkapnya tentang menggunakan resource alternatif untuk perangkat yang berbeda, baca Menyediakan Resource.
Menyesuaikan gaya widget
Setiap widget dalam framework dan support library memiliki gaya default. Misalnya, saat Anda
menyesuaikan gaya aplikasi Anda menggunakan tema dari support library, instance dari Button
akan disesuaikan gayanya menggunakan
gaya Widget.AppCompat.Button
. Jika Anda ingin menerapkan gaya widget yang berbeda ke
tombol, Anda dapat melakukannya dengan atribut style
di file tata letak. Misalnya,
kode berikut menerapkan gaya tombol tanpa bingkai library:
<Button style="@style/Widget.AppCompat.Button.Borderless" ... />
Jika Anda ingin menerapkan gaya ini ke semua tombol, Anda dapat mendeklarasikannya dalam buttonStyle
tema Anda
sebagai berikut:
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"> <item name="buttonStyle">@style/Widget.AppCompat.Button.Borderless</item> ... </style>
Anda juga dapat memperluas gaya widget, seperti memperluas gaya lainnya, lalu menerapkan gaya widget kustom di tata letak atau tema Anda.
Referensi lainnya
Untuk mempelajari lebih lanjut tentang tema dan gaya, lihat referensi tambahan berikut: