Membuat Toolbar Android dengan Menu Icon dan List item

Toolbar berfungsi sepagai panel yang memberikan kemudahan saat menggunakan aplikasi.

Pada toolbar aplikasi android terdapat judul toolbar dan menu yang memungkinkan pengguna melakukan tindakan terhadap laman aplikasi.

menu toolbar dapat berupa gambar dan list item.

seperti gambar berikut:

Untuk menambahkan toolbar dan menambahkan menu pada toolbar silahkan ikuti langgkah berikut

1. Buatlah aplikasi new project dan Create Toolbar Android Studio seperti gambar di bawah ini

.2. Pilih target android

3. Add Blank Activity

4. Configure Activity

6. Setting android Manifest

Setelah berhasil membuat project langkah selanjutnya Untuk menghindari toolbar yang ditampilkan adalah toolbar default theme perlu dilakukan perubahan pada AndroidManifest.xml

hapus

android:theme="@style/AppTheme"

dan ubah menjadi No Action bar

android:theme="@style/Theme.AppCompat.Light.NoActionBar"

7. Buat class java dengan nama ToolbarActivity seperti dibawah ini
ToolbarActivity.java

package com.toolbarandroid;

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


public class ToolbarActivity extends AppCompatActivity  {
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.toolbar);

        Toolbar toolbar = findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu){
        getMenuInflater().inflate(R.menu.toolbar_menu, menu);
        return true;
    }
}

8. Buatlah layout toolbar

toolbar.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    android:orientation="vertical">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:minHeight="?attr/actionBarSize"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:titleTextColor="@android:color/white"
        android:background="@color/colorPrimary"
        >
    </android.support.v7.widget.Toolbar>

    <!-- Layout for content is here. This can be a RelativeLayout  -->

</LinearLayout>

9. Bagian selanjutnya adalah menambahkan menu pada toolbar. Buatlah toolbar_menu.xml di directory res/menu/

toolbar_menu.xml

<menu xmlns:tools="http://schemas.android.com/tools"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    app:titleTextColor="@android:color/white"
    android:background="@color/colorPrimary"
    >
    <item
        android:id="@+id/reload"
        android:icon="@drawable/ic_autorenew_black_24dp"
        app:showAsAction="ifRoom|withText"
        android:title="Reload">
    </item>

    <item
        android:id="@+id/test_item"
        android:title="Test Item"></item>
</menu>

utnuk file

ic_autorenew_black_24dp

dapat di download di font google

10. Jalankan Program dan Lihat Outputnya sebagai berikut :

Mengubah Warna Toolbar dan Warna Icon Toolbar

Tambahkan style berikut pada values/style.css

    <style name="AppTheme.Toolbar" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
        <item name="android:background">?android:attr/colorAccent</item>
        <item name="android:popupTheme">@style/ThemeOverlay.AppCompat.Light</item>
        <item name="theme">@style/ThemeOverlay.AppCompat.Dark.ActionBar</item>
    </style>

Ubah toolbar color dan gunakan theme style di atas dengan menambahkan

style="@style/AppTheme.Toolbar"

Dan Hapus

app:titleTextColor="@android:color/white"
android:background="@color/colorPrimary"

Sehingga toolbar menjadi seperti di bawah ini :

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:minHeight="?attr/actionBarSize"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    style="@style/AppTheme.Toolbar">
</android.support.v7.widget.Toolbar>

Hasil Ketika di jalankan

Membuat Aksi Untuk Toolbar Android

Toolbar icon dan list item yang telah di buat tentu harus memiliki aksi.

Aksi ini merupakan perintah yang dijalankan ketika icon toolbar atau judul list item di pilih.

icon ic_autorenew_black24dp akan diberi aki refresh data atau page.

Langkah untuk memberi aksi icon toolbar tersebut adalah sebagai berikut

Pada class Toolbar Activity Tambahkan dan pemilihan itemid melalui swithc case break

onOptionsItemSelected

Sciript yang ditambahkan sebagai berikut:

 @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case R.id.reload:
                Toast.makeText(this, "Refreshing...", Toast.LENGTH_SHORT).show();
                return true;
            case R.id.test_item:
                AlertDialog.Builder alert = new AlertDialog.Builder(this);
                alert.setTitle("List Item Dialog");
                alert.setMessage("Messsage");
                alert.setNegativeButton("Cancel",
                        new DialogInterface.OnClickListener() {
                            public void onClick(DialogInterface dialog, int whichButton) {
                            }
                        });

                alert.show();
                return true;
            default:
                return super.onOptionsItemSelected(item);
        }
    }

Dari Script di atas dapat dilihat bahwa icon menu toolbar ic_autorenew_black24dp yang terdapat pada toolbar saat di klik akan melakukan perintah refresh yang ditampilkan melalui toast

output program

Saat di klik toolbar akan memunculkan tulisan refreshing.

Selanjutnya list menu item R.id.test_item akan memunculkan alert saat di klik.