Tutorial Xamarin Indonesia: Tutorial Xamarin Android : Membuat Toolbar

Hello everyone, selamat sore

Sambil mengisi waktu senggang saya sempatkan untuk melakukan eksperiment membuat toolbar pada xamarin android, Toolbar adalah sebuah tempat yang memungkinkan kita membuat menu horizontal, bisa kita lihat pada gambar sebagai berikut ini .

Yap, begitulah kira-kira desain toolbar yang akan kita buat pada eksperiment kali ini ya. Sebelum melanjutkannya pastikan kita siapkan beberapa gambar berikut , gambar dapat kita download pada link berikut ini : flaticon

Jangan lupa untuk mendownloadnya dalam ukuran 32 x 32 px ya dalam bentuk format .PNG. Setelah berhasil didownload lalu , pada folder resources / drawable klik kanan pilih add files dan masukan gambar yang sudah didownload tadi agar masuk pada folder drawable.

Ikuti langkah-langkah berikut untuk membuat toolbar pada xamarin android.

Langkah 1
Buatlah sebuah project baru bernama tutorialToolbar pilih Blank Android App dan Pilih Modern Device agar support dengan minimal SDK JellyBean.

Langkah 2
Pada folder Components lalu pilih Klik Kanan -> Get More Components -> Instal Android Support Design Library dan Instal Android Android Support Library v7 App Compat, tunggu hingga instalasi selesai

Langkah 3
Pada folder values klik kanan -> Add New Files -> Buatlah sebauah file xml dengan nama Styles.xml lalu ketikan code seperti berikut ini.

<?xml version="1.0" encoding="UTF-8" ?>
<resources>
 <style name="MyTheme" parent="Theme.AppCompat.NoActionBar">
 <item name="windowActionBar">false</item>
 <item name="colorPrimary">#2196F3</item>
 </style>
</resources>

Pada style diatas kita menggunakan .NoActionBar dengan tujuan agar kita bisa mengganti actionbar default menjadi sebuah toolbar menu yang sudah kita custom.

Langkah 4
Buatlah sebuah folder pada resources dengan nama menu, lalu pada folder menu tersebut pilih Add New Files -> Buatlah juga sebuah file xml dengan nama action_menu.xml dengan code seperti berikut

<menu xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:myapp="http://schemas.android.com/apk/res-auto">

 <item android:id="@+id/share"
  android:icon="@drawable/share"
  android:title="Share"
  myapp:showAsAction="always"/>
 
 <item android:id="@+id/setting"
  android:title="Setting"
  myapp:showAsAction="never"/>
 <item android:id="@+id/reply"
  android:title="Reply"
  myapp:showAsAction="never"/>
 <item android:id="@+id/backup"
  android:title="Backups"
  myapp:showAsAction="never"/>

</menu>

Karena kita hendak membuat menu maka tag yang digunakan adalah <menu> dan diakhiri dengan </menu> bisa kita lihat pada showAsAction ada yang diset always dan never, untuk yang diset Always akan muncul pada toolbar sedangkan untuk yang never untuk popUp menu.

Langkah 5
Bukalah file Main.axml pada folder layout lalu ubahlah code default menjadi seperti ini

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

Langkah 6
Sekarang konfigurasi pada MainActivity.cs agar kita bisa memanggil menu pada toolbar yang sudah kita buat

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;

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

  private Android.Support.V7.Widget.Toolbar mToolbar;
  protected override void OnCreate(Bundle savedInstanceState)
  {
   base.OnCreate(savedInstanceState);

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

   mToolbar = FindViewById<Android.Support.V7.Widget.Toolbar>(Resource.Id.toolbar);
   SetSupportActionBar(mToolbar);
   SupportActionBar.Title = "Hello Toolbar";
  }


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

Bisa kita lihat kita menggunakan

using Android.Support.V7.App;

code diatas untuk memanggil library AppCompat.

Dan agar style tersebut dapat digunakan , maka pada Activity kita tambahkan code

Theme="@style/MyTheme"

Kemudian affiliasikan MainActivity : ActionBarActivity

Kita juga membuat variable mToolbar dimana akan memanggil id yang sudah kita set pada Main.axml yaitu @+id/toolbar, Kita juga bisa set Title "Hello Toolbar". Agar menu pada toolbar tampil gunakan fungsi OnCreateOptionsMenu(IMenu menu).