Bagikan melalui

Tema Material

  • Artikel

Tema Material adalah gaya antarmuka pengguna yang menentukan tampilan dan nuansa tampilan dan aktivitas yang dimulai dengan Android 5.0 (Lollipop). Tema Material dibangun ke dalam Android 5.0, sehingga digunakan oleh UI sistem serta oleh aplikasi. Tema Material bukan "tema" dalam arti opsi tampilan di seluruh sistem yang dapat dipilih pengguna secara dinamis dari menu pengaturan. Sebaliknya, Tema Material dapat dianggap sebagai sekumpulan gaya dasar bawaan terkait yang dapat Anda gunakan untuk menyesuaikan tampilan dan nuansa aplikasi Anda.

Android menyediakan tiga rasa Tema Material:

  • Theme.Material – Versi gelap dari Tema Material; ini adalah rasa default di Android 5.0.

  • Theme.Material.Light – Versi ringan Tema Material.

  • Theme.Material.Light.DarkActionBar – Versi terang Tema Material, tetapi dengan bilah tindakan gelap.

Contoh rasa Tema Bahan ini ditampilkan di sini:

Contoh cuplikan layar tema Gelap, tema Terang, dan Tema Bilah Tindakan Gelap

Anda dapat memperoleh dari Tema Material untuk membuat tema Anda sendiri, mengambil alih beberapa atau semua atribut warna. Misalnya, Anda dapat membuat tema yang berasal dari Theme.Material.Light, tetapi mengambil alih warna bilah aplikasi agar sesuai dengan warna merek Anda. Anda juga dapat menata tampilan individual; misalnya, Anda dapat membuat gaya untuk CardView yang memiliki sudut yang lebih bulat dan menggunakan warna latar belakang yang lebih gelap.

Anda dapat menggunakan satu tema untuk seluruh aplikasi, atau Anda dapat menggunakan tema yang berbeda untuk layar (aktivitas) yang berbeda di aplikasi. Dalam cuplikan layar di atas, misalnya, satu aplikasi menggunakan tema yang berbeda untuk setiap aktivitas untuk menunjukkan skema warna bawaan. Tombol radio mengalihkan aplikasi ke aktivitas yang berbeda, dan, sebagai hasilnya, menampilkan tema yang berbeda.

Karena Tema Material hanya didukung di Android 5.0 dan yang lebih baru, Anda tidak dapat menggunakannya (atau tema kustom yang berasal dari Tema Materi) ke tema aplikasi Anda untuk berjalan di versi Android yang lebih lama. Namun, Anda dapat mengonfigurasi aplikasi untuk menggunakan Tema Material di perangkat Android 5.0 dan dengan anggun kembali ke tema sebelumnya saat berjalan pada versi Android yang lebih lama (lihat bagian Kompatibilitas di artikel ini untuk detailnya).

Persyaratan

Berikut ini diperlukan untuk menggunakan fitur Tema Material Android 5.0 baru di aplikasi berbasis Xamarin:

  • Xamarin.Android – Xamarin.Android 4.20 atau yang lebih baru harus diinstal dan dikonfigurasi dengan Visual Studio atau Visual Studio untuk Mac.

  • Android SDK – Android 5.0 (API 21) atau yang lebih baru harus diinstal melalui Android SDK Manager.

  • Java JDK 1.8 – JDK 1.7 dapat digunakan jika Anda secara khusus menargetkan API level 23 dan yang lebih lama. JDK 1.8 tersedia dari Oracle.

Untuk mempelajari cara mengonfigurasi proyek aplikasi Android 5.0, lihat Menyiapkan Proyek Android 5.0.

Menggunakan Tema Bawaan

