Welcome to Part 3 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
ActionBar Navigation
Tabbed Navigation
Jim describes this as a 3 phase process. He says it’s easy, but a bit tedious.
He explains each of these phases.
- Put the ActionBar into tabbed-navigation mode
- Create an ActionBar.Tab instance for each tab
- Add each ActionBar.Tab to the ActionBar
Next Jim introduces the TabListener.
Note: Since this course was recorded, the TabListener has been deprecated.
In API level 21, the Toolbar was introduced. A Toolbar is a generalization of ActionBar for use within application layouts.
While an action bar is traditionally part of an Activity’s opaque window decor controlled by the framework, a Toolbar may be placed at any arbitrary level of nesting within a view hierarchy.
Google developer Chris Banes has written a blog post introducing the Toolbar.
Jim says there is no standard TabListener implementation. He discusses the methods:
Demo: Tabbed Navigation
We start with an activity with some menu options. Each option launches another activity. Jim explains all of the code involved here.
The first Activity we look at is ActivityTabbed and there isn’t much code here.
Jim says all of the viewable content is within Tabs and we use fragments for that content.
The first fragment we see is called CourseIntentsFragment.
Jim says once we get through this module we will have a default implementation of the TabListener.
We see how to implement this in our SimpleTabListener.java class, including our implementations for onTabSelected, onTabUnselected and onTabReselected.
Then we go to ActivityTabbed which is the Activity that we want to show our tabs on. We go through the three phases that were introduced in the previous lesson.
Demo: Tabbed Navigation Factory Helper
Jim looks at ActivityTabbed.java and remarks “This is a LOT of boiler plate code!”
Fortunately we can simplify this quite easily. We can use a couple of arrays: one holding text for the tab, and one holding the fragment class names.
In arrays.xml we see two string-array elements, and each has a list of items inside of them.
In SimpleTabListener.java, Jim uncomments a static method called SetupTabbedNavigation and starts building it out.
This method takes the containing activity and ids for the display name resource and the fragment class name resource.
With this method written we go back to our ActivityTabbed onCreate method and replace all of our boiler plate code with just one line:
SimpleTabListener.SetupTabbedNavigation(this, R.array.courseList, R.array.courseFragmentNames);
Partial Screen Tabbing
If desired, we can use Tabs to control only a portion of the display area.
This is because we can associate a tab with any ViewGroup. The example that Jim gives here uses a Linear Layout.
For more information on Layouts see Android Layout Fundamentals.
Demo: Partial Screen Tabbing
Jim demonstrates how we can set this up so that the tabs only control part of the screen.
We start at ActivityTabbedPartial.java, which just has a simple onCreate method. It uses the layout called “activity_part_selectable_part_fixed”.
We see this layout definition has two LinearLayouts.
Back in SimpleTabListener in the onTabSelected method we change it to be associated with one of these linear layouts.
At the end of this lesson, we see the code running in the emulator. We see that changing the tab changes the text in the top part of the screen without affecting the bottom part of the screen.
Controlling Tab Placement
The Tab placement is determined by the available space. When there’s enough space it can go on the primary action bar.
When space is limited, the tabs can either go underneath the primary action bar, or they can be placed at the top and the menu options can be placed at the bottom.
Demo: Controlling Tab Placement
We begin with an example showing the app running in portrait mode and are tabs underneath the primary action bar.
The first thing we do is get the menus off the top and down to the bottom, and we do that with the uiOptions attribute:
android:uiOptions="splitActionBarWhenNarrow"
Next we see how to write an onToggleTitleClick method, initially just to hide the primary action bar, and then improved to toggle visibility on and off.
This involves using getDisplayOptions to return a bitmask and using a bitwise & operation to test for the bit that we are interested in.
Scrolling Tabs
Jim says tabs automatically become scrollable when there’s insufficient space for them on a single screen.
List Navigation
There are many scenarios where we may want a drop-down list of screens.
SpinnerAdapter is useful for placing a drop-down list on our action bar.
We can use a variety of sources, such as a file or an array, and each list item represents a screen: when we click on it, it jumps directly to that screen.
Each screen is implemented as a Fragment.
Jim explains some of the details of using ActionBar.OnNavigationListener for changing screens.
Demo: List Navigation
We start off with a SimpleNavigationListener and make it implement ActionBar.OnNavigationListener
In this class Jim demonstrates how to code a method called onNavigationItemSelected, which displays the appropriate fragment when we click on an item in our drop down list.
As we saw with the Tabbing demos earlier, we want to make a factory for this so that we reuse code as much as possible, and we do this with static method SetupListNavigation.
Some of the code is this same as last time, but this time we are using an array adapter instead of string arrays. More code is required here than we saw in the Tabbing demo.
In the emulator we see a drop-down list on the ActionBar and when we click it, it shows a list of two of Jim’s other Pluralsight Android courses.
When we click on an option it changes the screen to show us a description for that course.
Demo: Partial Screen List Navigation
We look back at the ActivityListNavigationPartial.java and activity_part_selectable_part_fixed.xml that we created earlier in the course.
Jim demonstrates how to implement this kind of functionality with our list navigation.
We see how to build out our SimpleNavigationListener, using a viewGroupId in each of the methods and passing this value in from ActivityListNavigation.java
When we run it we see that selecting a new drop down item changes just the area at the top, leaving the content at the bottom the same as before.
We also have an option for full screen list navigation that works the same as we previously implemented.
Jim says the key takeaway is once we have our helper methods implemented, it is very easy to implement a variety of types of navigation into our apps, and that these provide a great user experience.