Tutorial Xamarin Android : Membuat Toolbar Bottom (Dua Toolbar)

Selamat siang , Setelah sebelumnya saya membuat tutorial tentang toolbar top yang bisa kalian cek disini, sekarang saya akan membuat sebuah tutorial lanjutan yaitu membuat toolbar bottom, yaitu sebuah toolbar yang terletak pada bawah screen aplikasi android. Agar menarik pada latihan kali ini kita membuat 2 toolbar sekaligus, tentunya untuk dapat mengikuti tutorial kali ini kita harus mengikuti tutorial sebelumnya yaitu Tutorial Xamarin Android Membuat Toolbar.

Yap, saya umpamakan anda sudah memiliki source code pada tutorial saya sebelumnya ya, sekarang kita akan tambahkan beberapa code , namun persiapkan terlebih dahulu beberapa gambar dengan ukuran 32x32 px ya, tentunya gambar tersebut akan kita gunakan sebagai icon menu. Kalian juga sudah paham kalau icon tersebut harus ditempatkan / dicopy ke folder drawable. Kurang lebih hasil akhirnya adalah sebagai berikut ini.

Ikuti langkah-langkah berikut ini :

Langkah 1 

Buatlah sebuah file xml baru pada folder menu yang sudah kita buat sebelumnya , gunakan nama toolbox_menu.xml lalu ketikan code seperti ini 

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

 <item android:id="@+id/balas"
  android:icon="@drawable/balas"
  android:title="Balas"
  myapp:showAsAction="always"/>
 <item android:id="@+id/kamera"
  android:icon="@drawable/kamera"
  android:title="Kamera"
  myapp:showAsAction="always"/>
 <item android:id="@+id/galeri"
  android:icon="@drawable/galeri"
  android:title="Galeri"
  myapp:showAsAction="always"/>


</menu>

Langkah 2
Bukalah file Main.axml lalu ubah code seperti berikut

<?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"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:background="#FEFEFE">


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

 app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
 app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
 android:layout_alignParentTop="true" />

 <TextView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="Dua Toolbar"
 android:textColor="#000"
 android:textSize="20sp"
 android:layout_centerInParent="true"/>

<android.support.v7.widget.Toolbar 
 android:id="@+id/toolbar_bottom"
 android:layout_height="wrap_content"
 android:layout_width="match_parent"
 android:minHeight="?android:attr/actionBarSize"
 android:background="?android:attr/colorPrimary" 

 app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
 app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
 android:layout_alignParentBottom="true" />

 
 </RelativeLayout>

Pada langkah diatas kita membuat sebuah relative layout terlebih dahulu, kemudian kita duplikat toolbar, untuk memposisikan toolbar pada posisi atas kita gunakan layout_alignParentTop="true" sedangkan untuk posisi bawah adalah layout_alignParentBottom="true"

Langkah 3 :
Bukalah kembali file MainActivity.cs lalu modifikasi codenya seperti berikut ini

using Android.App;
using Android.Widget;
using Android.OS;
using System;
using Android.Runtime;
using Android.Content;
using Android.Views;
using Android.Support.V7.App;
using SupportToolbar = Android.Support.V7.Widget.Toolbar;

namespace tutorialToolbar
{
 [Activity(Label = "tutorialToolbar", MainLauncher = true, Theme="@style/MyTheme")]
 public class MainActivity : ActionBarActivity
 {

  private SupportToolbar mToolbar;
  private SupportToolbar mStandAloneToolbar;
  protected override void OnCreate(Bundle savedInstanceState)
  {
   base.OnCreate(savedInstanceState);

   // Set our view from the "main" layout resource
   SetContentView(Resource.Layout.Main);

   mToolbar = FindViewById<SupportToolbar>(Resource.Id.toolbar);
   mStandAloneToolbar = FindViewById<SupportToolbar>(Resource.Id.toolbar_bottom);
   SetSupportActionBar(mToolbar);
   SupportActionBar.Title = "Hello Toolbar";

   mStandAloneToolbar.InflateMenu(Resource.Menu.toolbox_menu);
   mStandAloneToolbar.MenuItemClick += MStandAloneToolbar_MenuItemClick;



  }

  void MStandAloneToolbar_MenuItemClick(object sender, SupportToolbar.MenuItemClickEventArgs e)
  {
   switch (e.Item.ItemId)
   {
    case Resource.Id.balas:
     Console.WriteLine("Balas");
     break;

    case Resource.Id.kamera:
     Console.WriteLine("Kamera");
     break;

    case Resource.Id.galeri:
     Console.WriteLine("Galery");
     break;


   }
  }

  public override bool OnCreateOptionsMenu(IMenu menu)
  {
   MenuInflater.Inflate(Resource.Menu.action_menu, menu);
   return base.OnCreateOptionsMenu(menu);
  }
 }
}

Agar mudah kita panggil SupportToolbar

using SupportToolbar = Android.Support.V7.Widget.Toolbar;

Lalu kita buat sebuah variable baru yang akan menampung menu toolbox_menu.xml yang sudah kita buat sebelumnya pada variable ini

private SupportToolbar mStandAloneToolbar;

kemudian sesuaikan dengan posisi toolbar dengan id yang sudah kita buat pada Main.axml

mStandAloneToolbar = FindViewById<SupportToolbar>(Resource.Id.toolbar_bottom);

Sekarang kita tinggal panggil toolbox_menu nya pada toolbar

mStandAloneToolbar.InflateMenu(Resource.Menu.toolbox_menu);
mStandAloneToolbar.MenuItemClick += MStandAloneToolbar_MenuItemClick;

Untuk memanggil id dari setiap menu kita bisa menggunakan fungsi berikut :

void MStandAloneToolbar_MenuItemClick(object sender, SupportToolbar.MenuItemClickEventArgs e)
  {
   switch (e.Item.ItemId)
   {
    case Resource.Id.balas:
     Console.WriteLine("Balas");
     break;

    case Resource.Id.kamera:
     Console.WriteLine("Kamera");
     break;

    case Resource.Id.galeri:
     Console.WriteLine("Galery");
     break;


   }
  }

Terimakasih

Ipung Purwono
https://www.facebook.com/ipungz.purwono