Home > DeveloperSection > Articles > tab layout android application

tab layout android application


Android Android 
Ratings:
0 Comment(s)
 9739  View(s)
Rate this:

Using Tab layout in Android Application

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   

        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().setClass(this, AlbumActivity.class);   

        spec = tabHost.newTabSpec("albums").setIndicator("Albums",
                       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.
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.


Don't want to miss updates? Please click the below button!

Follow MindStick