Cara Menciptakan Toolbar(Action Bar) Material Design Android

Toolbar yaitu sebuah komponen antar muka yang merupakan bab dari material design di Android.Yang juga merupakan pengganti kelanjutan dari versi terdahulu yaitu Action Bar, Toolbar terdiri dari navagasi icon,menu ,setting dll. Untuk memakai dan menerapkan toolbar kalian sanggup memakai nya dari library v21 (Appcompat) hingga versi terbaru sekarang.Nah disini lah kelebihan  Android Studio karna sudah support v21 dari awal  dirilis versi 1.0 

Baca juga sebelumnya : Belajar Mengenal Material Design Android 5.0 SDK

Pada tutorial berguru android kali ini, kita akan mencoba menciptakan dan menerapkan Toolbar dengan memakai Android Studio. 

1. Pertama buka Android Studio 

2. Pilih Start a New Android Studio Project 

Start a New Android Studio Project

                                        

3..Kedua pada bagian Create New Project, sesuaikan dengan nama dan package serta lokasi file yang akan kalian gunakan. Untuk pola aku memakai menyerupai yang ada di gambar di bawah. Jika sudah pilih Next.

Create New Project

4. Selanjutnya tentukan Target Android Devices dari Aplikasi kalian , secara default aku memakai API 15 untuk minimumnya. Jika sudah pilih Next.

Target Android Devices

5. Pada bagian Add an Activity to Mobile kita sanggup menentukan template bawaan yang masih kosong yaitu Empty Activity  lalu pilih Next 

Empty Activity

6. Selanjutnya di bagian Customize the Activity kita hanya perlu menentukan tombol Finish.

Customize the Activity

7.Setelah itu kita tunggu hingga proses building project gradle simpulan .

8. Setelah simpulan proses building , kita akan mencoba menciptakan Toolbar berikut langkah-langkahnya: 

Setup Gradle

• Sebelum memulai untuk secara default pastikan pada build gradle khususnya di bab dependencies library support appcompat versi 21 atau versi terbaru menyerupai pada digambar :

Mengubah Color Resources 

•  Pada bab  color.xml(res/values/color) untuk dasarnya kalian sanggup merubah dan menyesuaikan warna dari toolbar .

       color.xml

colorPrimary : merupakan warna dasar dari toolbar 

colorPrimaryDark : merupakan warna dari status kafe ( akan terlihat bila kita memakai perangkat android 5.0 atau terbaru )

colorAccent : merupakan  warna kontras 

Color Material Theme ( source developer.android.com )

• Pada bab styles.xml (res/values/styles.xml) warna yang sudah diubahsuaikan akan diterapkan di bab file ini . Disini kita sanggup menerapkan jenis theme dan style dari salah satu komponen material design menyerupai toolbar. 

      styles.xml

Setelah itu kita akan menerapkan baris isyarat (codingan ) di bawah pada file layout dan file java.


1. Pertama di bab activity_main.xml  untuk pola kita sanggup menerapkan baris isyarat dibawah:

Copykan ke file activity_main.xml 

2.Kedua di bagian MainActivity.java kalian sanggup copykan baris isyarat dibawah:

MainActivity.java 

3.Setelah simpulan kita sanggup coba jalankan Aplikasinya lewat Android Studio .

Hasilnya kurang lebih menyerupai ini :

Hasil Toolbar di Android Device 4.2.2

Hasil Toolbar di Android Device 5.0

Seperti yang kalian sudah ketahui , bila kita menjalankan Aplikasi di Android Device di bawah 5.0 Lollipop, khususnya aku memakai Android Device 4.2.2 maka warna status kafe dari colorPrimaryDark tidak akan tampil. 

Sebaliknya bila kita memakai Android Device  5.0 Lolipop keatas atau versi terbaru , maka warna status kafe dari colorPrimaryDark akan tampil.

Untuk  Android Device 4.2.2 aku mengujinya dengan emulator genymotion. Untuk Android Device  5.0 Lolipop aku mengujinya dengan emulator bawaan terbaru dari Android 2.0 Beta.  

Sumber https://www.okedroid.com/

Share this post