Google berkomitmen untuk mendorong terwujudnya keadilan ras bagi komunitas Kulit Hitam. Lihat caranya.

Mendesain tema aplikasi dengan Theme Editor

Peringatan: Mulai versi 3.3, Theme Editor tidak lagi disertakan dalam Android Studio.

Android Studio menyertakan asisten visual bernama Theme Editor yang membantu Anda:

  • Membuat dan mengubah tema aplikasi Anda.
  • Menyesuaikan tema untuk pengklasifikasi resource berbeda.
  • Memvisualisasikan efek perubahan warna pada elemen UI umum.

Halaman ini memperkenalkan tugas-tugas mendasar yang dapat Anda lakukan dengan Theme Editor, dan menjelaskan cara melakukannya.

Dasar-dasar Theme Editor

Bagian ini menjelaskan cara mengakses Theme Editor dan tata letaknya.

Mengakses Theme Editor

Ada dua cara untuk membuka Theme Editor:

  • Dari file XML terbuka seperti styles.xml, klik Open editor di dekat bagian kanan atas jendela file.
  • Dari menu Tools, pilih Theme Editor.

Menavigasi Theme Editor

Layar utama Theme Editor dibagi menjadi dua bagian. Sisi kiri editor menampilkan tampilan elemen UI khusus, seperti panel aplikasi atau tombol timbul, saat Anda menerapkan tema saat ini ke elemen tersebut. Sisi kanan editor menampilkan nama tema yang saat ini dipratinjau, modul tempat menentukan tema dan setelan resource tema, seperti Theme parent dan colorPrimary. Anda dapat memodifikasi tema desain dengan mengubah setelan resource ini.

Tema dan warna

Theme Editor memungkinkan Anda membuat tema baru, mengubah tema yang ada, dan mengelola warna yang membentuk tema tersebut.

Membuat tema baru

Untuk membuat tema, ikuti langkah-langkah berikut:

  1. Buka menu drop-down Theme di dekat bagian atas sisi kanan Theme Editor.
  2. Klik Create New Theme.
  3. Dalam dialog New Theme, masukkan nama untuk tema baru.
  4. Dalam daftar Parent theme name, klik pada induk yang resource awalnya diwarisi oleh tema tersebut.

Mengganti nama tema

Untuk mengganti nama tema, lakukan langkah-langkah berikut:

  1. Buka menu drop-down Theme di dekat bagian atas sisi kanan Theme Editor.
  2. Klik Rename theme-name.
  3. Dalam dialog Rename, masukkan nama baru untuk tema tersebut.
  4. (opsional) Untuk melihat bagaimana perubahan penampilannya, klik Preview.
  5. Untuk menerapkan perubahan, klik Refactor.

Mengubah resource warna

Untuk mengubah resource warna yang ada, misalnya colorPrimary, ikuti langkah-langkah berikut:

  1. Di Theme Editor, klik persegi berwarna di samping nama resource yang ingin Anda ubah. Dialog Resources yang menampilkan daftar warna di sisi kiri, dan setelan serta informasi untuk warna resource yang dipilih saat ini di sisi kanan.
  2. Tetapkan warna untuk resource tema dengan memilih warna dari panel kiri, atau dengan menentukan warna baru, seperti dijelaskan di bawah.

Memilih warna

Warna dicantumkan di kolom kiri dialog Resources dan disusun ke dalam grup berikut.

  • Project: Ini adalah warna di dalam project Anda. Beberapa warna dapat diedit karena termasuk bagian dari sumber project Anda, dan beberapa lainnya tidak dapat diedit karena termasuk bagian dari library yang telah Anda sertakan dalam project.
  • android: Ini adalah resource warna yang termasuk dalam namespace android. Warna tersebut adalah bagian dari framework Android dan tidak dapat diedit.
  • Theme Attributes: Ini adalah atribut dari tema yang saat ini dipilih. Atribut tersebut direferensikan oleh tema dan dapat diubah tergantung tema yang telah dipilih. Atribut tema tidak pernah dapat diedit dari dalam dialog Resources.

