Basic ActionBar – Part 2

In the previous article we got a basic action implemented usign ActionBar. In this article we’ll have a look at allowing the user to navigate though our app using the ActionBar.

Actionbar supports a couple of basic types of navigation, Tab-based and Dropdown-based. An example of tab-based navigation can be found in the Play Movies app:

Play Movies

Play Movies

Here tabs are used to select between Films and Personal Videos. Implementing tab navigation requires us to create some Fragment implementations which will be used for the content panel for each of the tabs. Each of these consists of a simple layout res/layout/frag1.xml:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="@string/frag1"/>

</RelativeLayout>

And a simple class which inflates this layout here’s Fragment1.java:

public class Fragment1 extends Fragment
{
	@Override
	public View onCreateView( LayoutInflater inflater, 
		ViewGroup container,
		Bundle savedInstanceState )
	{
		return inflater.inflate( R.layout.frag1, 
			container, false );
	}
}

The other class and layout are almost identical except the layout uses a different string resource for the text, and the class inflates the frag2 layout in stead of frag1. For a real app, these would obviously be more complex, but I am deliberately keeping the fragments simple so that we can focus on the navigation.

Next we have to create a android.app.ActionBar.TabListener instance as an inner class within MainActivity:

private class MyTabListener 
	implements ActionBar.TabListener
{
	private Fragment mFragment;
	private final Activity mActivity;
	private final String mFragName;

	public MyTabListener( Activity activity, 
		String fragName )
	{
		mActivity = activity;
		mFragName = fragName;
	}

	@Override
	public void onTabReselected( Tab tab, 
		FragmentTransaction ft )
	{
		// TODO Auto-generated method stub
	}

	@Override
	public void onTabSelected( Tab tab, 
		FragmentTransaction ft )
	{
		mFragment = Fragment.instantiate( mActivity, 
			mFragName );
		ft.add( android.R.id.content, mFragment );
	}

	@Override
	public void onTabUnselected( Tab tab, 
		FragmentTransaction ft )
	{
		ft.remove( mFragment );
		mFragment = null;
	}
}

This is responsible for creating a fragment and adding it to android.R.id.content which is the main content area.

Finally, we need to implement this within the onCreate method of MainActivity:

@Override
public void onCreate( Bundle savedInstanceState )
{
	super.onCreate( savedInstanceState );
		ActionBar ab = getActionBar();
	ab.setNavigationMode( ActionBar.NAVIGATION_MODE_TABS );

	Tab tab = ab.newTab()
		.setText( R.string.frag1 )
		.setTabListener( 
			new MyTabListener( this, 
				Fragment1.class.getName() ) );
	ab.addTab( tab );

	tab = ab.newTab()
		.setText( R.string.frag2 )
		.setTabListener( 
			new MyTabListener( this, 
				Fragment2.class.getName() ) );
	ab.addTab( tab );
}

This sets the required navigation mode, then creates and adds the two tabs with the string to display, and the classname of the relevant fragment. One thing to note: we do not call setContentView() as we normally would in onCreate(). This is because we are adding our Fragments directly to the content area by using android.R.id.content in our TabListener. If we want to do something a bit more complex, we can call setContentView() to add a custom layout, but we must change our TabListener to add the fragments to an emprty container within this custom layout instead. If we run this we get our tabs which switch between the two fragments that we created:

Tab Navigation

Tab Navigation

One thing to note is that, because there wasn’t much space, the tab controls were split on to a second line. On a larger device, or if we switch to lanscape mode, there will be more space, and the ActionBar will make use of this by combining everything on to a single line:

Tab navigation (Landscape)

Tab navigation (Landscape)

On ICS (Android 4.0) and later, it is possible to control this using the uiOptions="splitActionBarWhenNarrow" attribute on this or elements in your manifest.

In the next article we’ll have a look at drop-down based navigation. The source code for this article can be found here.

© 2012, Mark Allison. All rights reserved. This article originally appeared on Styling Android.

Portions of this page are modifications based on work created and shared by Google and used according to terms described in the Creative Commons 3.0 Attribution License

Send the author to the moon!

Creative Commons License
Basic ActionBar – Part 2 by Styling Android, unless otherwise expressly stated, is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License. Terms and conditions beyond the scope of this license may be available at blog.stylingandroid.com.

Tags:

14 Responses to “Basic ActionBar – Part 2”

  1. Jake Wharton says:

    Note, the splitActionBarWhenNarrow option controls placement of action items, not the tab bar. The two-line version of action bar tabs is referred to as stacked not split. This aligns with the theme attributes and APIs for setting the respective backgrounds: background, backgroundStacked, and backgroundSplit.

  2. Hello, I am relatively new to android development. I figured out the ActionBarSherlock library only recently.
    Even then, I was able to implement your tutorial using the ActionBarSherlock on android 2.x. Great simple tutorial :)

    I have one simple problem with this though. Is there a way to return back to the state in which you left your tab. Like suppose, I have a list in tab 1 and I scroll down, I want to return to the same position I left my list in when I switched to tab2 and then back to tab 1.

    I know I could have hidden containers which have the fragment active in them and just bring them forward rather than replacing the fragments, but I see this as a very ineffective solution. I am hoping someone can do this in a more elegant way, more or less like the addToBackStack() method does for navigating between fragments.

    • Mark Allison says:

      The easiest way of doing this is by using the Instance State mechanism build in to Android Activity & Fragment life cycles. In onSaveInstanceState() perisist the current ListView selection or scroll position in the bundle, then you can read it back from the Bundle that is passed to onCreate next time your Fragment or Activity is created.

  3. Miles Egan says:

    Thanks for publishing these tutorials. The Android docs in this area are a little sparse but this is a really important topic for anybody writing modern Android apps.

  4. Gabriele Mariotti says:

    In example code, in MyTabListener class, it shows:

    @Override
    public void onTabReselected

    It should be:
    public void onTabReselected
    without @Override

    The same thing for other methods.

  5. Gabriele Mariotti says:

    I was wrong.
    I am using 1.6, but I find the mistake in eclipse settings in annotation section.
    Thanks.

  6. Pad says:

    Why is the TextViews displayed overlapped on each other when I switch back and forth between landscape and portrait and changed the selected tab in between.

  7. David says:

    HI,

    Thanks for these tutorials. As others have pointed out, there is scant little information dealing with the action bar.

    Reading this tutorial, and viewing the associated source code, the obvious question that jumps out at me is, “How and when is the main layout resource being inflated?”. A reference to R.layout.main is nowhere to be found in your code.

    The reason I bring this up is because I’m having trouble getting any type of styling incorporated into my action bar (as shown in your subsequent tutorials, and I am wondering if the way I’m inflating my layout and instantiating my fragments is the reason.

    For what it’s worth, my main.xml is a relative layout containing a banner ad view aligned at the bottom of the parent, and a linear layout above it that functions as the container for the fragment. (your example shows the container as a frame). In my main activity, I set the content view to main. Create the action bar and fragments. In my onTabSelected method, I perform an ft.add(R.id.fragment_container, mFragment, null).

    Like I said, the tabs and navigation all work great, but I can’t get styling elements to appear. I’m not giving up yet, but I’m curious as to whether the way I’m placing my fragments in my main activity is the cause of the missing style.

  8. Dear Mark,

    I want to talk one question with u,

    how does set position ActionBar.NAVIGATION_MODE_TABS in the bottom?

    sorry my english is poor…

    thanks..

  9. powder366 says:

    The action goes at the bottom, but is it possible to put the tabs at the bottom?

Leave a Reply