Tab Layout in android

Tab Layout in android/Tab activity in android

Using tab layout, we can wrap multiple views in a single window and navigate through these views using tabs. Tab host, Tab widget and a frame layout are the important components used in the tab layout.

In this project, we are creating three tabs named Artist, Album and Songs, and while clicking on each of these tabs, different page (means activity) will be loaded.

First create a new project and add a tab host to your xml like this

<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>

Some rules that we must use while implementing tab activity is

 If the activity is of type TabActivity then the TabHost must have the id @android:id/tabhost.

·         The TabWidget must have the id @android:id/tabs.

·         The FrameLayout must have the id @android:id/tabcontent.

Then, create three activities. One for Songs, one for Albums and other for Artist. Then load textview dynamically for each activity. (For easiness, otherwise create three xml for each of these activities)

  TextView textview = new TextView(this);

        textview.setText("This is the Artists tab");

        setContentView(textview);

Now create a main activity and extends the class with TabActivty instead of Activity.

public class HelloTabWidget extends TabActivity {

Then do the following codes

Resources res = getResources(); // Resource object to get Drawables

    TabHost tabHost = getTabHost();  // The activity TabHost

    TabHost.TabSpec spec;  // Resusable 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, ArtistsActivity.class);



    // Initialize a TabSpec for each tab and add it to the TabHost

    spec = tabHost.newTabSpec("artists").setIndicator("Artists",

                      res.getDrawable(R.drawable.ic_tab_artists))

                  .setContent(intent);

    tabHost.addTab(spec);

A reference to the TabHost is first captured with getTabHost(). Then, for each tab, a TabHost.TabSpec is created to define the tab properties. The newTabSpec(String) method creates a new TabHost.TabSpec identified by the given string tag. For each TabHost.TabSpec, setIndicator(CharSequence, Drawable) is called to set the text and icon for the tab, and setContent(Intent) is called to specify the Intent to open the appropriate Activity. EachTabHost.TabSpec is then added to the TabHost by calling addTab(TabHost.TabSpec).

At the very end, setCurrentTab(int) opens the tab to be displayed by default, specified by the index position of the tab.

And run the application

main.xml

<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>

ArtistsActivity.java

public class ArtistsActivity extends Activity {

    public void onCreate(Bundle savedInstanceState) {


       super.onCreate(savedInstanceState);

        TextView textview = new TextView(this);

        textview.setText("This is the Artists tab");

        setContentView(textview);

    }

}

AlbumActivity,java

public class AlbumsActivity extends Activity {
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
       TextView textview = new TextView(this);
        textview.setText("This is the Artists tab");
        setContentView(textview);
    }
}

SongsActivity.java

public class SongssActivity extends Activity {
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        TextView textview = new TextView(this);
        textview.setText("This is the Artists tab");
        setContentView(textview);
    }
}

 HelloTabWidget

public class HelloTabWidget extends TabActivity {

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;  // Resusable 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(this, ArtistsActivity.class);

    // Initialize a TabSpec for each tab and add it to the TabHost

    spec = tabHost.newTabSpec("artists").setIndicator("Artists",

                      res.getDrawable(R.drawable.ic_tab_artists))

                  .setContent(intent);

    tabHost.addTab(spec);

    // Do the same for the other tabs

    intent = new Intent(this, AlbumsActivity.class);

    spec = tabHost.newTabSpec("albums").setIndicator("Albums",

                      res.getDrawable(R.drawable.ic_tab_albums))

                  .setContent(intent);

    tabHost.addTab(spec);



    intent = new Intent(this, SongsActivity.class);

    spec = tabHost.newTabSpec("songs").setIndicator("Songs",

                      res.getDrawable(R.drawable.ic_tab_songs))

                  .setContent(intent);

    tabHost.addTab(spec);



    tabHost.setCurrentTab(2);

}

(note:::Add all the activities in the manifest file….)

RESULT

See More