Bagian 7 – UI (User Interface) Material Design

User Interface android studio

Modifikasi Tema Dengan Material Design

Pada tutorial ini kita akan memodifikasi tema android dengan Material Design. Ada 3 file yang akan dimodifikasi, yaitu:

  1. color.xml
  2. styles.xml, dan
  3. AndroidManifest.xml.

Memulai Poject

Buat project baru dengan nama EditTema dengan memilih jenis Activity Empty Activity. Jika kamu bingung bagaimana cara membuat project, kamu bisa mengikuti tutorial berikut ini: Belajar: Membuat Project dan Struktur Folder – Android

Setelah membuat project, saya akan menjelaskan sedikit mengenai file colors.xml yang berada pada bagian “res > values > colors.xml”.

Pada gambar di atas terlihat ada 3 resources warna yang masing-masing diberi nama seperti pada tabel di bawah.

Resources Color Name Kode Warna Warna Pada Kotak kiri
colorPrimary #3F51B5
colorPrimaryDark #303F9F
ColorAccent #FF4081

Pada gambar di atas terlihat di bagian kiri yang berada pada line nomor 3, 4, dan 5 terdapat kotak kecil berwarna. Kotak berwarna tersebut mewakili dari setiap kode resources warna yang telah dibuat.

Tampilan Aplikasi Ketika colors.xml di jalankan

 

Catatan penting:
File color.xml berfungsi sebagai penyimpan resources warna yang kita buat.

 

 

Selanjutnya buka file styles.xml yang terdapat pada file “res > values > styles.xml”.

styles.xml di atas tujuannya adalah untuk membuat style dengan nama AppTheme. Tiga item yang terdapat dalam kode gambar diatas adalah resources dari colors.xml. Dan Nama style inilah (AppTheme) yang nantinya akan dipanggil pada file AndroidManifest.xml

Kita Lanjut Lagi Ya

Buka file AndroidManifest.xml yang terdapat pada folder manifest yang berada diposisi paling atas.

Bagian yang ditandai kotak merah adalah bagian style yang terdapat pada file styles.xml dan dipanggil sesuai dengan yang telah dibahas sebelumnya. [Jika bingung komen aja di bawah]




Silahkan klik Next Step di bawah ini untuk melanjutkan belajar.

Muhammad Yusuf

Konten developer untuk Mobile Development

all author posts