Linux.com

Home Learn Linux Linux Tutorials Android App Development for Beginners: Navigation Tabs

Android App Development for Beginners: Navigation Tabs

If you're developing an Android app with multiple screens, a great navigation option is tabs. Tabs are particularly useful if your screens are all at a similar hierarchy, for example providing different views of similar information. If you have a very hierarchical structure, tabs may make less logical sense and you may prefer to click deeper into the activity.

android tabs navigationSince Android 3.0, the preferred way to do this is using Fragments link. Fragments allows you to break your Activities up into modular pieces, so you can combine and reuse multiple fragments in multiple activities. You can think of a Fragment as a kind of sub activity, managed in part by your main activity. We won't go into using Fragments in detail here, but we will look at using them to set up a basic tabbed app.

App and layout setup

Create a new project, TabTest, in Eclipse, remembering that it will need to be targeted at Android 3.0 or greater. (I used 4.0.3.) Make sure you use the "with Action Bar" theme.

Our main activity, TabTestActivity, sets up the ActionBar:

public class TabTestActivity extends Activity {
	ActionBar.Tab tab1, tab2, tab3;
	Fragment fragmentTab1 = new FragmentTab1();
	Fragment fragmentTab2 = new FragmentTab2();
	Fragment fragmentTab3 = new FragmentTab3();
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_tab_test);
        
        ActionBar actionBar = getActionBar();
        actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
        
        tab1 = actionBar.newTab().setText("1");
        tab2 = actionBar.newTab().setText("2");
        tab3 = actionBar.newTab().setText("3");
        
        tab1.setTabListener(new MyTabListener(fragmentTab1));
        tab2.setTabListener(new MyTabListener(fragmentTab2));
        tab3.setTabListener(new MyTabListener(fragmentTab3));
        
        actionBar.addTab(tab1);
        actionBar.addTab(tab2);
        actionBar.addTab(tab3);
    }

ActionBar.Tab is, as you'd expect, a tab in the Action Bar, and we create three of them. We also create three Fragments to hold the content of our three tabs. We'll create the FragmentTab subclasses in a moment.

We set up the layout as usual (see later section for the XML), grab the ActionBar, and set navigation mode to tabs. The other navigation modes are List, which provides a list menu, and Standard (just has a 'home' logo and title text). We then create three new tabs in the ActionBar, assigning them to our ActionBar.Tab class members, and set the title text for each one. You could also usesetIcon(R.drawable.image) to set an image icon instead.

Finally, we create a new TabListener for each one, and then add all three to the ActionBar. A TabListener provides a callback interface to handle actions applied to tabs, including focusing them, adding them, or removing them. ActionBar.TabListener is an interface, so we'll need to implement it with the custom MyTabListener class.

Note that as we're using android.app.Fragment (not android.app.v4.support.Fragment). We must also edit AndroidManifest.xml to set the minimum SDK to 13.

Creating the tabs

Having written the main activity, we need to create the tab classes. FragmentTab1.java looks like this:

public class FragmentTab1 extends Fragment {
  public View onCreateView(LayoutInflater inflater, ViewGroup container, 
                           Bundle savedInstanceState){
	View view = inflater.inflate(R.layout.tab, container, false);
	TextView textview = (TextView) view.findViewById(R.id.tabtextview);
	textview.setText(R.string.One);
	return view;
  }
}

This class must extend Fragment as it is treated as a Fragment when constructing the ActionBar. It's pretty straightforward; mostly just inflating its layout. We also set the content of the TextView (you'll need to edit values/strings.xml accordingly to provide this string resource). You could also make other changes to the tab, such as background colour, here.

FragmentTab2.java and FragmentTab3.java are nearly identical except that the text string will be R.string.Two and R.string.Three respectively. (You will notice that this could use a bit of refactoring to avoid code repetition. You could set up the Fragments to use the text strings as arguments in a Bundle, but that is beyond the scope of this tutorial.)

Creating the TabListener

The last bit of active code before we move onto the XML files is the MyTabListener class:

public class MyTabListener implements ActionBar.TabListener {
	Fragment fragment;
	
	public MyTabListener(Fragment fragment) {
		this.fragment = fragment;
	}
	
    public void onTabSelected(Tab tab, FragmentTransaction ft) {
		ft.replace(R.id.fragment_container, fragment);
	}
	
	public void onTabUnselected(Tab tab, FragmentTransaction ft) {
		ft.remove(fragment);
	}
	
	public void onTabReselected(Tab tab, FragmentTransaction ft) {
		// nothing done here
	}
}

FragmentTransaction provides the API for various fragment operations. Each set of changes to a fragment in your activity (removing it, replacing it with another fragment, adding it, and so on) is called a transaction and is managed through FragmentTransaction. As well as allowing you to perform a set of changes all at once, you can also add transactions to the back stack, which allows users to navigate backwards through changes they have made. However, in this case we're not directly managing any transactions ourselves, just adding something to a transaction which the main activity (and the ActionBar) will manage for us.

