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:
Implement the onCreate() method:
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.
Run time!!!
