Download Code

Android Tab Layout Example

In android tab layout example you’ll learn how to create tabs layout in android application.First i’ll give you some basic information about all the classes you will use in this tutorial/project.

Tab Layout

Tabs is basically used to switch between different views.Each contains grouped content.

Tab Host

Tab Host is basically contains two views.First set of tabs label and a Frame Layout object which responsible to display contents or views.

Tab Widget

Tab Widget used to display list of tabs with label.Each tab represent a page.Tab Widget use parent element TabHost to switch different views.

TabActivity

TabActivity class is deprecated in API Level 13.It is replaced with Fragments.You are not concern with this class i am just letting you to know about this point.You can also use Activity class for simple tabs not for swipeable views or tabs.For Fragments read this tutorial.

Ok you”ll design basic tab layout in this tutorial.First i’ll tell you.That you have two ways to create tabs Layout and each tabs concerning activity so we will go for first one and then second one.

Let’s start go ahead create android tab layout example application project.

android tab layout,tab layout,android tab layout example,tab layout example,

After creating project go to your activity_main.xml in Graphical Layout form.You should have Relative Layout within your xml file like this.

android tab layout,tab layout,android tab layout example,tab layout example,

Now next go to UI components panel Composite.Find TabHost,drag and drop on your layout which will look like this.

android tab layout,tab layout,android tab layout example,tab layout example,

Now if you go to activity_main.xml view then you will see.

  • TabHost -> Linear Layout ->  TabWidget ->    FrameLayout
  • Linear Layout (can contains multiple UI components)
  • Linear Layout (can contains multiple UI components)
  • Linear Layout (can contains multiple UI components)

You can add buttons or any UI components within each Linear Layout within Frame Layout.Now if you run android application project you will have nothing because you haven’t setup tabs in your MainActivity.java class.

Next you will setup tabs layout in your activity.First create two variables.One for TabHost and the other is for TabSpecs like this.

public class MainActivity extends Activity {

	TabHost parentElement;   // parent element to add tabs in that Element
	TabSpec settingTab;      // variable to set tabs like name,icon,concerning activity etc etc
        @Override
        protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}

Then refer your tab host in your class and call a method setup() to add tabs within tab host like this.

public class MainActivity extends Activity {

	TabHost parentElement;   // parent element to add tabs in that Element
	TabSpec settingTab;      // variable to set tabs like name,icon,concerning activity etc etc
        @Override
        protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        parentElement = (TabHost) findViewById(R.id.tabhost); // refering tabHost id
        parentElement.setup();  // method to call before adding tabs in that tabHost
    }
}

Now use TabSpecs which means now you are going to add some specification of tabs like name,tag,action etc.Then after doing that your final MainAcitivty will look like this.
MainActivity.java

package androidcodec.tab;

/*
 * 
 * All Rights Reserved By:Farhan Rasheed
 * 
 * */

import android.support.v7.app.ActionBarActivity;
import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.TabHost;
import android.widget.TabHost.TabSpec;


public class MainActivity extends Activity {

	TabHost parentElement;   // parent element to add tabs in that Element
	TabSpec settingTab;      // variable to set tabs like name,icon,concerning activity etc etc
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        parentElement = (TabHost) findViewById(R.id.tabhost); // refering tabHost id
        parentElement.setup();  // method to call before adding tabs in that tabHost
        settingTab = parentElement.newTabSpec("One");   // new tab tags
        settingTab.setContent(R.id.tab1);                   // refering one linear layout within fragment layout
        settingTab.setIndicator("View One");                // setting name of tab
        parentElement.addTab(settingTab);                   // now finally adding tab within parent element TabHost
        settingTab = parentElement.newTabSpec("Two");   // new tab tags
        settingTab.setContent(R.id.tab2);                   // refering one linear layout within fragment layout
        settingTab.setIndicator("View Two");                // setting name of tab
        parentElement.addTab(settingTab);                   // now finally adding tab within parent element TabHost
        settingTab = parentElement.newTabSpec("Three");   // new tab tags
        settingTab.setContent(R.id.tab3);                   // refering one linear layout within fragment layout
        settingTab.setIndicator("View Three");                // setting name of tab
        parentElement.addTab(settingTab);                   // now finally adding tab within parent element TabHost
    }

   
}

