Gaya dan Tema

Sebuah gaya adalah kumpulan properti yang menetapkan penampilan dan format untuk View atau jendela. Gaya bisa menetapkan properti seperti tinggi, pengisi, warna font, ukuran font, warna latar belakang, dan banyak lagi yang lainnya. Gaya didefinisikan dalam sumber daya XML yang terpisah dari XML yang menetapkan layout.

Gaya-gaya di Android berbagi filosofi serupa pada stylesheet berjenjang dalam desain web—semua itu memungkinkan Anda memisahkan desain dari materi.

Misalnya, dengan menggunakan sebuah gaya, Anda bisa mengambil XML layout ini:

<TextView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:textColor="#00FF00"
    android:typeface="monospace"
    android:text="@string/hello" />

Dan mengubahnya menjadi ini:

<TextView
    style="@style/CodeFont"
    android:text="@string/hello" />

Semua atribut menyangkut gaya telah dibuang dari XML layout dan dimasukkan ke dalam definisi gaya yang disebut CodeFont, yang kemudian diterapkan dengan atribut style. Anda akan melihat definisi untuk gaya ini di bagian berikut.

Sebuah tema adalah gaya yang diterapkan pada keseluruhan Activity atau aplikasi, bukannya View individual (seperti dalam contoh di atas). Bila sebuah gaya diterapkan sebagai teman, setiap Tampilan dalam Aktivitas atau aplikasi akan menerapkan setiap properti gaya yang didukungnya. Misalnya, Anda bisa menerapkan gaya CodeFont yang sama seperti tema untuk Aktivitas kemudian semua teks di dalam Aktivitas akan memiliki font monospace berwarna hijau.

Mendefinisikan Gaya

Untuk membuat satu set gaya, simpan file XML dalam direktori res/values/ proyek Anda. Nama file XML bebas, namun harus menggunakan ekstensi .xml dan disimpan di folder res/values/.

Simpul akar file XML harus <resources>.

Untuk setiap gaya yang ingin Anda buat, tambahkan sebuah elemen <style> ke file bersama name yang secara unik mengidentifikasi gaya (atribut ini harus ada). Kemudian tambahkan elemen <item> untuk setiap properti gaya itu, dengan name yang mendeklarasikan properti gaya dan nilai bersamanya (atribut ini harus ada). Nilai untuk <item> bisa berupa string kata kunci, warna heksadesimal, referensi ke tipe sumber daya lain, atau nilai lainnya bergantung pada properti gaya. Inilah file contoh dengan gaya tunggal:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="CodeFont" parent="@android:style/TextAppearance.Medium">
        <item name="android:layout_width">fill_parent</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:textColor">#00FF00</item>
        <item name="android:typeface">monospace</item>
    </style>
</resources>

Setiap anak elemen <resources> dikonversi menjadi objek sumber daya aplikasi pada waktu kompilasi, yang bisa direferensikan oleh nilai dalam elemen <style> di atribut name-nya. Gaya contoh ini bisa direferensikan dari layout XML sebagai @style/CodeFont (seperti yang diperagakan dalam pengantar di atas).

Atribut parent dalam elemen <style> bersifat opsional dan menetapkan ID sumber daya gaya lain yang propertinya akan diwarisi oleh gaya ini. Anda nanti bisa mengganti properti gaya yang diwarisi jika diinginkan.

Ingat, gaya yang ingin Anda gunakan sebagai tema Aktivitas atau aplikasi didefinisikan dalam XML persis sama dengan gaya untuk Tampilan. Sebuah gaya seperti gaya yang didefinisikan di atas bisa diterapkan sebagai gaya untuk Tampilan tunggal atau sebagai tema untuk keseluruhan Aktivitas atau aplikasi. Cara menerapkan gaya untuk Tampilan tunggal atau sebagai tema aplikasi akan dibahas nanti.

Pewarisan

Atribut parent dalam elemen <style> memungkinkan Anda menetapkan gaya yang akan mewariskan propertinya ke gaya Anda. Anda bisa menggunakannya untuk mewarisi properti dari gaya yang sudah ada kemudian hanya mendefinisikan properti yang ingin yang ingin Anda ubah atau tambahkan. Anda bisa mewarisi dari gaya yang telah Anda buat sendiri atau dari gaya yang ditanamkan ke dalam platform. (Lihat Menggunakan Gaya dan Tema Platform, di bawah ini, untuk informasi tentang mewarisi dari gaya yang didefinisikan oleh platform Android.) Misalnya, Anda bisa mewarisi penampilan teks default platform Android kemudian memodifikasinya:

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

