Belajar Membuat Material Design Toolbar di Android

Last Updated on 9 years by Mas Herdi

Salah satu elemen yang tampil menonjol pada Android Material Design adalah Toolbar. Toolbar (penerus dari ActionBar) adalah sebuah elemen layout yang terletak pada bagian atas aplikasi dan biasanya berisi tombol-tombol untuk kontrol navigasi dan menu. Toolbar juga biasanya menjadi tempat untuk meletakkan logo aplikasi dan juga title atau subtitle dari aplikasi tersebut.

Membuat Toolbar di Android

Cara membuat Toolbar di Android sendiri cukup mudah, berbeda dengan ActionBar yang secara default biasanya sudah include pada tema aplikasi. Toolbar mempunya view sendiri yang harus dibuat dan kemudian ditambahkan pada layout xml activity yang ingin menggunakan Toolbar tersebut.

Pre-requisites
Sebelum belajar membuat Toolbar, ada baiknya kalian membaca pre-requisites di bawah ini :

• Mengenal Android Material Design
• Membuat Project Hello World dengan Android Studio
• Membuat Color Resources untuk Material Design Theme

Kali ini kita akan melanjutkan dari tutorial sebelumnya, yaitu tentang membuat TextInputLayout, kita akan menggunakan activity tersebut dan menambahkan Toolbar di bagian atasnya.

Pertama-tama, kita harus membuat sebuah view untuk Toolbar berupa file xml. Buat sebuah file xml layout baru bernama view_toolbar.xml dan copy-pastekan kode berikut di dalamnya.

<?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="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    android:theme="@style/AppTheme"
    android:elevation="4dp">

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

Setelah itu, kita bisa include view_toolbar.xml pada layout xml suatu activity yang ingin menggunakan Toolbar tersebut. Contoh include-nya adalah sebagai berikut :

<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"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:background="@drawable/ic_bg"
    tools:context="TextInputActivity" >

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

    <!-- elemen layout lainnya... -->

</RelativeLayout>

Jika sudah, kita bisa memanggil Toolbar tersebut pada Activity, dengan cara yang sama seperti saat kita memanggil view element lainnya. Contohnya sebagai berikut :

        // findview toolbar
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);

        // set toolbar ke dalam support action bar
        setSupportActionBar(toolbar);

        // enable home button untuk navigasi
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);

        // mengeset icon untuk home button Toolbar
        getSupportActionBar().setHomeAsUpIndicator(R.drawable.ic_menu);

        // mengeset title/nama aplikasi
        getSupportActionBar().setTitle("TWOH's Engineering");

        // mengeset subtitle
        getSupportActionBar().setSubtitle("Tutorial Material Design");

        // set logo toolbar
        getSupportActionBar().setDisplayUseLogoEnabled(true);
        getSupportActionBar().setLogo(R.mipmap.ic_launcher);

Toolbar, selain menjadi penerus dari ActionBar, juga bertujuan untuk menggeneralisasi fungsionalitas pada ActionBar supaya bisa digunakan dari dalam layout aplikasi.

Pada implementasinya, Toolbar biasanya digunakan sebagai pengganti ActionBar. Sehingga ketika kita ingin menggunakan Toolbar, kita harus menonaktifkan default ActionBar pada file values/styles.xml terlebih dahulu. Selain itu tema aplikasi yang digunakan harus extend dari tema yang tidak menggunakan ActionBar (NoActionBar), seperti Theme.AppCompat.NoActionBar atau Theme.AppCompat.Light.NoActionBar. Untuk penjelasan selanjutnya bisa dibaca pada postingan berikut.

Demo

Ketika dijalankan, beginilah Toolbar hasil kreasi kita :

Contoh Toolbar Android

Seperti biasa, source code ada di GitHub saya. Jangan lupa untuk star projects nya dan follow ya :D. Bagi yang masih belum mengerti silahkan bertanya via komentar.