Pemrograman Android: Membuat Custom Toolbar

Toolbar merupakan salah satu view utama dalam aplikasi Android. Toolbar dapat berisi view lain, seperti action button, option menu, home up button, hingga nama aplikasi.

Ketika membuat project blank baru, kita harus membuat toolbar manual yang kemudian kita bisa membuat toolbar tersebut bertindak sebagai actionbar. Oke langsung saja ke tutorial membuat custom toolbar berikut ini.

Membuat New Blank Activity

1. File → New Project → Masukkan nama aplikasi "MyCafee", biarkan yang lain default → pilih New Blank Activity → Finish

Membuat Custom Toolbar

1. Ubah styles.xml pada folder res → values yang mana dari tema DarkActiorBar menjadi NoActionBar. Hal ini bertujuan untuk menghilangkan ActionBar bawaan dari tema tersebut agar nanti tidak menumpuk saat kita memasukkan layout toolbar baru
   

   	<resources>
   	<!-- Base application theme. -->
   	<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
   	<!-- Customize your theme here. -->
   	<item name="colorPrimary">@color/colorPrimary</item>
   	<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
   	<item name="colorAccent">@color/colorAccent</item>
   	</style>
   	</resources>

   view raw styles.xml hosted with ❤ by GitHub
2. Pada folder res, klik kanan folder layout → New → Layout resource file → masukkan nama layout misal "my_custom_toolbar" → OK
3. Untuk membuat sebuah view toolbar, masukkan source code berikut pada layout yang sudah dibuat tadi

   	<?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:layout_width="match_parent"
   	android:layout_height="?attr/actionBarSize"
   	android:background="@color/colorPrimary"
   	app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
   	app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />

   view raw my_custom_toolbar.xml hosted with ❤ by GitHub
   
   
4. Include my_custom_toolbar.xml ke layout activity_main.xml, jika terlihat tidak rapi karena padding dari layout, hapus code layout_margin pada LinearLayout-nya

   	<?xml version="1.0" encoding="utf-8"?>
   	<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   	android:layout_width="match_parent"
   	android:layout_height="match_parent"
   	android:orientation="vertical">
   	<!--Deklarasi ID di tiap layout berbeda-->
   	<include
   	android:id="@+id/toolbar_main"
   	layout="@layout/toolbar_layout" />
   	</LinearLayout>

   view raw activity_main.xml hosted with ❤ by GitHub
   
   
5. Setelah itu, kita pindah ke MainActivity.java. Di awal kita sudah memberi id toolbar kita yaitu my_toolbar yang akan kita inisialisasi
   

   	package com.misbahul.mycafee;
   	import android.support.v7.app.AppCompatActivity;
   	import android.os.Bundle;
   	import android.support.v7.widget.Toolbar;
   	public class MainActivity extends AppCompatActivity {
   	//variabel untuk menampung inisialisasi toolbar
   	Toolbar mToolbar;
   	@Override
   	protected void onCreate(Bundle savedInstanceState) {
   	super.onCreate(savedInstanceState);
   	setContentView(R.layout.activity_main);
   	//tampung view toolbar ke variabel mToolbar
   	mToolbar = (Toolbar) findViewById(R.id.my_toolbar);
   	//menggunakan toolbar sebagai actionbar
   	setSupportActionBar(mToolbar);
   	//mengubah judul toolbar dengan string pada values string "app_name" = MyCafee
   	mToolbar.setTitle(getResources().getString(R.string.app_name));
   	}
   	}

   view raw MainActivity.java hosted with ❤ by GitHub
   
   Untuk keterangan code bisa dilihat di komentar code di atas
6. Hasilnya akan tampak seperti berikut
   
   

Oke, disini kita sudah mempunyai 1 buah layout berupa toolbar. Lalu jika ingin membuat activity baru, kita cukup include toolbar tersebut pada layout mana yang kita inginkan. Toolbar ini juga bisa kita custom sendiri sesuai layout dengan mengkustom melalui file java-nya.

Sekian tutorial cara membuat custom toolbar. Jika ada kesulitan silahkan berkomentar di bawah. Selamat mencoba dan happy coding!