Tab navigation tutorial

  • Written by  Clive

Using Tab navigation in your apps

Android Tabs navigation icon

Tab buttons are displayed in the Action Bar. You can also use images instead of buttons or even your own custom views.

Tabs are designed to work with fragments. Use them to swop fragments in your activities.

We’ll show you how to use Tabs to swop fragments in your activity.

Android Tab buttons

Tabs are buttons on the Action Bar. They’re great for swopping fragments

Our tutorial app

Our tutorial app has one activity and three fragments.

We use Tabs in the action bar to swop the fragments in and out of the activity.

Android tabs diagram

Selecting a Tab swops the fragments displaying in the activity

Here are two screenshots:

Android Tabs tutorial

On a narrow screen, the Tabs are in a separate, stacked action bar, below the Action Bar proper. Tab Two is selected and displays Fragment Two

Android Tabs tutorial

On a wide screen, the Tabs appear in the Action Bar

The Activity

We display three Tabs in our activity’s Action Bar. Selecting a Tab displays a fragment in the activity.

We’re using the Support Library so that we can target Android 2.1 (API Level 7) and higher devices. Make sure that you import the Support Library classes.

Android Tabs activity Iimports

We let our activity extend the ActionBarActivity class. This enables us to display the Action Bar at the top of the window

You’ll also need to make sure that you’re using the AppCompat theme.

You may want to have a look at this tutorial, Using Android’s Action Bar for more on the Action Bar.

Setting up the Tabs

We’ve got three tabs that are displayed in the action bar.

Here’s the code for setting up the tabs:

Android Tabs create

Get an instance of our Action Bar, set the navigation mode to Tabs, disable displaying the activity’s title and then create the Tab objects

Note the following:

  • getSupportActionBar – we’re using the Support Library so use getSupportActionBar() to get an instance of the Action Bar
  • setNavigationMode – we want to use Tab navigation so we set the navigation mode here, passing NAVIGATION_MODE_TABS as the parameter
  • setDisplayShowTitleEnabled – we don’t want to show the activity’s title in the action bar so we disable this option
  • newTab – we create the three Tab objects. They will only appear in the Action Bar when we add them to the Action Bar

Creating the fragment

We’ve got three fragments. Clicking a Tab, displays one of the fragments in the activity.

Have you read this article yet, Dynamic layouts using fragments?

Here’s how we create one of the fragments:

Android Tabs create fragment

Create a fragment object, set the text to display and the interface to deal with Tab selections

Note the following:

  • firstFragment – our fragment object
  • setText – sets the text to display on this Tab
  • setContentDescription – sets the description of this Tab’s content. It’s used in accessibility support
  • setTabListener – sets the listener to handle the Tab selections

Android Tabs add tabs

Add the Tabs to the Action Bar

The Activity layout

We’ve got one activity. Its layout has a single FrameLayout view. We’ll use this as the container for our fragments.

Here’s the code:

Android Tabs container FrameLayout Layout

We use a FrameLayout as our fragment container

The listener Interface

We use the TabListener interface to handle the Tab selections.

Remember, we’re using the Support Library so make sure that you’re using the correct imports.

Here’s the first bit of code:

Android Tabs listener interface

We use this interface for swopping the fragments when the Tabs are selected

The interface has three methods:

  • onTabSelected – called when a Tab has been selected. This is where we swop the currently displayed fragment with the new one associated with the selected Tab
  • onTabUnselected – called when the Tab leaves the selected state. We remove whichever fragment is currently displayed
  • onTabReselected – called when the user selects a Tab that is already selected

The Fragments

We’ve got three fragments. Each is associated with a Tab button. Selecting a Tab displays its associated fragment.

Our fragments display a text view and an image.

Remember, we’re using the Support Library so make sure that you import the correct class.

Here’s the code for one of our fragment classes:

Android Tabs fragment

We create our fragment class by extending the Fragment class. Make sure that you import the Support Library’s Fragment class

Note the following:

All three fragments are the same except for their layouts.

  • onCreateView – this method creates the fragment’s User Interface view. It displays the views contained in the layout file
  • inflate – we inflate the fragment’s layout file. There are three parameters:
    • the layout file to inflate
    • the container into which we inflate the layout file. This is the FrameLayout in the activity’s layout file
    • whether or not the inflated view should be attached to the container. Ours is not so we pass false

The Fragments layouts

All of our fragments have the same basic layout. This is the layout that is inflated when the fragment’s view is created.

Our fragment layouts consist of a main Relative layout containing an image view and a text view. These are inflated and displayed in the activity.

I hope that you have found this tutorial helpful.

You may also be interested in Using menus in your apps: a tutorial.

This tutorial was created using Android Studio. You can download the project files here Download icon

Are you using Eclipse or another IDE? Here's how you can use this project's Android Studio files.