Cara term mudah untuk menggunakan Tema Material adalah dengan mengonfigurasi aplikasi Anda untuk menggunakan tema bawaan tanpa penyesuaian. Jika Anda tidak ingin mengonfigurasi tema secara eksplisit, aplikasi Anda akan default ke Theme.Material (tema gelap). Jika aplikasi Hanya memiliki satu aktivitas, Anda dapat mengonfigurasi tema di tingkat aktivitas. Jika aplikasi Anda memiliki beberapa aktivitas, Anda dapat mengonfigurasi tema di tingkat aplikasi sehingga menggunakan tema yang sama di semua aktivitas, atau Anda dapat menetapkan tema yang berbeda ke aktivitas yang berbeda. Bagian berikut menjelaskan cara mengonfigurasi tema di tingkat aplikasi dan di tingkat aktivitas.

Membuat Tema Aplikasi

Untuk mengonfigurasi seluruh aplikasi untuk menggunakan flavor Material Theme, atur android:theme atribut node aplikasi di AndroidManifest.xml ke salah satu hal berikut:

  • @android:style/Theme.Material - Tema gelap.

  • @android:style/Theme.Material.Light – Tema terang.

  • @android:style/Theme.Material.Light.DarkActionBar – Tema terang dengan bilah tindakan gelap.

Contoh berikut mengonfigurasi aplikasi MyApp untuk menggunakan tema cahaya:

<application android:label="MyApp" 
             android:theme="@android:style/Theme.Material.Light">
</application>

Secara bergantian, Anda dapat mengatur atribut aplikasi Theme di AssemblyInfo.cs (atau Properties.cs). Contohnya:

[assembly: Application(Theme="@android:style/Theme.Material.Light")]

Ketika tema aplikasi diatur ke @android:style/Theme.Material.Light, setiap aktivitas di MyApp akan ditampilkan menggunakan Theme.Material.Light.

Membuat Tema Aktivitas

Untuk tema aktivitas, Anda menambahkan Theme pengaturan ke [Activity] atribut di atas deklarasi aktivitas Anda dan menetapkan Theme ke rasa Tema Materi yang ingin Anda gunakan. Contoh berikut tema aktivitas dengan Theme.Material.Light:

[Activity(Theme = "@android:style/Theme.Material.Light",
          Label = "MyApp", MainLauncher = true, Icon = "@drawable/icon")]

Aktivitas lain dalam aplikasi ini akan menggunakan skema warna gelap default Theme.Material (atau, jika dikonfigurasi, pengaturan tema aplikasi).

Menggunakan Tema Kustom

Anda dapat meningkatkan merek Anda dengan membuat tema kustom yang menata aplikasi Anda dengan warna merek Anda. Untuk membuat tema kustom, Anda menentukan gaya baru yang berasal dari rasa Tema Bahan bawaan, mengganti atribut warna yang ingin Anda ubah. Misalnya, Anda dapat menentukan tema kustom yang berasal dari Theme.Material.Light.DarkActionBar dan mengubah warna latar belakang layar menjadi krege alih-alih putih.

Tema Material mengekspos atribut tata letak berikut untuk kustomisasi:

  • colorPrimary – Warna bilah aplikasi.

  • colorPrimaryDark – Warna bilah status dan bilah aplikasi kontekstual; ini biasanya merupakan versi gelap dari colorPrimary.

  • colorAccent – Warna kontrol UI seperti kotak centang, tombol radio, dan kotak teks edit.

  • windowBackground – Warna latar belakang layar.

  • textColorPrimary – Warna teks UI di bilah aplikasi.

  • statusBarColor – Warna bilah status.

  • navigationBarColor – Warna bilah navigasi.

Area layar ini diberi label dalam diagram berikut:

Diagram atribut dan area layar terkait

Secara default, statusBarColor diatur ke nilai colorPrimaryDark. Anda dapat mengatur statusBarColor ke warna solid, atau Anda dapat mengaturnya ke @android:color/transparent untuk membuat bilah status transparan. Bilah navigasi juga dapat dibuat transparan dengan mengatur navigationBarColor ke @android:color/transparent.

Membuat Tema Aplikasi Kustom

