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 Mar-23-2018 02:07:49 AM

Leave Comment