Overcoming the Action Bar Tabs Deprecation in API 21

Tab_Example
With Lollipop’s new API 21 out now, google has stressed the need for uniformity and material design to be highly encouraged in the development and design of android applications. Action Bar Tab Integration – which is actually a default template in the Eclipse ADK – is very convenient to say the least but in terms of design, it can be much more intuitive. Regardless, It is now deprecated and full alternatives have been scarily  expressed. I’ll cover ways to rethink your layout entirely as well as ways to use non-deprecated layouts if you simply can’t let go.

Navigation with Back and Up:
When you use app’s that truly stand out, more often than not the navigation of the app makes all the difference. If you’re going to navigate through an app with tabs, you’re not going to differentiate your app from the thousands out there like that already. Ridding yourself of the tab layout is an easy way to separate yourself in terms of ingenuity and design quality. Of course, this is my opinion, but usually it doesn’t hurt to separate yourself from the competition if you can do it well.

Utilizing_hierarchal_views

Rant aside, you’re going to want to understand the flow of control using the App Icon as an “Up” button and the Back icon as a “Back” icon. The point of tabs is to create a multi-pane top level view of all the information you want a use in the “main” section of the app to see. If the app design is grounded in this idea, you might be able to single out one view that could easily branch to others with a swipe. Let’s say you wanted users to be able to view their friends lists and all conversations within a tab layout. Instead of choosing just to view both within tables, create a hierarchal view so the user can select a friend and see any relative conversation to that user.

 

Navigation Drawer:

Another one of my favorite concepts is a drawer you can pull out and slide away. It’s very easy to implement one of these and create a dynamic and useful interface for users at their whim. Many users want as much screen real-estate as possible on their phones and this is an easy way to allow complex navigation with a clearer interface.

navigation drawer sample

Implementation is very easy. Google documentation is very extensive on this as they seem to appreciate their use as well. If you’d like more information, here’s a link the first bit of code to get you started.

public class MainActivity extends Activity {
private String[] mPlanetTitles;
private DrawerLayout mDrawerLayout;
private ListView mDrawerList;
...

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

mPlanetTitles = getResources().getStringArray(R.array.planets_array);
mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
mDrawerList = (ListView) findViewById(R.id.left_drawer);

// Set the adapter for the list view
mDrawerList.setAdapter(new ArrayAdapter(this,
R.layout.drawer_list_item, mPlanetTitles));
// Set the list's click listener
mDrawerList.setOnItemClickListener(new DrawerItemClickListener());

...
}
}

Pager Tabs:
Classes – PagerTitleStrip->PagerTabStrip

The ViewPager is actually how you render and specify which tab’s are currently loaded in an Action Bar Tab setup. Fortunately, the ViewPager class isn’t deprecated and in Combination with the PagerTabStrip class, it’s very easy to give each View from the ViewPager a tab title and color. Adding them is as simple as adding a tab to a list of ViewPager classes you’ve implemented:

private List<SamplePagerItem> mTabs = new ArrayList<SamplePagerItem>();


@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

mTabs.add(new SamplePagerItem(
getString(R.string.tab_stream), // Title
Color.BLUE, // Indicator color
Color.GRAY // Divider color
));

PagerView Titles
What I love about these “tabs” is they are more like dynamic titles. They appear thinner and lighter than the traditional ActionBarTabs. Additionally if you want the application to appear similar on other devices you created, these look awfully similar to the “titled views” you can create in iOS. In fact, many adapt iPhone application use a very similar design concept as opposed to the thick, obtrusive ActionBarTabs-like tabs.

The only drawback to this is the inability for landscape mode to integrate the tabs into the ActionBar. Instead they will set below the ActionBar as they do in Portrait mode. Otherwise, if you’re looking to keep your tabs within googles non-deprecated classes, look no further.
Resources:

1.) http://developer.android.com/reference/android/support/v4/view/PagerTabStrip.html

2.) Implementing PagerTitleStrip Tabs –  https://www.youtube.com/watch?v=tRg_eDfQ8fk

3.)  http://developer.android.com/training/implementing-navigation/nav-drawer.html

4.) http://developer.android.com/design/patterns/navigation.html