Jika Anda ingin mewarisi dari gaya yang didefinisikan sendiri, Anda tidak harus menggunakan atribut parent. Sebagai gantinya, cukup jadikan nama gaya yang ingin Anda warisi sebagai awalan pada nama gaya baru, yang dipisah dengan tanda titik. Misalnya, untuk membuat gaya baru yang mewarisi gaya CodeFont yang didefinisikan di atas, namun membuat warna merah, Anda bisa menulis gaya baru seperti ini:

    <style name="CodeFont.Red">
        <item name="android:textColor">#FF0000</item>
    </style>

Perhatikan, tidak ada atribut parent dalam tag <style>, namun karena atribut name diawali dengan nama gaya CodeFont (yakni gaya yang telah Anda buat), gaya ini akan mewarisi semua properti gaya dari gaya itu. Gaya ini nanti akan menggantikan properti android:textColor untuk membuat teks jadi merah. Anda bisa mereferensikan gaya baru ini sebagai @style/CodeFont.Red.

Anda bisa melanjutkan mewarisi seperti ini sesering yang Anda suka, dengan merangkai nama dengan tanda titik. Misalnya, Anda bisa memperluas CodeFont.Red agar menjadi lebih besar, dengan:

    <style name="CodeFont.Red.Big">
        <item name="android:textSize">30sp</item>
    </style>

Ini akan mewarisi dari gaya CodeFont dan CodeFont.Red, kemudian menambahkan properti android:textSize.

Catatan: Teknik pewarisan melalui perangkaian nama ini hanya bisa digunakan untuk gaya yang didefinisikan oleh sumber daya Anda sendiri. Anda tidak bisa mewarisi gaya bawaan Android dengan cara ini. Untuk mereferensikan gaya bawaan, seperti TextAppearance, Anda harus menggunakan atribut parent.

Properti Gaya

Karena kini Anda sudah memahami bagaimana mendefinisikan gaya, Anda perlu mengetahui properti gaya—macam apa yang didefinisikan oleh elemen <item> yang—tersedia. Barangkali Anda sudah familier dengan sebagian darinya, misalnya layout_width dan textColor. Tentu saja, ada beberapa properti gaya lainnya yang bisa Anda gunakan.

Tempat terbaik untuk menemukan properti yang diterapkan pada View tertentu adalah referensi kelas yang bersangkutan, yang mencantumkan semua atribut XML yang didukung. Misalnya, semua atribut yang dicantumkan dalam tabel atribut TextView XML bisa digunakan dalam definisi gaya untuk elemen TextView (atau salah satu subkelasnya). Salah satu atribut yang dicantumkan dalam referensi adalah android:inputType, jadi di sini biasanya Anda dapat menempatkan atribut android:inputType dalam elemen <EditText>, seperti ini:

<EditText
    android:inputType="number"
    ... />

Sebagai gantinya Anda bisa membuat gaya untuk elemen EditText yang berisi properti ini:

<style name="Numbers">
  <item name="android:inputType">number</item>
  ...
</style>

Jadi XML Anda untuk layout kini bisa mengimplementasikan gaya ini:

<EditText
    style="@style/Numbers"
    ... />

Contoh sederhana ini mungkin kelihatannya lebih berhasil, namun bila Anda menambahkan lebih banyak properti gaya dan memperhitungkan kemampuan untuk menggunakan kembali gaya tersebut di berbagai tempat, akibatnya bisa sangat besar.

Untuk referensi mengenai semua properti gaya yang tersedia, lihat referensi R.attr. Ingatlah bahwa semua objek Tampilan tidak menerima semua atribut gaya yang sama, jadi Anda biasanya harus merujuk ke kelas View tertentu untuk properti gaya yang didukung. Akan tetapi, jika Anda menerapkan gaya ke Tampilan yang tidak mendukung semua properti gaya, Tampilan tersebut hanya akan menerapkan properti yang didukung dan mengabaikan begitu saja yang lainnya.