Anda dapat membuat tema aplikasi kustom dengan membuat dan memodifikasi file di folder Sumber Daya proyek aplikasi Anda. Untuk menata aplikasi Anda dengan tema kustom, gunakan langkah-langkah berikut:

  • Buat file colors.xml di Sumber Daya/nilai — Anda menggunakan file ini untuk menentukan warna tema kustom Anda. Misalnya, Anda dapat menempelkan kode berikut ke colors.xml untuk membantu Anda memulai:
<?xml version="1.0" encoding="UTF-8" ?>
<resources>
    <color name="my_blue">#3498DB</color>
    <color name="my_green">#77D065</color>
    <color name="my_purple">#B455B6</color>
    <color name="my_gray">#738182</color>
</resources>

  • Ubah file contoh ini untuk menentukan nama dan kode warna untuk sumber daya warna yang akan Anda gunakan dalam tema kustom Anda.

  • Buat folder Resources/values-v21 . Di folder ini, buat file styles.xml :

    Lokasi styles.xml di folder Sumber Daya/values-21.xml

    Perhatikan bahwa Resources/values-v21 khusus untuk Android 5.0 – versi Android yang lebih lama tidak akan membaca file di folder ini.

  • Tambahkan simpul resources untuk styles.xml dan tentukan simpul style dengan nama tema kustom Anda. Misalnya, berikut adalah file styles.xml yang mendefinisikan MyCustomTheme (berasal dari gaya tema bawaan Theme.Material.Light ):

<?xml version="1.0" encoding="UTF-8" ?>
<resources>
    <!-- Inherit from the light Material Theme -->
    <style name="MyCustomTheme" parent="android:Theme.Material.Light">
        <!-- Customizations go here -->
    </style>
</resources>

  • Pada titik ini, aplikasi yang menggunakan MyCustomTheme akan menampilkan tema stok Theme.Material.Light tanpa penyesuaian:

    Tampilan tema kustom sebelum kustomisasi

  • Tambahkan kustomisasi warna ke styles.xml dengan menentukan warna atribut tata letak yang ingin Anda ubah. Misalnya, untuk mengubah warna bilah aplikasi menjadi my_blue dan mengubah warna kontrol UI menjadi my_purple, tambahkan penimpaan warna ke styles.xml yang merujuk ke sumber daya warna yang dikonfigurasi dalam colors.xml:

<?xml version="1.0" encoding="UTF-8" ?>
<resources>
    <!-- Inherit from the light Material Theme -->
    <style name="MyCustomTheme" parent="android:Theme.Material.Light">
        <!-- Override the app bar color -->
        <item name="android:colorPrimary">@color/my_blue</item>
        <!-- Override the color of UI controls -->
        <item name="android:colorAccent">@color/my_purple</item>
    </style>
</resources>

Dengan perubahan ini di tempat, aplikasi yang menggunakan MyCustomTheme akan menampilkan warna bilah aplikasi di my_blue dan kontrol UI di , tetapi menggunakan Theme.Material.Light skema warna di my_purpletempat lain:

Tampilan tema kustom setelah kustomisasi

Dalam contoh ini, MyCustomTheme meminjam warna dari Theme.Material.Light untuk warna latar belakang, bilah status, dan warna teks, tetapi mengubah warna bilah aplikasi menjadi my_blue dan mengatur warna tombol radio menjadi my_purple.

Membuat Gaya Tampilan Kustom

Android 5.0 juga memungkinkan Anda untuk menata tampilan individual. Setelah membuat colors.xml dan styles.xml (seperti yang dijelaskan di bagian sebelumnya), Anda bisa menambahkan gaya tampilan ke styles.xml. Untuk menata tampilan individual, gunakan langkah-langkah berikut:

  • Edit Sumber Daya/nilai-v21/styles.xml dan tambahkan simpul style dengan nama gaya tampilan kustom Anda. Atur atribut warna kustom untuk tampilan Anda dalam simpul ini style . Misalnya, untuk membuat gaya CardView kustom yang memiliki lebih banyak sudut bulat dan digunakan my_blue sebagai warna latar belakang kartu, tambahkan node style ke styles.xml (di dalam resources simpul) dan konfigurasikan warna latar belakang dan radius sudut:
