The Action Bar – Android with Xamarin

By | January 31, 2014

The first article of these series showed how to customize the title area of an activity using a LinearLayout. With the release of Android 3.0 (API 11) a new object has been added to the API which allow the management of that area in a more standard look and feel way.

The new object is called ActionBar.

In this article I’ll show I to use the action bar with your activities. You can get more information here.

As in the previous articles I’ll continue using the initial project and improve on it as we go along. The use of the ActionBar, as you’ll see will simplify the code in the OnCreate event of the activity.

The same way as in the article concerning menus the ActionBar will use the menu options functionality, the events to handle the menu options clicked so I’ll re-use the same mainmenu.xml file.

Figure 1. Action bar

Figure 1. Action bar

Just a few things to be aware of when handling the ActionBar; first as you understand there’s a limited amount of real estate available so Android will display only a maximum of four options space allowing. All additional options will be displayed as a sub-menu under the overflow button if the device has no menu button or will display as the traditional menu options when the user clicks the menu button if the device has one.

Not the most intuitive way of making this work as far as I’m concerned if the goal of the ActionBar was to make it easier to the user when transitioning between different devices.

You can manage how the buttons are displayed by using the android:showAsAction attribute of the menu file.

  <item android:id=“@+id/add”
        android:icon=“@drawable/ic_action_new”
        android:showAsAction=“always”
        android:orderInCategory=“100”
        android:title=“New”>

In this case I decided I would force the display of the menu options under the overflow button by creating a sub-menu and by using the showAsAction attribute as always.

<?xml version=“1.0” encoding=“UTF-8” ?>
<menu xmlns:android=“http://schemas.android.com/apk/res/android”
android:id=“@+id/mainMenu”
android:background=“@color/light_gray”>
  <item android:id=“@+id/add”
        android:icon=“@drawable/ic_action_new”
        android:showAsAction=“always”
        android:orderInCategory=“100”
        android:title=“New”>
  </item>
  <item android:id=“@+id/phone”
        android:showAsAction=“always”
        android:orderInCategory=“200”
        android:title=“Phone”>
        <menu android:id=“@+id/submenu”>
          <item android:id=“@+id/call”
                android:icon=“@drawable/ic_action_call”
                android:title=“Call”/>
        </menu>
  </item>
  <item android:id=“@+id/overflow”
        android:icon=“@drawable/ic_action_overflow”
        android:showAsAction=“always”
        android:orderInCategory=“400”>
        <menu>
          id=”@+id/refresh”
                android:icon=”@drawable/ic_action_refresh”
                android:showAsAction=”always”
                android:orderInCategory=”300″
                android:title=”Refresh”/>
          id=”@+id/help”
                android:icon=”@drawable/ic_action_help”
                android:showAsAction=”never”
                android:orderInCategory=”500″
                android:title=”Help”/>
          <item android:id=”@+id/about”
                android:icon=”@drawable/ic_action_about”
                android:showAsAction=”never”
                android:orderInCategory=”600″
                android:title=”About”/>
        </menu>
    </item>
</menu>

To handle the action bar you use the following code in the OnCreate event of your activity:

      RequestWindowFeature (WindowFeatures.ActionBar);

      SetContentView (Resource.Layout.Main);
      ActionBar.NavigationMode = ActionBarNavigationMode.Standard;
      ActionBar.SetTitle(Resource.String.actionbar_title);
      ActionBar.SetSubtitle(Resource.String.actionbar_sub);
      ActionBar.SetDisplayShowTitleEnabled (true);
      ActionBar.SetDisplayHomeAsUpEnabled(true);

Remember that the RequestWindowFeature has to come always before the SetContentView otherwise you’ll get an error. The NavigationMode allows you to customize how the menu options display in the ActionBar.

The SetDisplayHomeAsUpEnabled will display the “back” button, the < icon in front of the Logo.

You can download the code here.

Drop us a comment or if you have any questions please contact us through our QualTech-Software Solutions or QualTechCloud Integrated Cloud solutions customer form

Leave a Reply