Gaya dan tema

Mencoba cara Compose

Jetpack Compose adalah toolkit UI yang direkomendasikan untuk Android. Pelajari cara menggunakan tema di Compose.

Sistem Desain di Compose →

Gaya dan tema di Android memungkinkan Anda memisahkan detail desain aplikasi dari UI struktur dan perilaku, mirip dengan {i>sheet<i} dalam desain web.

Gaya adalah kumpulan atribut yang menentukan tampilan untuk satu View. Gaya dapat menentukan atribut seperti warna {i>font<i}, ukuran {i>font<i}, warna latar belakang, dan banyak lagi.

Tema adalah kumpulan atribut yang diterapkan ke seluruh aplikasi, aktivitas, atau tampilan hierarki—bukan hanya tampilan individual. Saat Anda menerapkan tema, setiap tampilan di aplikasi atau aktivitas menerapkan setiap atribut tema yang didukungnya. Tema juga bisa menerapkan gaya ke elemen non-tampilan, seperti status bar dan latar belakang jendela.

Gaya dan tema dideklarasikan dalam style resource file di res/values/, biasanya bernama styles.xml.

Gambar 1. Dua tema diterapkan pada aktivitas yang sama: Theme.AppCompat (kiri) dan Theme.AppCompat.Light (kanan).

Tema versus gaya

Tema dan gaya memiliki banyak kesamaan, 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 mungkin menentukan atribut tombol. Setiap atribut yang Anda tetapkan dalam gaya adalah atribut yang dapat Anda tetapkan file tata letak. Mengekstrak semua atribut ke gaya memudahkan penggunaan dan pemeliharaannya di berbagai widget.

Tema menentukan kumpulan resource bernama yang dapat direferensikan oleh gaya, tata letak, widget, dan sebagainya. Tema menetapkan nama semantik, seperti colorPrimary, ke Android Google Cloud Platform.

Gaya dan tema dimaksudkan untuk bekerja sama. Misalnya, Anda mungkin memiliki gaya yang menetapkan satu bagian tombol adalah colorPrimary, dan bagian lainnya adalah colorSecondary. Definisi sebenarnya dari warna-warna tersebut disediakan dalam tema. Kapan perangkat masuk ke mode malam, aplikasi Anda dapat beralih dari "cahaya" menjadi “gelap” tema, mengubah nilai untuk semua nama resource tersebut. Anda tidak perlu mengubah {i>style<i}, karena gaya menggunakan nama semantik dan bukan definisi warna tertentu.

Untuk informasi selengkapnya tentang cara tema dan gaya bekerja sama, lihat postingan blog Gaya visual Android: tema vs gaya.

Membuat dan menerapkan gaya

Untuk membuat gaya baru, buka file res/values/styles.xml project Anda. Sebagai setiap gaya yang ingin Anda buat, ikuti langkah-langkah berikut:

1. Tambahkan elemen <style> dengan nama yang mengidentifikasi gaya secara unik.
2. Tambahkan elemen <item> untuk setiap atribut gaya yang ingin Anda tentukan. Tujuan name di setiap item menentukan atribut yang Anda gunakan sebagai atribut XML dalam tata letak. Nilai dalam elemen <item> adalah nilai untuk atribut tersebut.

Misalnya, Anda mendefinisikan 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 ditetapkan dalam gaya diterapkan ke tampilan tersebut jika tampilan menerimanya. Tampilan mengabaikan atribut apa pun yang tidak diterimanya.

Catatan: Hanya elemen tempat Anda menambahkan atribut style yang menerima elemen tersebut atribut gaya. Tampilan turunan tidak menerapkan gaya. Jika Anda ingin tampilan turunan mewarisi gaya, terapkan gaya dengan atribut android:theme.

Akan tetapi, alih-alih menerapkan gaya ke tampilan individual, Anda biasanya menerapkan gaya sebagai tema untuk seluruh aplikasi, aktivitas, atau kumpulan yang berbeda, seperti yang dijelaskan di bagian lain dari panduan ini.

Memperluas dan menyesuaikan gaya

Saat membuat gaya Anda sendiri, selalu perluas gaya yang ada dari framework atau Support Library sehingga Anda mempertahankan kompatibilitas dengan gaya UI platform. Untuk memperluas gaya, tentukan atribut gaya yang ingin diperluas dengan atribut parent. Anda kemudian dapat mengganti atribut gaya dan menambahkan yang baru.

Misalnya, Anda bisa mewarisi tampilan teks default platform Android dan memodifikasinya sebagai berikut ini:

<style name="GreenText" parent="@android:style/TextAppearance">
    <item name="android:textColor">#00FF00</item>
</style>

