Welcome to Part 2 of this review of the Pluralsight course Improving User Interaction with the Android Action Bar by Jim Wilson

Jim has over 30 years of software engineering experience, with the past 15 years heavily focused on creating mobile device and location-based solutions. He has co-founded multiple software-related startups and has served in a consulting role at several more.

After nearly a decade as a Microsoft Device Application Development MVP, Jim now focuses on developing Android and iOS device applications. Jim’s passion is mentoring software developers. He blogs at hedgehogjim.wordpress.com.

Improving User Interaction with the Android Action Bar is the 7th course in the Pluralsight learning path for Android, and this month I am reviewing every course in this learning path.

Also in this series:

Part 1 – Improving User Interaction with the Android Action Bar
Part 2 – Managing the ActionBar Layout
Part 3 – ActionBar Navigation
Part 4 – ActionBar Interactivity

Managing the ActionBar Layout

Adding the ActionBar Layout

In the year 2016 and beyond, it’s pretty rare to see the old legacy menu.

However if you need to support very old devices with an API level below 11, this is what displays by default.

We automatically get the ActionBar when we set the holographic theme.

Demo: Adding the ActionBar Layout

We start with the code for simple app in IntelliJ IDEA.

It has an Activity class with two methods: an onCreate override and a private showToast function. It also has four menu items: options 1 to 3 and an exit item.

Jim shows us how to override onCreateOptionsMenu, adding a menu inflater and calling it’s inflate method. If the concept of a menu inflater is foreign to you, I recommend taking a look at one of Jim’s other courses, Building Apps with Android Studio.

We see how to add click handlers for each of the four menu options. When the app is run in the emulator, we see the old legacy menu.

Jim then adds an uses-sdk element into the manifest:

When we run it up again we see the look and feel is now a whole lot better.

Adding Actions to the ActionBar

We can provide hints to make menu items appear on the ActionBar.

Jim explains the following hints:

• always
• ifRoom
• withText
• Values

Jim recommends only using “always” very sparingly, preferring “ifRoom” much of the time.

We can also provide a hint for splitting the ActionBar into two parts.

Demo: Adding Actions to the ActionBar

In the main_menu.xml, Jim marks menu options 1 to 3 with “ifRoom” and the menu exit as “always”.

We see that only menu option 1 and menu exit display in portrait mode, but all four display when when switch to landscape mode.

Jim says it would be nice to add explanatory text when we are in landscape mode. He updates the attribute to include withText:

android:showAsAction="ifRoom|withText"

We see OPTION 1 OPTION 2 OPTION 3 displayed alongside each of the menu icons in the emulator.

We also see that it is easy to split the action bar:

android:uiOptions="splitActionBarWhenNarrow"

When in portrait mode, the menu items now appear at the bottom, rather than the top.

Controlling the ActionBar Appearance

Jim explains there is a lot we can do to configure the look of the ActionBar.

We can use Activity.getActionBar to retrieve a reference to the ActionBar, and draw images and text on there.

For rendering images we have the methods setIcon, setLogo and setBackgroundDrawable. A logo is a larger image than an Icon.

For rendering text we have setTitle, setSubtitle and setDisplayShowTitleEnabled.

Demo: Controlling the ActionBar Appearance

Jim adds a method setActionBarPSLogo, which calls getActionBar and setLogo.

We also see the creation of hideActionBarTitleAndSubtitle, and this calls setDisplayShowTitleEnabled with an argument of false.

Using these techniques we can give our app a polished and unique look.

Hiding the ActionBar

For some application we might not want the additional space that it takes up.

Jim gives the example of the Android Gallery app: we want to full our pictures full screen here with no ActionBar.

There are two ways to achieve this:

1. Programmatically hide the ActionBar
2. Statically hide the ActionBar

Jim explains the steps involved in each of these techniques.

We also learn about overlaying the ActionBar, and this can provide a better hide/show experience. Again there are different ways to do this, and Jim covers those here.

Demo: Hiding the ActionBar

Jim begins this demo writing a toggleActionBar method and then overriding onTouchEvent.

The onTouchEvent method typically fires every time a user touches the screen. In this example we filter to only ACTION_DOWN events.

In the emulator, we see the text jumping around.

To avoid this we set this up to use an overlay using an activity style:

true

We see that we should also update our manifest to use our new theme for our activity.

And we see there’s no more text jumping around.