TOOLBAR – Quick Tutorial (Xamarin Android) (Code)

Toolbar is a significant part of any Android UI. A user expects it to be there and be useful. While we’re not gonna discuss how to make it useful, you’re at least going to learn how to make it a part of your app’s UI in this tutorial.

You will learn how to create a simple plain toolbar using an AppCompat support library. Then you will find out how to create a toolbar menu.

This post contains all the code that’s been written in this YouTube video.

 

You can also check out this GitHub repository: https://github.com/ResoCoder/ToolbarXamarinAndroid

MainActivity.cs

using Android.App;
using Android.OS;
using Android.Support.V7.App;
using Android.Support.V7.Widget;
using Android.Views;

namespace XamarinTut
{
    [Activity(Label = "XamarinTut", MainLauncher = true, Icon = "@drawable/icon")]
    public class MainActivity : AppCompatActivity
    {
        protected override void OnCreate(Bundle bundle)
        {
            base.OnCreate(bundle);

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

            var toolbar = FindViewById<Toolbar>(Resource.Id.toolbar);
            SetSupportActionBar(toolbar);
            SupportActionBar.Title = "Tutorial Toolbar";
        }

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

        public override bool OnOptionsItemSelected(IMenuItem item)
        {
            string textToShow;

            if (item.ItemId == Resource.Id.menu_info)
                textToShow = "Learn more about us on our website :)";
            else
                textToShow = "Overfloooow";

            Android.Widget.Toast.MakeText(this, item.TitleFormatted + ": " + textToShow,
                Android.Widget.ToastLength.Long).Show();

            return base.OnOptionsItemSelected(item);
        }
    }
}

Main.axml

<?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">
    <android.support.v7.widget.Toolbar
      android:id="@+id/toolbar"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:minHeight="?attr/actionBarSize"
      android:background="?attr/colorPrimary"
      android:elevation="4dp"
      android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
</LinearLayout>

toolbar_menu.axml

<?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:id="@+id/menu_info"
    android:icon="@drawable/ic_info_outline_white_24dp"
    app:showAsAction="ifRoom"
    android:title="Info"/>
  <item
    android:id="@+id/menu_overflow"
    app:showAsAction="never"
    android:title="Overflow"/>
</menu>

styles.xml

<?xml version="1.0" encoding="utf-8" ?>
<resources>
  <style name="AppTheme" parent="Theme.AppCompat">
    <item name="windowNoTitle">true</item>
    <item name="windowActionBar">false</item>
    <item name="colorPrimary">#4CAF50</item>
  </style>
</resources>

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="XamarinTut.XamarinTut" android:versionCode="1" android:versionName="1.0">
  <uses-sdk android:minSdkVersion="16" />
  <application android:label="XamarinTut" android:theme="@style/AppTheme"></application>
</manifest>