Xamarin Android - Use Toolbar in place of ActionBar

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

Author

david

comments powered by Disqus

Categories

Recent Tweets

Retweeted by @dyardy Hey C# peeps, we’re trying C# in browser with reference content. Try it here: docs.microsoft.com/dotnet/csharp/… reply with feedback /cc @LadyNaggaga
23 Amazing Vintage Photographs Taken Inside WWII Tank Factories ~ vintage everyday vintag.es/2017/10/23-ama…
When is AI NOT Search? Artificiality intelligence==Search Engine (there cases when this is not true)
@projectedxyz Large data vs big data? Industry has so misused buzz words to sell products, and so you end up nothi… twitter.com/i/web/status/9…