Now Run your android tab layout example application project should look like these images.

Tab One

android tab layout,tab layout,android tab layout example,tab layout example,

Tab Two

android tab layout,tab layout,android tab layout example,tab layout example,

Tab Three

android tab layout,tab layout,android tab layout example,tab layout example,

that’s it for First way to create tab layout.I hope you have got everything of First way.

Let’s talk about the second way in which you can start new activity.When you click tab it’s particular activity will start.

So i have taken an example of Time Table.Every thing remains the same except Intent.For Time Table App you have create Five layouts like.

  • Monday with activity
  • Tuesday with activity
  • Wednesday with activity
  • Thursday with activity
  • Friday with activity

Just like this.

android tab layout,tab layout,android tab layout example,tab layout example,

Next for that your activity_main.xml should look like this.

android tab layout,tab layout,android tab layout example,tab layout example,

Then your MainActivity.java class will be like this.

MainActivity.java

package androidcodec.tabs;

/*
 * 
 * All Rights Reserved By:Farhan Rasheed
 * 
 * */

import android.support.v7.app.ActionBarActivity;
import android.app.Activity;
import android.app.TabActivity;
import android.content.Intent;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.TabHost;
import android.widget.TabHost.TabSpec;


public class MainActivity extends TabActivity {

	TabHost parentElement; // parent element to add tabs in that Element
	TabSpec tabSpec;   // variable to set tabs like name,icon,concerning activity etc etc
    @SuppressWarnings("deprecation")
	@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        parentElement = getTabHost();     // return TabHost using activity
        tabSpec = parentElement.newTabSpec("Monday");     // tag of a tab
        tabSpec.setIndicator("Monday");                   // name of a tab
        Intent m = new Intent(getApplicationContext(),monday.class);   // intent to start activity concerning tab
        tabSpec.setContent(m);                                    // starting an activity monday
        parentElement.addTab(tabSpec);                     // adding tab to TabHost
        tabSpec = parentElement.newTabSpec("Tuesday");     // tag of a tab
        tabSpec.setIndicator("Tuesday");                   // name of a tab
        Intent t = new Intent(getApplicationContext(),tuesday.class); // intent to start activity concerning tab
        tabSpec.setContent(t);                                    // starting an activity tuesday
        parentElement.addTab(tabSpec);                      // adding tab to TabHost
        tabSpec = parentElement.newTabSpec("Wednesday");     // tag of a tab
        tabSpec.setIndicator("Wednesday");                   // name of a tab
        Intent w = new Intent(getApplicationContext(),wednesday.class);     // intent to start activity concerning tab
        tabSpec.setContent(w);                                    // starting an activity wednesday
        parentElement.addTab(tabSpec);                      // adding tab to TabHost
        tabSpec = parentElement.newTabSpec("Thursday");   // tag of a tab
        tabSpec.setIndicator("Thursday");                 // name of a tab
        Intent th = new Intent(getApplicationContext(),thursday.class);     // intent to start activity concerning tab
        tabSpec.setContent(th);                                         // starting an activity thursday
        parentElement.addTab(tabSpec);                    // adding tab to TabHost
        tabSpec = parentElement.newTabSpec("Friday");    // tag of a tab
        tabSpec.setIndicator("Friday");                  // name of a tab
        Intent f = new Intent(getApplicationContext(),friday.class);    // intent to start activity concerning tab
        tabSpec.setContent(f);                           // starting an activity friday
        parentElement.addTab(tabSpec);                   // adding tab to TabHost
        
    }

    
}

Now if you run your android tab layout example application project.

android tab layout,tab layout,android tab layout example,tab layout example,

Now these are the ways to create android tab layout example in android application.These tabs layout have some disadvantages so we will cover that in next tutorial.

Thanks for visiting.