Module 0265: Android App Bar

Tak Auyeung, Ph.D.

February 13, 2017

1 About this module

2 Menu and action bar

An action bar is the top bar of an app screen (activity) that serves several purposes. First, it has the title of the app itself, making it easy for a user to identify which app is being used.

Second, it includes one or more frequently used menu items (often displayed as an icon to save space), along with an “overflow” area (three dots arranged vertically) for additional menu items.

A menu item is an action to perform. In many ways, it can be done by a button on the screen just the same. However, buttons are “expensive” due to the use of screen space. Menu items in the overflow area, on the other hand, are not shown until the overflow icon is clicked.

Furthermore, the action bar stays on the of the activity when the rest of the activity may scroll. This lets menu items always accessible without needing to scroll the activity.

Last, but not least, menu items can be structured and hierarchical. This helps to categorize and organize menu items when there are many of them.

Because an action bar does take up screen space, it is not always a good idea. Some apps that need more screen space hide the action bar by default and only shows it when a certain screen action triggers it. The default browser of later versions of Android is a good example. Another example is a eBook reader like Kindle.

Relating to use cases, the action bar can handle anything that is not directly related to the use case of a screen/activity. Most action bars include an item for configuration or preferences.

3 Adding an Action Bar to a backward compatible app

The first step is counter intuitive. Go to app/src/main/res/values/styles.xml and change the parent of AppTheme from something that specifies the color of the action to bar to NoActionBar.

This step is needed if an app has backward compatibility enabled when Android Studio first creates a project. Otherwise, the Theme specifies that a built-in action bar is available and prevents the use of the support action bar.

Next, go to the activity layout editor. Drag and add a Toolbar.

Change attributes of the Toolbar in XML:

A little explanation of the syntax:

In the layout XML file, each attribute has two parts separated by a single equal = symbol. The left hand side is an attribute, such as android:layout_width, the right hand side is a specification, such as "fill_parent".

The right hand side can also be a reference to a resource in an XML resource. The general syntax description is as follows:

{@[<package_name>:]<resource_type>/<resource_name>}  
  

This is a general meta syntax specification where square brackets [] specifies an optional components, and anything that is enclosed by angle brackets <> is a token to be expanded to something else.

In this case, the <package_name> part is optional. Without a package name specification, the current package is assumed.

<resource_type> has a wide variety. In this module, however, the style resource is referenced. A “style” is a container of items that collectively defines a style. A style definition allows the modular use of collections of style attributes. An UI element, for example, can refer to an entire style to specify all attributes of that style.

Android Studio automatically defines styles based on options chosen when an app is created. These styles are contained in app/src/main/rec/values/styles.xml.

Note that styles can inherit from other styles, much like a subclass in Java inherits from a superclass.

In case only an attribute of a style is needed, the syntax is as follows:

?[<package_name>:][<resource_type>/]<resource_name>  
  

Again, if missing, the current package is assumed. Note that the style itself is not specified because it is always referring to the current theme that is specified in app/src/main/AndroidManifest.xml (as android:theme in the application element). This entry is usually defined in app/src/main/res/values/styles.xml as a child of a system provided theme.

4 Turning a Toolbar into an ActionBar

Just because we added a Toolbar with the theme of an ActionBar does not make it behave as an ActionBar. The following two lines of code (in the onCreate method of an Activity) is needed to turn a ToolBar into an ActionBar.

  Toolbar tb = (Toolbar)findViewById(R.id.toolbar); 
  setSupportActionBar(tb);

5 Actually specifying menu items

Right click res in the Project, then select Android resource directory. Use the drop down box to specify menu. Then click OK. This creates a folder for all the menus of an app.

Next, right click the newly created menu folder, then new, then Menu resource file. Now you can make the file, it must end with the extension xml.

Now you can use the WYSIWYG tool to create the menu.

Note that a menu does not need an ID. Once a menu resource is created, the file name (without the extension) becomes the identifier. For example, if the XML file is named ”main_menu.xml”, then R.menu.main_menu identifies the menu in the call to inflate.

To link a menu resource to the action bar, you need add the following override in the activity class definition:

  @Override 
  public boolean onCreateOptionsMenu(Menu menu) { 
    getMenuInflater().inflate(R.menu.main_menu, menu); 
    return super.onCreateOptionsMenu(menu); 
  }

6 Responding to menu items

The selection of menu items triggers the onOptionsItemSelected method of an Activity class. In order to link custom code to menu items, this method must be overriden as follows:

  @Override 
  public boolean onOptionsItemSelected(MenuItem item) { 
    switch (item.getItemId()) 
    { 
      case R.id.item1: 
        // some code here 
        return true// indicates taken care of 
      case R.id.item2: 
        // some code here 
        return true// indicates taken care of 
      default
        return super.onOptionsItemSelected(item); // let super class do it 
    } 
  }