Tutorial Toolbar Android Studio Untuk Pemula

Hallo, di tutorial sebelumnya Jember Developer sudah membahas tentang tutorial untuk menerapkan material design pada aplikasi yang akan kita buat. Nah di tutorial kali ini akan membahas tentang cara membuat toolbar. Oke langsung saja simak tutorial berikut ini.

1. Buka projek yang telah dibuat sebelumnya.
2. Klik kanan pada direktori layout > New > Layout resource file
3. Berinama toolbar. Pada bagian Root element ubah menjadi android.support.v7.widget.Toolbar
   
4. Kemudian buka styles.xml lalu ubah tema menjadi NoActionBar
   
5. Buka toolbar.xml lalu edit menjadi seperti berikut ini.

 <?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/colorPrimary">

</android.support.v7.widget.Toolbar> 

6. Buka activity_satu.xml lalu tambahkan script berikut ini.

 <include
        android:id="@+id/toolbar"
        layout="@layout/toolbar"/> 

Sehingga menjadi seperti ini.

 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context=".ActivitySatu">

    <include
        android:id="@+id/toolbar"
        layout="@layout/toolbar"/>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/toolbar"
        android:text="@string/hello_world"/>

</RelativeLayout> 

7. Buka ActivitySatu.java lalu ubah AppCompatActivity menjadi ActionBarActivity. Tambahkan variable Toolbar sehingga hasil seperti berikut.

 public class ActivitySatu extends ActionBarActivity{
    private Toolbar toolbar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_satu);
        //toolbar
        toolbar= (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
    }
...
...
...
} 

8. Pasti akan muncul error karena java class nya belum di import. Lakukan import dengan cara tekan Alt+Enter di bagian yang error. Jika ada pilihan, pilih android.support.v7.
9. Jika sudah coba jalankan, hasilnya akan seperti ini. Kurang enak dilihat karena warna teks hitam.
   
10. Langkah selanjutnya kita akan mengubah warna teks pada toolbar, caranya buka toolbar.xml lalu edit menjadi seperti berikut ini.

 <?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/colorPrimary"
    app:theme="@style/ThemeOverlay.AppCompat.Dark"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light">

</android.support.v7.widget.Toolbar> 

11. Jalankan aplikasi dan lihat hasilnya, jauh lebih menarik kan dan juga lebih sesuai dengan konsep Material Design.
    

• Github
• PDF