To create a tabbed UI, you need to use a TabHost and a TabWidget. The TabHost must be the root node for the layout, which contains both the TabWidget for displaying the tabs and a FrameLayout for displaying the tab content.

In this article I am going to explain how to create tabbed UI by using separate Activity for each tab.

Create a project

  •  Start a new project named TabLayoutDemo.
  •  First, create three separate Activity classes in your project (src/package): ArtistActivity, AlbumActivity and SongsActivity. Each activity represent a separate tab. Make each one display a simple message by using TextView as shown below:
ArtistActivity:
import android.app.Activity;
import android.os.Bundle;
import android.widget.TextView;
 
public class ArtistActivity extends Activity {
@Override
publicvoid onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    TextView textview = new TextView(this);
    textview.setText("This is the Artists tab");
    setContentView(textview);
}
}


AlbumActivity:

import android.app.Activity;
import android.os.Bundle;
import android.widget.TextView;
public class AlbumActivity extends Activity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        TextView textview = new TextView(this);       
        textview.setText("This is the Albums tab");   
        setContentView(textview);   
    }
}
SongsActivity:

 

import android.app.Activity;
import android.os.Bundle;
import android.widget.TextView;
 
public class SongsActivity extends Activity {
 
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        TextView textview = new TextView(this);       
        textview.setText("This is the Songs tab");     
        setContentView(textview);
    }
}

 

·         Open AndroidManifest.xml and add the activities created above in the application tag.

·         Add the NoTitleBar theme to the TabLayoutDemoActivity activity tag. This will remove the default application title from the top of the layout.

 

     <application android:icon="@drawable/icon" android:label="@string/app_name">
        <activity android:name=".TabLayoutDemoActivity"
                   android:theme="@android:style/Theme.NoTitleBar"
                  android:label="@string/app_name">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
              <activity android:name=".ArtistActivity"
                  android:label="@string/app_name">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity android:name=".AlbumActivity"
                  android:label="@string/app_name">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity android:name=".SongsActivity"
                  android:label="@string/app_name">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

 

·      Open res/layout/main.xml folder and add the following code in the main.xml file:

 

<?xml  version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"   
               android:id="@android:id/tabhost"   
               android:layout_width="fill_parent"   
               android:layout_height="fill_parent">   
              <LinearLayout android:orientation="vertical"       
                           android:layout_width="fill_parent"       
                           android:layout_height="fill_parent"       
                           android:padding="5dp">       
              <TabWidget android:id="@android:id/tabs"         
                          android:layout_width="fill_parent"           
                          android:layout_height="wrap_content" />       
              <FrameLayout android:id="@android:id/tabcontent"          
                           android:layout_width="fill_parent"           
                           android:layout_height="fill_parent"           
                           android:padding="5dp" />   
              </LinearLayout>
</TabHost>

 

 

·         Save the icon images (ic_tab_artists_grey.png, ic_tab_artists_white.png) in your project res/drawable/ directory.

·         Create a three XML file in res/drawable/ named ic_tab_artists.xml, ic_tab_albums.xml, ic_tab_songs.xml and insert the following code in all three xml files:

 

<?xml  version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">   
    <item android:drawable="@drawable/ic_tab_artists_grey"        
          android:state_selected="true" /> 
    <item android:drawable="@drawable/ic_tab_artists_white" />
</selector>

 

·         Now open TabLayoutDemoActivity.java and make it extend TabActivity. Use the following code for the onCreate() method:

 

import android.app.TabActivity;
import android.content.Intent;
import android.content.res.Resources;
import android.os.Bundle;
import android.widget.TabHost;
 
public class TabLayoutDemoActivity extends TabActivity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        Resources res = getResources(); // Resource object to get Drawables   
        TabHost tabHost = getTabHost(); // The activity TabHost   
        TabHost.TabSpec spec;  // Reusable TabSpec for each tab  
        Intent intent; // Reusable Intent for each tab   
        // Create an Intent to launch an Activity for the tab (to be reused)   
        intent = new Intent().setClass(this, ArtistActivity.class);   //Initialize a  
                                      TabSpec for each tab and add it to the TabHost   
                                      TabSpec for each tab and add it to the TabHost   
        spec = tabHost.newTabSpec("artists").setIndicator("Artists",  
                      res.getDrawable(R.drawable.
                      res.getDrawable(R.drawable.ic_tab_artists)).setContent(intent);   
        tabHost.addTab(spec);    // Do the same for the other tabs   
        intent = new Intent().setClass(this, AlbumActivity.class);   
        spec = tabHost.newTabSpec("albums").setIndicator("Albums",
                       res.getDrawable(R.drawable.
                       res.getDrawable(R.drawable.ic_tab_albums)).setContent(intent);   
        tabHost.addTab(spec);   
        intent = new Intent().setClass(this, SongsActivity.class);   
        spec = tabHost.newTabSpec("songs").setIndicator("Songs",
                        res.getDrawable(R.drawable.
                        res.getDrawable(R.drawable.ic_tab_songs)).setContent(intent);   
        tabHost.addTab(spec);   
        tabHost.setCurrentTab(2);
    }
}

·         Run the application.
Your application should look like this

Using Tab layout in Android Application

 

When you select a tab, it will display the text in the frame layout.


  Modified On Nov-30-2017 02:13:27 AM

Leave Comment