Please enable JavaScript to view the comments powered by Disqus.

Tab Layout

A - Introduction about Tab Layout

To implement the content of a tab, we have 2 ways:

  • Using tab to navigate among views in a same activity
  • Using tab to navigate among activities

In this post, I’ll show you the second way.

B - Step by step demo

Firstly, create a new project named TabLayout

Next, create 3 different activities: ArtistActivity, SongActivity, AlbumActivity. Each of these classes will represent for each tab.

In each class, we add a TextView to display the name of selected tab.

Don’t forget to add <activity> tags into AndroidManifest.xml file for every new activity that you added into the project

Each tab will have a icon image. Those images will be stored in res/drawable/ folder. The tab’s icon will have 2 images for 2 status: selected and non-selected - it will be defined in an selector xml file (stored in res/drawable/ folder too):

Move on to the  main.xml file with simple layout and components:

The xml file above describes the common structure of a Tab Layout.

Every TabHost requires TabWidget and FrameLayout inside.

NOTE:

The id of  TabWidget and FrameLayout must be tabs and tabcontent. Those are default id that TabHost will reference to.

 

Next, let each activity class extends the TabActivity super class:

Tab Layout

Implement the onCreate() method:

Tab Layout

The getTabHost() was used to reference to the TabHost layout.

Next, the TabHost.TabSpec object was created to define the properties of each tabs via newTabSpec(String) method.

To set the text and icon for each tabs, we use setIndicator(CharSequence, Drawable) method.

Finally, to set the content, the activity for each tabs, we called setContent(Intent) method.

At the bottom of the method, setCurrentTab(int) method was called to set the default tab.

Last but not least, set the theme for activity is Theme.NoTitleBar.

Tab Layout

Run time!!!

Tab Layout

C - Download Source Code Tab Layout

http://www.mediafire.com/?x9h5b8t8koy75eq