Menentukan warna baru

    Gambar 1. Editor warna

  1. Dari menu drop-down di kanan atas dialog Resources, klik Add new resource > New color Value. Dialog Resource menampilkan panel kanan yang dapat diedit dengan kolom Name kosong, sehingga Anda dapat memasukkan nama untuk warna kustom.
  2. Buat warna kustom dengan cara sebagai berikut. Langkah-langkah ini sesuai dengan info pada gambar 1.
    1. Ketik nama untuk nilai warna baru Anda di kolom Name kosong. Jangan gunakan spasi atau karakter khusus dalam nama. Garis bawah dan angka boleh digunakan.
    2. Skala warna, kolom Custom color, dan dropper:
      • Pada skala warna, klik warna yang Anda inginkan. Warna ditampilkan di kolom Custom color.
      • Anda dapat menggunakan dropper di sebelah kiri kolom Custom color untuk memilih warna. Klik dropper , lalu klik sesuatu yang terlihat di mana saja di layar komputer Anda. Warna di kolom Custom color akan berubah sesuai warna yang dipilih.
    3. Tepat di bawah kolom Custom color, gunakan kolom yang dapat diedit dan menu drop-down di sebelah kiri untuk menentukan warna RGB, HSB, atau ARGB dengan nilai numerik. HEX yang setara dengan warna Anda ditampilkan dalam kolom yang dapat diedit hingga yang paling kanan.
    4. Untuk menyetel opasitas warna dan rona, gerakkan penggeser di bawah skala warna.
    5. Pilih salah satu kotak warna standar yang tersedia. Warna ditampilkan di kolom Custom Color dan namanya akan berubah sesuai dengan nama warna yang Anda pilih.
  3. Klik OK untuk menyimpan setelan Anda. Dialog Resources akan menutup dan mengembalikan Anda ke Theme Editor.

Mengubah warna

Anda dapat mengubah warna yang dapat diedit. Jika warna dapat diedit, Anda akan melihat kolom warna, rona, opasitas, nama, dan kolom konfigurasi ponsel yang dapat diedit. Lihat Select Color jika Anda ingin mengetahui mengapa beberapa kolom dapat diedit dan beberapa lainnya tidak.

  1. Sesuaikan setelan.
  2. Klik OK.

Mencocokkan warna material

Jika sudah menentukan atau mengubah warna project kustom, Anda dapat memastikan bahwa warna tersebut cocok dengan material palette color terdekat dengan mengklik CLOSEST MATERIAL COLOR, yang terletak di samping Custom color. Android Studio mengubah nilai warna dan opasitas warna yang Anda pilih ke warna material yang paling mirip, dan mengganti Custom color dengan nama warna dari palet material.

Catatan: Fitur CLOSEST MATERIAL COLOR hanya akan terlihat jika warna itu belum menjadi warna material.

Melihat warna dan daftar status

Theme Editor memungkinkan Anda menampilkan pratinjau warna yang dikaitkan dengan beragam status. Caranya, buka dialog Resources dengan mengklik kotak rangkaian warna di sebelah nama resource daftar status yang dapat diedit. Dialog Resources menampilkan daftar status, misalnya Selected, dan nilai warna yang terkait dengan status tersebut. Klik warna status untuk memilih nilai warna yang berbeda.

Untuk mengontrol sepenuhnya status tersebut, Anda dapat menampilkan dan mengedit propertinya secara langsung dalam file XML yang menentukannya. Untuk informasi selengkapnya, lihat dokumentasi untuk class ColorStateList.

Konfigurasi khusus perangkat

Jika warna dapat diedit, Anda dapat memilih konfigurasi khusus perangkat untuk didukung oleh aplikasi Anda. Caranya, lakukan langkah-langkah berikut:

  1. Buka dialog Resources. Untuk informasi tentang cara membuka dialog Resources, lihat Mengubah resource warna.
  2. Pilih warna Project, lalu di bagian bawah panel kanan, klik untuk memperluas Konfigurasi Ponsel, sehingga menampilkan set sumber dan nama file XML yang berisi resource, serta daftar direktori khusus konfigurasi untuk menempatkan file tersebut.
  3. Jika perlu, ubah nama file XML.
  4. Centang kotak di sebelah direktori yang terkait dengan konfigurasi khusus perangkat yang ingin Anda dukung. Semua konfigurasi yang tidak Anda tetapkan direktorinya secara default akan menggunakan direktori values.

Untuk informasi selengkapnya mengenai hubungan antara nama direktori dan konfigurasi, lihat Mendukung Beberapa Layar. Untuk informasi selengkapnya mengenai nama direktori yang didukung, lihat Menyediakan Resource.