Cara Membuat Custom Toolbar Material Design

Assalamualaikum Warahmatullahi Wabarakatuh. Toolbar salah satu komponen yang sangat penting bagi seorang developer untuk membuat sebuh aplikasi, toolbar sendiri berfungsi sebagai manu navigasi yang memudahkan pengguna dalam berinteraksi pada aplikasi kita.

Toolbar merupakan pengganti/kelanjutan dari versi sebelumnya yaitu ActionBar, dimana komponen tersebut merupakan bagian dari material design, jika dibadingkan dengan actionBar, toolbar lebih custom sehingga kita bisa merubah tampilan serta komponen didalamnya sesuka hati.

Tapi untuk tutorial ini, kita akan membuat toolbar yang sederhana saja, dengan konsep material design, agar terlihat lebih menarik, dan menambahkan beberapa item pada toolbar tersebut.

Cara Membuat Custom Toolbar Material Design

1) Buatlah project baru pada android studio kalian, jika sudah selesai, selanjutnya buka file build.gradle(app-level), setelah itu masukan library berikut ini pada dependencies.

compile 'com.android.support:appcompat-v7:26.0.2'
compile 'com.android.support:design:26.0.2'

2) Karena disini kita menggunakan Toolbar, untuk itu kita hilangkan terlebih dahulu ActionBar bawaan pada project aplikasi kita, caranya buka file style.xml pada direktori app > src > main > res > values > style.xml.

Ubah stylenya menjadi :

<style name="AppTheme" parent="Theme.AppCompat.NoActionBar">

3) Pertama tama kita akan membuat icon/image terlebih dahulu yang akan kita gunakan sebagai menu navigasi pada toolbar tersebut, sebagai contoh, kita akan membuat icon search, yang nantinya jika icon tersebut di klik maka akan terjadi sesuatu.

Klik kalan pada direktori res > new > Image Asset.

4) Ubah Icon Type menjadi Action Bar and Tab Icon, berinama, pilih Clip Art, karena kita akan mengunakan icon bawaan android studio, klik pada icon Clip Art(yang ada gambar androidnya), terakhir, Ubah Themenya menjadi HOLO_LIGHT atau kalian bisa menyesuaikannya warnanya sendiri.

5) Pilih gambar Icon Search pada kategori Action, lalu klik OK..

6) Sekarang kita akan membuat menu, untuk kita pasang pada toolbar tersebut. Caranya klik kanan pada direktori res > new > Android resource file.

Baca Juga:

• Mengenal AppCompat Library pada Android Studio

7) Berinama file tersebut lalu ubah Resource type menjadi Menu, Klik OK. Setelah itu akan terlihat folder menu pada drektori res, didalamnya terdapat file menu yang sudah kita buat tadi,buka file tersebut.

8) Masukan beris kode berikut ini:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <item android:title="Cari"
        android:id="@+id/search"
        android:icon="@drawable/ic_search"
        app:showAsAction="always"/>

    <item android:title="Tentang"
        android:id="@+id/about"
        app:showAsAction="never"/>

</menu>

Penjelasan:

• Tag Item disunakan untuk membuat item baru pada toolbar/actionBar.
• atribut android:title digunakan untuk memberi nama pada item tersebut.
• android:id digunakan untuk memberi id.
• android:icon untuk menambahkan icon pada item, disini saya hanya menambahkan item pada menu search saja.
• app:showAsAction untuk manambahkan menu item sebagai action item, pada atribut tersebut terdapat beberapa pilihan, yaitu always, ifRoom, never dan withText.
• always: yang berarti menu item akan selalu muncul pada actionBar/toolbar.
• ifRoom: digunakan agar item tersebut bisa tampil di actionBar/toolbar jika ruang tersedia, jika tidak, item/menu akan di tempatkan di menu overflow.
• never: action item akan selalu disembunyikan dan hanya tampil di menu overflow, jika kalian ingin tahu apa itu menu overflow, contohnya seperti pada gambar berikut ini:

• withText: item akan ditampilkan berupa icon dan akan berdampingan bersama teks, withText dapat digabung dengan nilai lain menggunakan karakter | (pipe), contohnya seperti ini app:showAsAction="withText|always"

9) Buka file activity_main.xml kalian, lalu tambahkan kode dibawah ini:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white"
    tools:context="cianjur.developer.net.toolbar.MainActivity">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorAccent"
        android:minHeight="?attr/actionBarSize">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/colorPrimary"
            android:minHeight="?attr/actionBarSize"
            app:theme="@style/AppTheme"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light">

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

    </android.support.design.widget.AppBarLayout>

</RelativeLayout>

Coba kalian perhatikan, pada code tersebut kita menggunakan widget AppBarLayout, yang brfungsi agar toolbar kita terlihat memiliki konsep material design dan didalamnya terdapat widget toolbar, yang digunakan sebagai pembungkus isi konten dari toolbar yang akan kita gunakan.

Dan berikut ini merupakan gambar activity_main.xml jika dilihat dalam mode design:

Selanjutnya kita akan menerapkan toolbar tersebut dengan menggunakan java, buka file ActivityMain.java kalian, lalu msukan code berikut ini:

package cianjur.developer.net.toolbar;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuInflater;
import android.view.MenuItem;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = findViewById(R.id.toolbar); //Inisialisasi dan Implementasi id Toolbar

        setSupportActionBar(toolbar); // Memasang Toolbar pada Aplikasi
        getSupportActionBar().setTitle("Toolbar MD"); // Memasang Judul pada Toolbar
    }

    //Code Program pada Method dibawah ini akan Berjalan saat Option Menu Dibuat
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        //Memanggil/Memasang menu item pada toolbar dari layout menu_bar.xml
        MenuInflater inflater = getMenuInflater();
        inflater.inflate(R.menu.menu_bar, menu);
        return super.onCreateOptionsMenu(menu);
    }

    //Membuat event/kejadian saat salah satu item pada toolbar di klik
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()){
            case R.id.about :
                //Kode disini akan di eksekusi saat tombol about di klik
                Toast.makeText(this, "Developer By: Wildan", Toast.LENGTH_SHORT).show();
                break;
            case R.id.search :
                //Kode disini akan di eksekusi saat tombol search di klik
                Toast.makeText(this, "Silakan Cari Sesuatu", Toast.LENGTH_SHORT).show();
                break;
        }
        return super.onOptionsItemSelected(item);
    }
}

Selasai!, seletah itu jalankan project tersebut, maka lihatlah hasilnya.

Kalian bisa bereksperimen sendiri dan membuatnya lebih bagus lagi, semoga tutorial yang saya buat ini bisa bermanfaat untuk kalian semua.

Wassalamualaikum Warahmatullahi Wabarakatuh.