Adding an action bar

Almost all apps require some form of commanding, usually being frequently used. As a result, these commands should be presented in an easily consumed region of the screen, regardless of differences in screen configuration.

How to do it...

Adding an action bar is very simple and does not need many changes to our app, even if they are to run on the old versions of Android:

  1. By default, on Android 4.0, apps will have an action bar. To access this, we can use the ActionBar property on the Activity type:
    ActionBar.Title = "Xamarin Cookbook"; 

To provide an action bar to previous versions of Android, we use the Android Support Libraries:

  1. First, we need to install the Xamarin Support Library v7 AppCompat Component or NuGet.
  2. Then, we need to ensure our activities inherit from the AppCompatActivity type instead of the usual Activity type:
    public class MyActivity : AppCompatActivity
    {
    }
  3. Next, we add the Theme property to the [Activity] attribute:
    [Activity(..., Theme = "@style/Theme.AppCompat")]
  4. Finally, if we need to access the ActionBar instance, it is available via the SupportActionBar property on the activity:
    SupportActionBar.Title = "Xamarin Cookbook";

How it works...

Certain commands are used very frequently in an app. These commands are often the main set of actions available to the current app screen. Because these commands are so important, they have a dedicated area in the app, often at the top of the screen. In a to-do list app, this might be the action to add a new task. In a shopping app, this might be the option to search for a product.

How it works...

An Android screen with an action bar at the top

While adding an action bar on older Android versions, it is important to inherit it from the AppCompatActivity type. This type includes all the logic required for including an action bar in the app. It also provides many different methods and properties for accessing and configuring the action bar. In newer versions of Android, all the features are included in the Activity type.

Although the functionality is the same, we do have to access the various pieces using the support members when using the support libraries. An example would be to use the SupportActionBar property instead of the ActionBar property. If we use the ActionBar property, the app will crash on devices that don't natively support the ActionBar property.

In order to render the action bar, the activity needs to use a theme that contains a style for the action bar or one that inherits from such a theme. For the older versions of Android, we can use the AppCompat themes, such as Theme.AppCompat.

There's more...

With the release of Android version 5.0, Google introduced a new style of action bar. The new Toolbar type performs the same function as the action bar but can be placed anywhere on the screen. The action bar is always placed at the top of the screen, but toolbar is not restricted to that location and can even be placed inside other layouts.

To make use of the Toolbar type, we can either use the native type, or we can use the type found in the support libraries. Like any Android View, we can add the ToolBar type to the layout:

<android.support.v7.widget.Toolbar
  android:id="@+id/my_toolbar"
  android:layout_width="match_parent"
  android:layout_height="?attr/actionBarSize"
  android:background="?attr/colorPrimary"
  android:elevation="4dp"
  android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
  app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

The difference is in how the activity is set up. First, as we are not going to be using the default ActionBar property, we can use the Theme.AppCompat.NoActionBar theme. Then, we have to let the activity know which view is the Toolbar type:

var toolbar = FindViewById<Toolbar>(Resource.Id.toolbar);
SetSupportActionBar(toolbar);

See also

  • The Supporting previous Android versions recipe
  • The Adding action bar action items recipe
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset