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.
Selecting a Tab swops the fragments displaying in the activity
Here are two screenshots:
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
On a wide screen, the Tabs appear in the Action Bar
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.
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:
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:
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
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:
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:
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
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:
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
Are you using Eclipse or another IDE? Here's how you can use this project's Android Studio files.