Xamarin Android - Use Toolbar in place of ActionBar


A toolbar in place of an actionbar with a menu, the end result.

- February 7, 2016

Rest of the Story:

Add references to Xamarin.Android.Support.v7.AppCompat (this will also include Xamarin.Android.Support.v4)
image
Open Main.axml adding the following toolbar element

<?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:minHeight="?attr/actionBarSize"  
    android:background="?attr/colorPrimary"  
    android:layout_width="match_parent" />

Opening in the designer we have
image
Updating MainActivity.cs

using System;  
using Android.App;  
using Android.Content;  
using Android.Runtime;  
using Android.Views;  
using Android.Widget;  
using Android.OS;  
using SupportToolbar = Android.Support.V7.Widget.Toolbar;  
using Android.Support.V7.App;  
using Android.Support.V4.Widget;  
using System.Collections.Generic;  
  
namespace AppDave  
{      
    [Activity(Label = "AppDave", MainLauncher = true, Icon = "@drawable/icon", Theme="@style/MyTheme")]  
    public class MainActivity : ActionBarActivity  
    {  
        private SupportToolbar _toolbar;  
  
        protected override void OnCreate(Bundle bundle)  
        {  
            base.OnCreate(bundle);                      
            SetContentView(Resource.Layout.Main);  
  
            _toolbar = FindViewById<SupportToolbar>(Resource.Id.toolbar);  
            //sets the actionbar to our toolbar  
            SetSupportActionBar(_toolbar);    
            //we can now call our toolbar via SupportActionBar  
            SupportActionBar.Title = "MyToolbar";  
        }  
  
        public override bool OnCreateOptionsMenu(IMenu menu)  
        {              
            MenuInflater.Inflate(Resource.Menu.action_menu, menu);  
            return base.OnCreateOptionsMenu(menu);  
        }  
    }  
}

Notes:

  • I am deriving from ActionBarActivity instead of Activity (see above)
  • I am using a styles.xml. This will be used to specify the theme that will be applied to the activity.  The theme will inherit from the AppCompat.Light theme. Then at this point we can override the default values for that theme.
  • Note: instead of specifying .NoActionBar as shown below I have read that you can also specify the parent as Theme.AppCompat.Light then the first attribute would be <item name=”windowActionBar”>false</item>  I found however by specifying no action bar in this manner I had the following exception “Java.Lang.IllegalArgumentException: AppCompat does not support the current theme features”.  As a result I did have to use the .NoActionBar option as shown in the xml snippet.
  • SetSupportActionBar will be used to actually set the action bar to our toolbar.  At this point, SupportActionBar will be used to call the toolbar.
  • In order to get the action menu to be inflated on the toolbar use public override OnCreateOptionsMenu
<?xml version="1.0" encoding="utf-8" ?>  
<resources>    
  <style name="MyTheme" parent="Theme.AppCompat.Light.NoActionBar">   
    <item name="colorPrimary">#2196F3</item>  
  </style>  
</resources>  
  • The menu within the toolbar is also specified via action_menu.xml.  This will be the quick menu on the top right.
<?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/action_help"
android:icon="@drawable/ic_action_help"
android:title="Help"/>
<item android:id="@+id/action_refresh"
android:icon="@drawable/ic_action_refresh"
android:title="Refresh"/>
</menu>

This is the end result, a toolbar in place of an actionbar with a menu

image

Note: in the above action menu we did not override the app : showAsAction element.  If I specify showAsAction in the following manner you can see the differences.  When specifying as never the icon is visible to the left of the …

<?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/action_help"  
        android:icon="@drawable/ic_action_help"  
        android:title="Help"  
        app:showAsAction="always"  
        />  
  
  <item android:id="@+id/action_refresh"  
        android:icon="@drawable/ic_action_refresh"  
        android:title="Refresh"  
        app:showAsAction="never"  
        />  
</menu>  

image