Namun, selalu warisi gaya aplikasi inti Anda dari Android Support Library. Gaya di Support Library menyediakan kompatibilitas dengan mengoptimalkan setiap gaya untuk atribut UI yang tersedia di setiap versi. Gaya {i>Support Library<i} sering 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 dalam contoh sebelumnya. 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 bisa mewarisi gaya—kecuali gaya dari platform—dengan memperluas nama dengan notasi titik, bukan menggunakan atribut parent. Artinya, berikan awalan pada nama gaya Anda dengan nama gaya yang ingin Anda warisi, dipisahkan oleh titik. Anda biasanya hanya melakukan ini saat memperluas gaya Anda sendiri, bukan gaya dari library lain. Misalnya, gaya berikut mewarisi semua gaya dari GreenText dalam contoh sebelumnya dan kemudian meningkatkan ukuran teks:

<style name="GreenText.Large">
    <item name="android:textSize">22dp</item>
</style>

Anda bisa terus mewarisi gaya seperti ini sebanyak yang Anda inginkan dengan merangkai lebih banyak nama.

Catatan: Jika Anda menggunakan notasi titik untuk memperluas gaya dan Anda juga menyertakan parent, gaya induk akan menggantikan gaya apa pun yang diwarisi melalui notasi titik.

Untuk menemukan atribut yang dapat Anda deklarasikan dengan tag <item>, lihat kolom "XML atribut" di berbagai referensi class. Dukungan semua tampilan Atribut XML dari dasar View class, dan banyak tampilan menambahkan atribut khusus mereka sendiri. Misalnya, Atribut XML TextView sertakan android:inputType yang dapat diterapkan 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 adalah cara Anda menerapkannya: alih-alih menerapkan gaya dengan atribut style pada tampilan, Anda menerapkan tema dengan atribut android:theme pada tag <application> atau Tag <activity> dalam file AndroidManifest.xml.

Misalnya, berikut ini cara menerapkan Desain Material "gelap" dari Android Support Library tema menjadi 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>

Setiap tampilan di aplikasi atau aktivitas menerapkan gaya yang didukungnya dari gaya yang didefinisikan dalam tema tertentu. Jika tampilan hanya mendukung sebagian atribut yang dideklarasikan dalam gaya, maka ini berlaku hanya atribut tersebut dan mengabaikan atribut yang tidak didukung.

Mulai Android 5.0 (API level 21) dan Android Support Library v22.1, Anda juga dapat menentukan atribut android:theme ke tampilan di file tata letak Anda. Tindakan ini mengubah tema untuk tampilan tersebut dan setiap tampilan turunan, yang berguna untuk mengubah palet warna tema dalam dari antarmuka Anda.

Contoh sebelumnya menunjukkan cara menerapkan tema seperti Theme.AppCompat yang yang disediakan oleh Android Support Library. Namun, Anda biasanya ingin menyesuaikan tema agar brand aplikasi Anda. Cara terbaik untuk melakukannya adalah dengan memperluas {i>style<i} ini dari {i>Support Library<i} dan mengganti beberapa atribut, seperti yang dijelaskan di bagian berikut.

Hierarki gaya

Android menyediakan berbagai cara untuk menyetel atribut di seluruh aplikasi Android. Misalnya, Anda bisa menyetel atribut secara langsung dalam tata letak, menerapkan gaya ke tampilan, menerapkan tema ke tata letak, dan bahkan menetapkan atribut secara terprogram.

Saat memilih cara menyesuaikan gaya pada aplikasi, perhatikan hierarki gaya Android. Secara umum, gunakan tema dan gaya sebanyak mungkin untuk konsistensi. Jika Anda menentukan atribut yang sama di beberapa tempat, daftar berikut menentukan atribut mana yang akhirnya diterapkan. Daftarnya adalah diurutkan dari prioritas tertinggi ke terendah.

1. Menerapkan gaya tingkat karakter atau paragraf menggunakan span teks yang berasal dari TextView Google Cloud Platform.
2. Menerapkan atribut secara terprogram.
3. Menerapkan masing-masing atribut langsung ke tampilan.
4. Menerapkan gaya ke tampilan.
5. Gaya default.
6. Menerapkan tema ke kumpulan tampilan, aktivitas, atau seluruh aplikasi Anda.
7. Menerapkan gaya khusus tampilan tertentu, seperti menyetel TextAppearance di TextView.

Gambar 2. Gaya dari span akan menggantikan gaya dari textAppearance.

Perhatian: Jika Anda menata gaya aplikasi dan tidak melihat hasil yang diharapkan, kemungkinan gaya lainnya menggantikan perubahan Anda. Misalnya, jika Anda menerapkan tema ke aplikasi bersama dengan gaya ke View individual, atribut gaya akan menggantikan tema yang cocok untuk View tersebut. Namun, perhatikan bahwa setiap atribut tema yang yang diganti oleh gaya tetap digunakan.

TextAppearance

Gaya memiliki satu keterbatasan, yaitu Anda hanya dapat menerapkan satu gaya ke View. Di Namun, 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 tertentu untuk teks sekaligus membiarkan gaya View tersedia untuk penggunaan lain. Namun, perhatikan bahwa jika Anda mendefinisikan atribut teks secara langsung pada View atau dalam gaya, nilai-nilai tersebut akan menggantikan TextAppearance nilai.

