How to create tabs in android application

How to create Tabs in android application

In this tutorial we will learn how to create tabs in android application and setting the height of the tabs.

Application will looks like this - 

• Create a new android project.
• Create 3 different layout and 3 different activity as given below - 

          Layouts - 

          tab1_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="fill_parent"

               android:layout_height="fill_parent" >

              < TextView android:text="Tab 1"

                  android:padding="15dip"

                   android:textSize="18dip"

                   android:layout_width="fill_parent"

                   android:layout_height="wrap_content" />

          < /LinearLayout>

          tab2_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="fill_parent"

                android:layout_height="fill_parent">

               < TextView android:text="Tab 2"

                   android:padding="15dip"

                   android:textSize="18dip"

                   android:layout_width="fill_parent"

                   android:layout_height="wrap_content"/>

            < /LinearLayout>

          

          tab3_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="fill_parent"

               android:layout_height="fill_parent">

              < TextView android:text="Tab 3"

                 android:padding="15dip"

                 android:textSize="18dip"

                 android:layout_width="fill_parent"

                 android:layout_height="wrap_content"/>

          < /LinearLayout>

       Activity Classes -

       Tab1.java

        package com.test.tabtest;

        import android.app.Activity;

        import android.os.Bundle;

        public class Tab1 extends Activity {

              public void onCreate(Bundle savedInstanceState) {

                  super.onCreate(savedInstanceState);

                  setContentView(R.layout.tab1_layout);

             }

       }

    Tab2.java

        package com.test.tabtest;

        import android.app.Activity;

        import android.os.Bundle;

        public class Tab2 extends Activity {

              public void onCreate(Bundle savedInstanceState) {

                  super.onCreate(savedInstanceState);

                  setContentView(R.layout.tab2_layout);

             }

       }

    Tab3.java

      package com.test.tabtest;

        import android.app.Activity;

        import android.os.Bundle;

        public class Tab3 extends Activity {

              public void onCreate(Bundle savedInstanceState) {

                  super.onCreate(savedInstanceState);

                  setContentView(R.layout.tab3_layout);

             }

        }

• Now create the main layout and main activity class which will extends from TabActivity as shown below - 

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

             < TextView android:text="This is tab test!!!"

                  android:padding="15dip"

                  android:textSize="18dip"

                  android:layout_width="fill_parent"

                  android:layout_height="wrap_content"/>

            < TabHost

                  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>

       < /LinearLayout>

TabTest.java - main activity class - 

      package com.test.tabtest;

     import android.app.TabActivity;

     import android.content.Intent;

     import android.os.Bundle;

     import android.widget.TabHost;

     import android.widget.TabHost.TabSpec;

     public class TabTest 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();        

       

               TabSpec tab1spec = tabHost.newTabSpec("Tab1");

               tab1spec.setIndicator("Tab1");

               Intent tab1Intent = new Intent(this, Tab1.class);

               tab1spec.setContent(tab1Intent);

              TabSpec tab2spec = tabHost.newTabSpec("Tab2");

              tab2spec.setIndicator("Tab2");

              Intent tab2Intent = new Intent(this, Tab2.class);

              tab2spec.setContent(tab2Intent);

              TabSpec tab3spec = tabHost.newTabSpec("Tab3");

              tab3spec.setIndicator("Tab3");

              Intent tab3Intent = new Intent(this, Tab3.class);

              tab3spec.setContent(tab3Intent);

              // Adding all TabSpec to TabHost

              tabHost.addTab(tab1spec); 

              tabHost.addTab(tab2spec); 

              tabHost.addTab(tab3spec); 

        

             //Adjusting the tab height as per need.

             tabHost.getTabWidget().getChildAt(0).getLayoutParams().height=40;

             tabHost.getTabWidget().getChildAt(1).getLayoutParams().height=40;

             tabHost.getTabWidget().getChildAt(2).getLayoutParams().height=40;

       }

     }

• Add entries in AndroidManifest.xml file for 3 new tab activities as shown below - 

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

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

              package="com.test.tabtest"

              android:versionCode="1"

              android:versionName="1.0">

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

                 < activity android:name=".TabTest"

                  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=".Tab1" />

                 < activity android:name=".Tab2" />

                 < activity android:name=".Tab3" />

              < /application>

        < /manifest> 

• Run the application and you will see the application having 3 different tabs and you can also put images for each tab by using below syntax - 

         Instead of 

                tab1spec.setIndicator("Tab1");

        Use 

  

               tab1spec.setIndicator("Tab1", getResources().getDrawable(R.drawable.icon));