Belajar Membuat Material Design Toolbar di Android

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-requisitesSebelum 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.

1 2 3 4 5 6 7 8 9 10 11

<?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 :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<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 :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

// 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.