Skip to content

Most visited

Recently visited

navigation

Desain Tema Aplikasi dengan Theme Editor

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

  • Membuat dan memodifikasi tema aplikasi Anda.
  • Menyesuaikan tema untuk pengklasifikasi berbagai sumber daya.
  • Memvisualisasikan efek perubahan warna pada elemen UI biasa.
  • Laman ini memperkenalkan tugas-tugas mendasar yang bisa Anda lakukan dengan Theme Editor, dan menjelaskan cara melakukannya.

    Dasar-Dasar Theme Editor

    Bagian ini menjelaskan cara mengakses Theme Editor dan layoutnya.

    Mengakses Theme Editor

    Ada dua cara untuk membuka Theme Editor:

  • Dari file XML gaya yang dibuka, misalnya styles.xml, klik Open editor di dekat bagian kanan atas jendela file.
  • Dari menu Tools, klik Android > Theme Editor.

    Menjelajahi Theme Editor

    Layar utama Theme Editor dibagi ke dalam dua bagian. Sisi kiri editor menampilkan seperti apa tampilan elemen UI khusus, seperti bilah aplikasi atau tombol timbul, bila Anda menerapkan tema saat ini ke elemen tersebut. Sisi kanan editor menampilkan nama tema yang saat ini dipratinjau, modul tempat mendefinisikan tema, dan setelan sumber daya tema, misalnya Theme parent dan colorPrimary. Anda bisa memodifikasi tema desain dengan mengubah setelan sumber daya ini.

    Tema dan Warna

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

    Membuat Tema Baru

    Untuk membuat tema, ikuti langkah-langkah ini:

    1. Buka menu tarik-turun 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 sumber daya awalnya akan diwarisi oleh tema tersebut.

    Mengganti Nama Tema

    Untuk mengganti nama tema, lakukan langkah-langkah berikut:

    1. Buka menu tarik-turun 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 Sumber Daya Warna

    Untuk mengubah sumber daya warna yang ada, misalnya colorPrimary, ikuti langkah-langkah ini:

    1. Klik kotak berwarna di sebelah nama sumber daya yang ingin Anda ubah. Dialog Resources akan muncul, yang menampilkan daftar warna di sisi kiri, dan setelan serta informasi untuk warna sumber daya yang dipilih saat ini di sisi kanan.
    2. Setel warna untuk sumber daya tema dengan melakukan salah satu langkah berikut:
      • Pilih warna palet material dari daftar warna.
      • Pilih sebuah warna yang didefinisikan dalam proyek Anda dari daftar warna, dan opsional, ubahlah nilai warna, opasitas, dan nama sebagaimana diinginkan.
      • Definisikan warna baru di proyek dengan mengeklik New Resource > New color Value dari menu tarik-turun di bagian kiri bawah dialog Resources, dan tetapkan nilai warna, opasitas, dan nama.
    3. Jika telah membuat atau memodifikasi warna proyek khusus, Anda bisa memastikan apakah warna tersebut cocok dengan warna palet material terdekat dengan mengeklik CLOSEST MATERIAL COLOR, yang terletak di sebelah 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.

    Menampilkan Daftar Status dan Warna

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

    Untuk mengontrol sepenuhnya status itu sendiri, Anda bisa menampilkannya secara langsung dan mengedit propertinya dalam file XML yang mendefinisikannya. Untuk informasi selengkapnya, lihat dokumentasi untuk kelas ColorStateList.

    Konfigurasi Spesifik Perangkat

    Anda bisa memilih konfigurasi spesifik-perangkat untuk didukung aplikasi. Caranya, lakukan langkah-langkah berikut:

    1. Klik segitiga di sebelah Device Configuration, dekat bagian bawah dialog Resources. Bagian Device Configuration akan meluas, sehingga menampilkan rangkaian sumber dan nama file XML yang berisi sumber daya, serta daftar direktori spesifik-konfigurasi yang menjadi tempat meletakkan file.
    2. Jika perlu, ubah nama file XML.
    3. Centang kotak di sebelah direktori yang sesuai dengan konfigurasi spesifik-perangkat yang ingin Anda dukung. Konfigurasi yang tidak Anda tetapkan direktorinya, secara default akan menggunakan direktori values.

    Untuk informasi selengkapnya tentang hubungan antara nama direktori dan konfigurasi, lihat Mendukung Beberapa Layar. Untuk informasi selengkapnya tentang nama direktori yang didukung, lihat Menyediakan Sumber Daya.

  • This site uses cookies to store your preferences for site-specific language and display options.

    Get the latest Android developer news and tips that will help you find success on Google Play.

    * Required Fields

    Hooray!

    Follow Google Developers on WeChat

    Browse this site in ?

    You requested a page in , but your language preference for this site is .

    Would you like to change your language preference and browse this site in ? If you want to change your language preference later, use the language menu at the bottom of each page.

    This class requires API level or higher

    This doc is hidden because your selected API level for the documentation is . You can change the documentation API level with the selector above the left navigation.

    For more information about specifying the API level your app requires, read Supporting Different Platform Versions.

    Take a short survey?
    Help us improve the Android developer experience.
    (Sep 2017 survey)