Android Tab | Android Tab example | Using Android example

Home >> Miscellaneous

In this tutorial we shall be covering Android's TabActivity API with the help
of an example.

Final screen of this example would look like the below image:

Tab view of this application showing two different sections as 
different categories.











Following image shows screen after clicking second tab:


This example Tab Layout for initial screen layout as follows:

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



Apart from the above main.xml file for the the main TabHost and TabWidget 
components, we have four other Android layout XML files with appropriate
usage as mentioned below:

tab1header.xml - for the layout of Tab 1 
tab2header.xml - for the layout of Tab 2
tab1layout.xml - for the layout of Tab 1 content view 
tab2layout.xml - for the layout of Tab 2 content view.


tab1header.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:background="#ffffff">
      <ImageView android:id="@+id/camera1" android:src="@drawable/camera1" 
                 android:layout_width="wrap_content" 
                 android:layout_height="wrap_content" />

      <TextView android:text="Cameras" 
                android:textColor="#000000" 
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"/>              
</LinearLayout>


tab1layout.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:background="#ffee33">
  <TableLayout   android:layout_width="fill_parent"
  android:layout_height="fill_parent"> 
  <TableRow   android:layout_width="fill_parent"
  android:layout_height="fill_parent">
    <TextView android:text="Cameras" 
              android:textColor="#000000" android:layout_width="wrap_content"
                                          android:layout_height="wrap_content"/>
  </TableRow>
  <TableRow android:layout_width="fill_parent"
  android:layout_height="fill_parent">
  <LinearLayout android:layout_width="fill_parent"
  android:layout_height="fill_parent">                                               
  <ImageView android:src="@drawable/camera1"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:paddingRight="2px"/>
  <ImageView android:src="@drawable/camera2"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:paddingRight="2px"/>
  <ImageView android:src="@drawable/camera3"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:paddingRight="2px"/>
  <ImageView android:src="@drawable/camera4"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:paddingRight="2px"/>
             </LinearLayout>
             </TableRow>
  </TableLayout>
</LinearLayout>





tab2header.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:background="#ffffff">
      <ImageView android:id="@+id/cupboards" 
                 android:src="@drawable/cupboards1" 
                 android:layout_width="wrap_content" 
                 android:layout_height="wrap_content" />
      <View android:layout_width="20px" android:layout_height="20px"/>                         
      <TextView android:text="Cup-Boards" 
                android:textColor="#000000" android:layout_width="wrap_content"
                                            android:layout_height="wrap_content"/>                          
  
</LinearLayout>



tab2layout.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:id="@+id/tab2layout"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:background="#ffee33">
  <TextView android:text="CupBoards" 
            android:textColor="#000000" 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
  <ImageView android:src="@drawable/cupboards1"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:paddingRight="2px"/>
  <ImageView android:src="@drawable/cupboards2"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:paddingRight="2px"/>
  <ImageView android:src="@drawable/cupboards3"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:paddingRight="2px"/>
  <ImageView android:src="@drawable/cupboards4"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:paddingRight="2px"/>
                                               
</LinearLayout>



Using Android API such as TabActivity class and TabHost.TabContentFactory interface
files, those can be extended by example specific Java class files such as 
"AdvanceTabExample" extends TabActivity and "TabContentLayout"
implements TabHost.TabContentFactory interface file.

AdvanceTabExample.java
package com.techienjoy.example.tab;

import android.app.Activity;
import android.app.TabActivity;
import android.content.Context;
import android.content.res.Resources;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TabHost;
import android.widget.TabHost.TabSpec;

public class AdvanceTabExample extends TabActivity {
	LayoutInflater layoutInflater = null;
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        layoutInflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        TabHost tabHost = getTabHost();
        LinearLayout tab1Layout = (LinearLayout) layoutInflater.inflate(R.layout.tab1header, null);
        LinearLayout tab2Layout = (LinearLayout) layoutInflater.inflate(R.layout.tab2header, null);
        TabHost.TabSpec tab1spec = tabHost.newTabSpec("tabOneSpec");
        
        ImageView imgView = new ImageView(this);
        imgView.setBackgroundResource(R.drawable.camerascategory);
        tab1spec.setIndicator("Cameras", imgView.getBackground());
        
        //tab1spec.setContent(R.id.tab1);
        tab1spec.setContent(new TabContentLayout());
        TabHost.TabSpec tab2spec = tabHost.newTabSpec("tabTwoSpec");
        tab2spec.setContent(new TabContentLayout());
        ImageView imgView1 = new ImageView(this);
        imgView1.setBackgroundResource(R.drawable.cupboards);
        tab2spec.setIndicator("Cup Boards", imgView1.getBackground());
        
        
        tabHost.addTab(tab1spec);
        tabHost.addTab(tab2spec);
    }
    private class TabContentLayout implements TabHost.TabContentFactory {

		@Override
		public View createTabContent(String tag) {
			View view = null;
			if(tag.equals("tabOneSpec")) {
				view = (LinearLayout) layoutInflater.inflate(R.layout.tab1layout, null);
			}
			if(tag.equals("tabTwoSpec")) {
				view = (LinearLayout) layoutInflater.inflate(R.layout.tab2layout, null);
			}
			return view;
		}
    	
    }
}


Once all these files are placed in folders as appropriate within Eclipse 
Workspace and Android Project, Java files compiled and *.apk file created. 
Then this APK file can be published to Android Emulator for displaying 
application at runtime.


If you would like to share your thoughts on this, please write to us @
usingframeworks @ gmail dot com
If anything missed out , please let me know at techienjoy at yahoo . com