---
title: "tab layout android application"  
description: "To create a tabbed UI, you need to use a TabHost and a TabWidget. The TabHost must be the root node for the layout, which contains both the TabWidget"  
author: "Chris Anderson"  
published: 2011-10-18  
updated: 2020-03-04  
canonical: https://www.mindstick.com/articles/784/tab-layout-android-application  
category: "android"  
tags: ["android"]  
reading_time: 6 minutes  

---

# tab layout android application

To create a tabbed UI, you need to use a TabHost and a TabWidget. The TabHost must be the root node for the layout, which contains both the TabWidget for displaying the tabs and a FrameLayout for displaying the [tab content](https://www.mindstick.com/forum/159188/ajax-to-populate-html-tab-content).\

In this article I am going to explain how to create tabbed UI by using separate [Activity](https://www.mindstick.com/forum/23119/how-to-save-activity-state-in-android) for each tab.

## Create a project

- Start a new project named TabLayoutDemo.
- First, create three separate Activity classes in [your project](https://www.mindstick.com/forum/156583/best-way-to-link-bootstrap-file-in-your-project) (src/package): ArtistActivity, AlbumActivity and SongsActivity. Each activity represent a separate tab. Make each one display a simple message by using [TextView](https://www.mindstick.com/forum/23237/how-do-i-center-text-horizontally-and-vertically-in-a-textview-in-android) as shown below:

##### ArtistActivity:

```
import android.app.Activity;
import android.os.Bundle;
import android.widget.TextView;

public class ArtistActivity  extends Activity {
@Override
publicvoid onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    TextView textview = new TextView(this);
    textview.setText("This is the Artists tab");
     setContentView(textview);
}
}
```

##### AlbumActivity:\

```
import android.app.Activity;
import android.os.Bundle;
import android.widget.TextView;
public class AlbumActivity  extends Activity {
     @Override
     public void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
         TextView textview =  new TextView(this);
         textview.setText("This is the Albums tab");
         setContentView(textview);
    }
}
```

##### SongsActivity:

```
import android.app.Activity;
import android.os.Bundle;
import android.widget.TextView;

public class SongsActivity  extends Activity {

     @Override
     public void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
         TextView textview =  new TextView(this);
         textview.setText("This is the Songs tab");
        setContentView(textview);
    }
}
```

· Open **[AndroidManifest.xml](https://www.mindstick.com/interview/12768/what-is-the-androidmanifest-xml)** and add the [activities](https://www.mindstick.com/interview/2242/differentiate-activities-from-services) created above in the application tag.

· Add the **NoTitleBar** theme to the TabLayoutDemoActivity activity tag. This will remove the default application title from the top of the layout.

```
 <application android:icon="@drawable/icon" android:label="@string/app_name">          <activity android:name=".TabLayoutDemoActivity"                      android:theme="@android:style/Theme.NoTitleBar"                   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=".ArtistActivity"                   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=".AlbumActivity"                   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=".SongsActivity"                   android:label="@string/app_name">             <intent-filter>                 <action android:name="android.intent.action.MAIN" />                 <category android:name="android.intent.category.LAUNCHER" />             </intent-filter>          </activity>      </application>
```

· Open **res/layout/main.xml** folder and add the following code in the main.[xml file](https://www.mindstick.com/articles/75/how-to-read-and-write-xml-file-through-c-sharp):

```
<?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"
                           android:padding="5dp">
              <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"
                           android:padding="5dp" />
              </LinearLayout>
</TabHost>
```

· Save the icon images (**ic_tab_artists_grey.png,** **ic_tab_artists_white.png**) in your project **res/drawable/** directory.

· Create a three XML file in **res/drawable/** named **ic_tab_artists.xml, ic_tab_albums.xml, ic_tab_songs.xml** and insert the following code in all three xml files:

```
<?xml  version="1.0" encoding="utf-8"?>
<selector  xmlns:android="http://schemas.android.com/apk/res/android">
     <item android:drawable="@drawable/ic_tab_artists_grey"
          android:state_selected="true" />
     <item android:drawable="@drawable/ic_tab_artists_white" />
</selector>
```

· Now open TabLayoutDemoActivity.java and make it extend **TabActivity**. Use the following code for the **onCreate()** method:

```
import android.app.TabActivity;
import android.content.Intent;
import android.content.res.Resources;
import android.os.Bundle;
import android.widget.TabHost;

public class TabLayoutDemoActivity  extends TabActivity {
     @Override
     public void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
         setContentView(R.layout.main);
         Resources res = getResources();  // Resource object to get Drawables
         TabHost tabHost = getTabHost();  // The activity TabHost
         TabHost.TabSpec spec;   // Reusable TabSpec for each tab
         Intent intent; // Reusable Intent for each tab
         // Create an Intent to launch an Activity for the tab (to be reused)
         intent =  new Intent().setClass(this, ArtistActivity.class);    //Initialize a
                                       TabSpec for each tab and add it to the TabHost
                                      TabSpec for each tab and add it to the TabHost
         spec = tabHost.newTabSpec("artists").setIndicator("Artists",
                       res.getDrawable(R.drawable.
                      res.getDrawable(R.drawable.ic_tab_artists)).setContent(intent);
         tabHost.addTab(spec);     // Do the same for the other tabs
         intent =  new Intent().setClass(this, AlbumActivity.class);
         spec = tabHost.newTabSpec("albums").setIndicator("Albums",
                        res.getDrawable(R.drawable.
                       res.getDrawable(R.drawable.ic_tab_albums)).setContent(intent);
         tabHost.addTab(spec);
         intent =  new Intent().setClass(this, SongsActivity.class);
         spec = tabHost.newTabSpec("songs").setIndicator("Songs",
                         res.getDrawable(R.drawable.
                        res.getDrawable(R.drawable.ic_tab_songs)).setContent(intent);
         tabHost.addTab(spec);
         tabHost.setCurrentTab(2);
    }
}
```

· Run the application.\
[Your application](https://answers.mindstick.com/qa/95487/how-do-you-troubleshoot-when-your-application-link-is-not-responding) should look like this

![Using Tab layout in Android Application](https://www.mindstick.com/mindstickarticle/7e659092-3046-4461-97ba-b2b28616241e/images/d9f84f81-96fe-4a9b-9df4-890d4fc66b8d.png)

When you select a tab, it will display the text in the frame layout.

\

---

Original Source: https://www.mindstick.com/articles/784/tab-layout-android-application

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.