Sebagian properti gaya ada yang tidak didukung oleh elemen Tampilan dan hanya bisa diterapkan sebagai tema. Properti gaya ini diterapkan pada keseluruhan jendela dan bukan pada tipe Tampilan. Misalnya, properti gaya untuk tema bisa menyembunyikan judul aplikasi, menyembunyikan bilah status, atau mengubah latar belakang jendela. Jenis properti gaya ini tidak dimiliki objek Tampilan apa pun. Untuk menemukan properti gaya hanya-tema ini, lihat referensi R.attr untuk atribut yang diawali dengan window. Sebagai contoh, windowNoTitle dan windowBackground adalah properti gaya yang hanya efektif bila gaya diterapkan sebagai tema pada Aktivitas atau aplikasi. Lihat bagian berikutnya untuk informasi tentang menerapkan gaya sebagai tema.

Catatan: Jangan lupa nama properti di setiap elemen <item> dengan namespace android:. Misalnya: <item name="android:inputType">.

Menerapkan Gaya dan Tema pada UI

Ada dua cara untuk menyetel gaya:

• Pada Tampilan individual, dengan menambahkan atribut style ke elemen Tampilan di XML untuk layout Anda.
• Atau, pada keseluruhan Aktivitas atau aplikasi, dengan menambahkan atribut android:theme pada elemen <activity> atau <application> di manifes Android.

Bila Anda menerapkan gaya pada satu View dalam layout, properti yang didefinisikan oleh gaya hanya akan diterapkan pada View. Jika sebuah gaya diterapkan pada ViewGroup, elemen View anak tidak akan mewarisi properti gaya—hanya elemen tempat Anda menerapkan gaya secara langsung yang akan menerapkan propertinya. Akan tetapi, Anda bisa menerapkan gaya agar diterapkan pada semua elemen View—dengan menerapkan gaya sebagai tema.

Untuk menerapkan definisi gaya sebagai tema, Anda harus menerapkan gaya pada Activity atau aplikasi dalam manifes Android. Bila Anda melakukannya, setiap View dalam Aktivitas atau aplikasi akan menerapkan setiap properti yang didukungnya. Misalnya, jika Anda menerapkan gaya CodeFont dari contoh sebelumnya pada sebuah Aktivitas, maka semua elemen Tampilan yang mendukung properti gaya teks akan menerapkannya. Semua Tampilan yang tidak mendukung properti akan mengabaikannya. Jika Tampilan hanya mendukung sebagian properti, maka ia hanya akan menerapkan properti itu.

Menerapkan gaya pada Tampilan

Begini caranya menyetel gaya untuk Tampilan di layout XML:

<TextView
    style="@style/CodeFont"
    android:text="@string/hello" />

Kini TextView ini akan diberi gaya sebagaimana didefinisikan oleh gaya bernama CodeFont. (Lihat contoh di atas, dalam Mendefinisikan Gaya.)

Catatan: Atribut style tidak menggunakan awalan namespace android:.

Menerapkan tema pada Aktivitas atau aplikasi

Untuk menyetel tema bagi semua aktivitas aplikasi Anda, buka file AndroidManifest.xml dan edit tag <application> agar menyertakan atribut android:theme bersama nama gaya. Misalnya:

<application android:theme="@style/CustomTheme">

Jika Anda ingin sebuah tema hanya diterapkan pada satu Aktivitas dalam aplikasi Anda, maka tambahkan atribut android:theme pada tag <activity> sebagai gantinya.

Sebagaimana halnya Android menyediakan sumber daya bawaan lainnya, ada beberapa tema yang telah didefinisikan sebelumnya yang bisa Anda gunakan, daripada menulisnya sendiri. Misalnya, Anda bisa menggunakan tema Dialog dan membuat Aktivitas Anda tampak seperti kotak dialog:

<activity android:theme="@android:style/Theme.Dialog">

Atau jika Anda ingin latar belakang menjadi tembus pandang, gunakan tema Translucent:

<activity android:theme="@android:style/Theme.Translucent">

Jika Anda menyukai suatu tema, namun ingin mengutak-atiknya, tambahkan saja tema tersebut sebagai parent tema khusus Anda. Misalnya, Anda bisa memodifikasi tema ringan biasa untuk menggunakan warna sendiri seperti ini:

<color name="custom_theme_color">#b0b0ff</color>
<style name="CustomTheme" parent="android:Theme.Light">
    <item name="android:windowBackground">@color/custom_theme_color</item>
    <item name="android:colorBackground">@color/custom_theme_color</item>
</style>

(Perhatikan bahwa warna perlu dimasukkan sebagai sumber daya terpisah di sini karena atribut android:windowBackground hanya mendukung referensi ke sumber daya lain; tidak seperti android:colorBackground, atribut ini tidak bisa diberi literal warna.)

Kini gunakan CustomTheme sebagai ganti Theme.Light di dalam Android Manifest:

<activity android:theme="@style/CustomTheme">

Memilih tema berdasarkan versi platform

Android versi lebih baru memiliki tema tambahan yang tersedia untuk aplikasi, dan Anda mungkin ingin menggunakannya saat menjalankan pada platform itu sekaligus tetap kompatibel dengan versi yang lebih lama. Anda bisa melakukannya melalui tema khusus yang menggunakan pemilihan sumber daya untuk beralih di antara tema induk, berdasarkan versi platform.

Misalnya, inilah deklarasi untuk tema khusus yang merupakan tema ringan default platform standar. Tempatnya dalam file XML pada res/values (biasanya res/values/styles.xml):

<style name="LightThemeSelector" parent="android:Theme.Light">
    ...
</style>

Untuk mendapatkan tema ini, gunakan tema holografik yang lebih baru bila atau aplikasi dijalankan pada Android 3.0 (API Level 11) atau yang lebih tinggi, Anda bisa menempatkan deklarasi alternatif untuk tema tersebut dalam file XML di res/values-v11, namun buatlah tema induk menjadi tema holografik:

<style name="LightThemeSelector" parent="android:Theme.Holo.Light">
    ...
</style>

Kini gunakan tema ini seperti yang Anda inginkan, dan aplikasi Anda secara otomatis akan beralih ke tema holografik pada Android 3.0 atau yang lebih tinggi.

Daftar atribut standar yang bisa Anda gunakan dalam tema bisa ditemukan di R.styleable.Theme.

Untuk informasi selengkapnya tentang menyediakan sumber daya alternatif, misalnya tema dan layout, berdasarkan versi platform atau konfigurasi perangkat lainnya, lihat dokumen Menyediakan Sumber Daya.

Menggunakan Gaya dan Tema Platform

Platform Android menyediakan koleksi besar berisi gaya dan tema yang bisa Anda gunakan dalam aplikasi. Anda bisa menemukan referensi mengenai semua gaya yang tersedia dalam kelas R.style. Untuk menggunakan gaya yang tercantum di sini, ganti semua setrip bawah dalam nama gaya dengan tanda titik. Misalnya, Anda bisa menerapkan tema Theme_NoTitleBar dengan "@android:style/Theme.NoTitleBar".

Akan tetapi, referensi R.style tidak didokumentasikan dengan baik dan tidak tuntas menjelaskan gaya, jadi dengan melihat kode sumber sesungguhnya untuk gaya dan tema ini akan memberi Anda pemahaman lebih baik mengenai properti gaya apa saja yang disediakannya. Untuk mendapatkan referensi yang lebih baik bagi gaya dan tema Android, lihat kode sumber berikut:

• Gaya Android (styles.xml)
• Tema Android (themes.xml)

Semua file ini akan membantu Anda mempelajari melalui contoh. Sebagai contoh, dalam kode sumber tema Android, Anda akan menemukan deklarasi untuk <style name="Theme.Dialog">. Dalam definisi ini, Anda akan melihat semua properti yang digunakan untuk menata gaya dialog yang digunakan oleh kerangka kerja Android.

Untuk informasi selengkapnya tentang sintaks gaya dan tema di XML, lihat dokumen Sumber Daya Gaya.

Untuk referensi mengenai atribut gaya yang tersedia untuk Anda gunakan mendefinisikan gaya atau tema (mis., "windowBackground" atau "textAppearance"), lihat R.attr atau masing-masing kelas Tampilan yang akan Anda buatkan gayanya.