Download Code

Android Studio Tab Layout Example

In android studio 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

Tab 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 you will go for first one and then second one.

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

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

Go to UI components panel Containers.Find TabHost,drag and drop on your layout.

Android Studio tab,android studio tab layout,android studio 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.Then refer your tab host in your class and call a method setup() to add tabs within tab host.

Now use TabSpecs which means now you are going to add some specification of tabs like name,tag,action etc.

Now run your android studio tab layout example application project.

Android Studio tab,android studio tab layout,android studio 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

Android Studio tab,android studio tab layout,android studio tab layout example,tab layout example,

Next your activity_main.xml file should contain these components.

Android Studio tab,android studio tab layout,android studio tab layout example,tab layout example,

MainActivity.java

package com.example.anonymous.studiotabs;

import android.app.TabActivity;
import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Window;
import android.widget.TabHost;

public class MainActivity extends TabActivity {

    TabHost parentElement; // parent element to add tabs in that Element
    TabHost.TabSpec tabSpec;   // 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 = 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

    }


}

Android Manifest.xml

Android Studio tab,android studio tab layout,android studio tab layout example,tab layout example,

Now run your android studio tab layout example application project.As you can see tabs layout took actionbar area.

Android Studio tab,android studio tab layout,android studio tab layout example,tab layout example,

That’s it for this tutorial.I hope you get the idea.

Thanks.