TextAppearance mendukung subset atribut gaya yang TextView di seluruh platform Google. Untuk daftar atribut lengkap, lihat TextAppearance.

Beberapa atribut TextView umum yang tidak disertakan adalah lineHeight[Multiplier|Extra], lines, breakStrategy, dan hyphenationFrequency. TextAppearance berfungsi pada level karakter, bukan level paragraf, jadi yang memengaruhi seluruh tata letak tidak didukung.

Menyesuaikan tema default

Saat membuat project dengan Android Studio, tema Desain Material akan diterapkan ke aplikasi Anda dengan secara default, seperti yang ditentukan dalam file styles.xml project Anda. Gaya AppTheme ini memperluas tema dari Support Library dan menyertakan penggantian untuk atribut warna yang digunakan menurut elemen UI utama, seperti panel aplikasi dan tombol tindakan mengambang, jika digunakan. Jadi, Anda dapat menyesuaikan desain warna aplikasi Anda dengan memperbarui warna yang disediakan.

Misalnya, file styles.xml Anda 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>

Nilai gaya sebenarnya merupakan referensi ke elemen resource warna, yang ditentukan dalam file res/values/colors.xml project Anda. File ini adalah file yang Anda edit untuk mengubah warna. Lihat Ringkasan Warna Desain Material untuk meningkatkan pengalaman pengguna dengan warna dinamis dan warna kustom tambahan.

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>

Anda kemudian bisa mengganti gaya lain apa pun yang Anda inginkan. Misalnya, Anda dapat mengubah aktivitas warna latar belakang 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 "atribut XML" dalam referensi class tampilan. Misalnya, semua tampilan mendukung Atribut XML dari View dasar class.

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 berlaku untuk jendela aktivitas, bukan tampilan dalam tata letak. Misalnya, windowBackground mengubah latar belakang jendela dan windowEnterTransition menentukan animasi transisi yang akan digunakan saat aktivitas dimulai. Untuk detail selengkapnya, lihat Mulai aktivitas menggunakan animasi.

Android Support Library juga menyediakan atribut lain yang dapat Anda gunakan untuk menyesuaikan tema diperluas dari Theme.AppCompat, seperti atribut colorPrimary yang ditampilkan di contoh sebelumnya. Video ini paling sering dilihat di file attrs.xml library.

Catatan: Nama atribut dari Support Library tidak menggunakan awalan android:. Itu hanya digunakan untuk atribut dari framework Android.

Ada juga berbagai tema yang tersedia dari {i>Support Library<i} yang mungkin Anda ingin perluas alih-alih yang ditunjukkan dalam contoh sebelumnya. Tempat terbaik untuk melihat tema yang tersedia adalah tindakan file themes.xml library.

Menambahkan gaya khusus versi

Jika versi baru Android menambahkan atribut tema yang ingin digunakan, Anda dapat menambahkannya ke tema Anda sementara tetap kompatibel dengan versi lama. Yang Anda butuhkan hanyalah file styles.xml lain disimpan di direktori values yang menyertakan versi resource penentu:

res/values/styles.xml        # themes for all versions
res/values-v21/styles.xml    # themes for API level 21+ only

Karena gaya dalam file values/styles.xml tersedia untuk semua versi, tema Anda di values-v21/styles.xml dapat mewarisinya. Ini berarti bahwa Anda dapat menghindari menduplikasi gaya dengan diawali dengan "base" dan memperluasnya ke tema khusus versi gaya.

Misalnya, untuk mendeklarasikan transisi jendela untuk Android 5.0 (API level 21) dan yang lebih tinggi, Anda harus menggunakan atribut baru. Jadi, tema dasar Anda di res/values/styles.xml dapat 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>

Kemudian, 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 mengetahui informasi selengkapnya tentang penggunaan resource alternatif untuk perangkat yang berbeda, lihat Menyediakan resource alternatif.

Menyesuaikan gaya widget

Setiap widget dalam framework dan Support Library memiliki gaya default. Misalnya, ketika Anda memberi gaya aplikasi Anda menggunakan tema dari Library Dukungan, sebuah instance Button ditata gayanya menggunakan Gaya Widget.AppCompat.Button. Jika Anda ingin menerapkan gaya widget yang berbeda ke , Anda dapat melakukannya dengan atribut style di file tata letak. Misalnya, berikut ini menerapkan gaya tombol tanpa bingkai library:

<Button
    style="@style/Widget.AppCompat.Button.Borderless"
    ... />

Jika Anda ingin menerapkan gaya ini ke semua tombol, Anda bisa mendeklarasikannya dalam atribut buttonStyle 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 terapkan gaya widget khusus Anda dalam tata letak atau tema.

Referensi lainnya

Untuk mempelajari tema dan gaya lebih lanjut, lihat referensi tambahan berikut:

Postingan blog

• Gaya visual Android: tema vs gaya
• Gaya visual Android: atribut tema umum
• Gaya visual Android: memilih atribut tema