<!-- Theme an individual view: -->
<style name="CardView.MyBlue">

    <!-- Change the background color to Xamarin blue: -->
    <item name="cardBackgroundColor">@color/my_blue</item>

    <!-- Make the corners very round: -->
    <item name="cardCornerRadius">18dp</item>
</style>
  • Di tata letak Anda, atur atribut untuk tampilan tersebut style agar sesuai dengan nama gaya kustom yang Anda pilih di langkah sebelumnya. Contohnya:
<android.support.v7.widget.CardView
    style="@style/CardView.MyBlue"
    android:layout_width="200dp"
    android:layout_height="100dp"
    android:layout_gravity="center_horizontal">

Cuplikan layar berikut memberikan contoh default CardView (ditampilkan di sebelah kiri) dibandingkan dengan CardView yang telah ditata dengan tema kustom CardView.MyBlue (ditampilkan di sebelah kanan):

Contoh CardView default dan Custom CardView

Dalam contoh ini, kustom CardView ditampilkan dengan warna my_blue latar belakang dan radius sudut 18dp.

Kompatibilitas

Untuk menata aplikasi Anda sehingga menggunakan Tema Material di Android 5.0 tetapi secara otomatis kembali ke gaya yang kompatibel ke bawah pada versi Android yang lebih lama, gunakan langkah-langkah berikut:

  • Tentukan tema kustom dalam Resources/values-v21/styles.xml yang berasal dari gaya Material Theme. Contohnya:
<resources>
    <style name="MyCustomTheme" parent="android:Theme.Material.Light">
        <!-- Your customizations go here -->
    </style>
</resources>
  • Tentukan tema kustom di Sumber Daya/nilai/styles.xml yang berasal dari tema yang lebih lama, tetapi menggunakan nama tema yang sama seperti di atas. Contohnya:
<resources>
    <style name="MyCustomTheme" parent="android:Theme.Holo.Light">
        <!-- Your customizations go here -->
    </style>
</resources>
  • Di AndroidManifest.xml, konfigurasikan aplikasi Anda dengan nama tema kustom. Contohnya:
<application android:label="MyApp" 
             android:theme="@style/MyCustomTheme">
</application>
  • Secara bergantian, Anda dapat menata aktivitas tertentu menggunakan tema kustom Anda:
[Activity(Label = "MyActivity", Theme = "@style/MyCustomTheme")]

Jika tema Anda menggunakan warna yang ditentukan dalam file colors.xml , pastikan untuk menempatkan file ini di Sumber Daya/nilai (bukan Sumber Daya/nilai-v21) sehingga kedua versi tema kustom Anda dapat mengakses definisi warna Anda.

Saat aplikasi Anda berjalan di perangkat Android 5.0, aplikasi akan menggunakan definisi tema yang ditentukan dalam Resources/values-v21/styles.xml. Ketika aplikasi ini berjalan pada perangkat Android yang lebih lama, aplikasi akan secara otomatis kembali ke definisi tema yang ditentukan dalam Sumber Daya/nilai/styles.xml.

Untuk informasi selengkapnya tentang kompatibilitas tema dengan versi Android yang lebih lama, lihat Sumber Daya Alternatif.

Ringkasan

Artikel ini memperkenalkan gaya antarmuka pengguna Material Theme baru yang disertakan dalam Android 5.0 (Lollipop). Ini menjelaskan tiga rasa Tema Bahan bawaan yang dapat Anda gunakan untuk menata aplikasi Anda, menjelaskan cara membuat tema kustom untuk mencitrakan aplikasi Anda, dan memberikan contoh cara membuat tema tampilan individual. Terakhir, artikel ini menjelaskan cara menggunakan Tema Material di aplikasi Anda sambil mempertahankan kompatibilitas ke bawah dengan versi Android yang lebih lama.