Kita sebelumnya telah belajar tentang widget dan atribut pada layout. Sekarang kita akan mencoba melihat kembali desain dari activity_main.xml. Klik tab design dan kita melihat design layout seperti berikut.

melakukan preview layout

Pada tab Design kita melihat layout dengan terdapat widget Button bertulisan “SENTUH AKU”.  Untuk menampilkan ActionBar pada tampilan desain layout, klik lambang mata kemudian pilih Show Layout Decorations. 

show layout decorations

Kita dapat melihat ActionBar bertulisan “Aplikasi Sederhana” pada tampilan desain layout  seperti gambar dibawah ini.

preview layout android studio

Sekarang kita akan mencoba menyesuaikan desain aplikasi kita dengan rancangan pada gambar dibawah ini. 

rancangan aplikasi android

Pada gambar di atas kita melihat Button dan ActionBar berwarna biru. Buka kembali activity_main.xml, klik tab text dan tambahkan attribut berikut di dalam widget Button. 

android:background="#1976d2"
android:textColor="@android:color/white"
android:padding="15dp" 

Pada kode diatas kita menambahkan warna background menjadi biru, kemudian warna teks menjadi putih, terakhir kita menambah padding atau spasi antara border dan tulisan dari widget button. Setelah memasukan kode diatas maka tampilan dari layout_activity.xml menjadi seperti gambar berikut.

ganti warna button

Sekarang kita akan mencoba mengubah warna dari ActionBar menjadi warna biru. Buka colors.xml pada direktori res/values/colors.xml dan ubah menjadi seperti berikut.

colors xml ganti warna

Kembali ke activity_main.xml untuk melihat hasil desain kita yang telah disesuaikan dengan rancangan. 

hasil ganti warna action bar

Kita telah berhasil membuat tampilan layout menjadi seperti rancangan. Selanjutnya kita akan belajar bagaimana cara menghubungkan dan membuat listener dari widget Button.