Android Multiple Tab Layout Example

In this post, you can learn android source code example on tabs in android and about designing multiple tab layout in android. This functionality is mainly used in many android professional application development and you can have a clear observation and description on how to design it with the below example.

1. Create TabLayout_Activity.java file.

TabLayout_Activity.java

package com.asce;

import com.asce.R;

import android.app.TabActivity;
import android.content.Intent;
import android.os.Bundle;
import android.widget.TabHost;
import android.widget.TabHost.TabSpec;

@SuppressWarnings("deprecation")
public class TabLayout_Activity extends TabActivity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        TabHost tabHost = getTabHost();
        
        // Tab for Tab A
        TabSpec a = tabHost.newTabSpec("Tab A");
        // Title and Icon for Tab
        a.setIndicator("Tab A", getResources().getDrawable(R.drawable.tab_a));
        Intent a_Intent = new Intent(this, A_Activity.class);
        a.setContent(a_Intent);
        
        // Tab for Tab B
        TabSpec b = tabHost.newTabSpec("Tab B");
        b.setIndicator("Tab B", getResources().getDrawable(R.drawable.tab_b));
        Intent b_Intent = new Intent(this, B_Activity.class);
        b.setContent(b_Intent);
        
        // Adding all TabSpec to TabHost
        tabHost.addTab(a); // Adding Tab A tab
        tabHost.addTab(b); // Adding Tab B tab
    }

}

2. Create A_Activity.java

A_Activity.java

package com.asce;

import com.asce.R;

import android.app.Activity;
import android.os.Bundle;

public class A_Activity extends Activity {
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.a_layout);
    }

}

3. Create A_Activity.java

B_Activity.java

package com.asce;

import com.asce.R;

import android.app.Activity;
import android.os.Bundle;

public class B_Activity extends Activity {
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.b_layout);    }

}

4. Create tab_a.xml in res - drawable folder

tab_a.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- When selected, use grey -->
    <item android:drawable="@drawable/tab_a_grey"
          android:state_selected="true" />
    <!-- When not selected, use white-->
    <item android:drawable="@drawable/tab_a_white" />

</selector>

tab_a_grey & tab_b_grey are images in drawable folder

Similarly create for tab_b.xml

5. Create a_layout.xml in layout folder

a_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical"
  android:layout_width="match_parent"
  android:layout_height="match_parent">
  
  <!-- Screen Design for Tab A -->
  <TextView android:text="Contents of Tab A here"
  android:padding="15dip"
  android:textSize="18dip"
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"/>
    

</LinearLayout>

Similarly create for b_layout.xml.

6. Now your main.xml.

main.xml

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

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

    </LinearLayout>

</TabHost>

7. Your AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>

<manifest xmlns:android="http://schemas.android.com/apk/res/android"

      package="com.asce"

      android:versionCode="1"

      android:versionName="1.0">

    <uses-sdk android:minSdkVersion="8" />

    <application android:icon="@drawable/icon" android:label="@string/app_name">

        <activity android:name="com.asce.TabLayout_Activity"

                  android:label="@string/app_name">

            <intent-filter>

                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />

            </intent-filter>

        </activity>

        

        <!--  Tab A Activity -->

        <activity android:name="com.asce.A_Activity" />

        

        <!--  Tab B Activity -->

        <activity android:name="com.asce.B_Activity" />

      

    </application>

</manifest>