So for each callback the Listener gets, it adds the appropriate transaction to the FragmentTransaction passed in at the time. If the tab is selected, the current fragment replaces the old one in the fragment container, and if it's unselected, it is removed. This could of course be made much more complicated if your code requires it.

Layouts

Having written all the code, we need to create our XML layouts. The main layout, activity_tab_test.xml, is just a container for the tab fragments:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/fragment_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

This is the R.id.fragment_container referred to in the MyTabListener code, that each fragment will be replaced into as its tab is selected. It's just a single frame, covering the whole screen (the tab titles go in the ActionBar which has its own Android-generated layout).

Next we need the tab layout, tab.xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
 
    <TextView
        android:id="@+id/tabtextview" 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        />
 
</RelativeLayout>

Another simple layout: this one just has a single TextView, which we put our string resource into in the FragmentTab* classes. If you wanted your tabs to be more different from one another, you could create multiple layouts and use a different one in each tab class. This layout will be dropped into the FrameLayout of the main Activity XML.

All the pieces of your code are now together; run it and you should get a tabbed activity that looks a bit like the screen capture, above. 

As ever, this is a simple example of a structure that can get very complicated if you want it to. Experiment further and see what simple and more complex layout options you can set up, and how you can manage different aspects of your app in a tab context. Tabs when used appropriately can provide a great UI, so they're well worth getting to grips with.

This article concludes our series on Android App Development for Beginners. For the previous article in this series see:

How to Build a Contextual Menu in Android App Development

To start at the beginning visit:

Android Programming for Beginners: Part 1

 

Comments

Subscribe to Comments Feed
  • Pierre Goldstein Said:

    Well written, you're able to show that android development is not intimidating and I hope this article will encourage more people to dive into Android.

  • John Murphy Said:

    Nice and informative post. Your writing will inspire Android apps developers to do more innovative things in their projects.

  • designersx Said:

    Get your app development to fast track with DesignersX. Got a great App idea for biggest mobile platform & don’t know how to make it a reality? http://www.designersx.com/android-apps/

  • SteveM Said:

    I am getting errors on the lines Fragment fragmentTab1 = new FragmentTab1(); Fragment fragmentTab2 = new FragmentTab2(); Fragment fragmentTab3 = new FragmentTab3(); The errors are on the new FragmentTab1/2/3(); Any help would be greatly appreciated

  • Donna Said:

    Learn app development with the best tutorial on the web at http://easyappcreation.com

  • Neil Said:

    How does everyone else make it so difficult? This was really helpful, thanks.

  • zarri Said:

    hi! i have a question regarding minSdkVersion.i've tried to set minSdk =8 but the application doesnot run on my phone.my phone has android version 2.3 which is API level=10.what is possibly wrong?i would appreciate any help/assistance :)

  • Reno Said:

    Hi, Do you have an example to use button inside the tab. I create a button in the fragment class but nothing happen when i click on it. Thank you for your help.

  • Chrissi Said:

    Very nice, simple and useful, thank you :)

  • Dalton Said:

    I cannot get this to work. I have problem with a type mismatch within TabTestActivty: Fragment fragmentTab1 = new FragmentTab1(); Fragment fragmentTab2 = new FragmentTab2(); Fragment fragmentTab3 = new FragmentTab3(); Please help.

  • Alex Said:

    Please recheck code. It works like its written there.

  • Alex Said:

    Well, this is really nice to understand for beginners but you let out one serious problem this setup brings up. And this will take beginners long time to solve probably. Of course basic navigation like this works fine, as long as you not open another fragment from a main fragment of the tabs. Example: Youre on tab1 and theres a button that leads to page 2 on Tab 1. Now if you go to another tab and press the back button the content of both fragments will be mixed up because the tabhandler how it is now doesnt replace this fragment on bchange. Took me hours...

  • Ryan Said:

    I get a null pointer. ActionBar makes me feel retarded... lol

  • Edward Said:

    I'm android newbie. When APK starts, I got Exception when this line is run ft.replace(R.id.fragment_container, fragment); did fragment ready for replace? if i remark this line, exception won't appear when APK starts, but after one click of tab, i got exception at ft.remove(fragment); any suggestion?

  • Ainslie Said:

    This article is very useful for beginners. we can learn how to App and layout setup from this blog.

  • solomon Said:

    Google should hire you to write their documentation/samples :)

  • Karthik Said:

    As a beginner myself I found this to be amazingly simple tutorial to understand the basic concepts of tabs. It would have been perfect if I din't have to figure out quite some stuff to make it work like import statements, minSDK. I had to compare some other code samples I found elsewhere on the internet to finally fix all the issues. But this is by far the simplest and easy to grasp tutorial I found, even better than the one available in the google developer site. Thanks! One request/suggestion though; it would be great if you could also provide the source java and xml files for each tutorial for download so that we could check against them for any statements or naming that we might have gone wrong with.


Who we are ?

The Linux Foundation is a non-profit consortium dedicated to the growth of Linux.

More About the foundation...

Frequent Questions

Join / Linux Training / Board