In this post we need three separate activities for three tab screens. So let’s get started by creating a simple project.

 

1. Create a new project File -> New -> New Project and give activity name as AndroidTabLayoutActivity.
2. Open your AndroidTabLayoutActivity and extend the class from TabActivity.

public class MainActivity extends TabActivity {

3. Now open your activity_main.xml under res -> layout folder and type the following code.

<?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:background="#F06292"
        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:background="#D4D4D5"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"/>

    </LinearLayout>
</TabHost>

4. Now we need 3 activities and 3 xml layouts for three tabs. So create three activities by right click on your package folder and create classes and name them as PhotosActivity.java, SongsActivity.java and VideosActivity.java. Type the following code respectively.

PhotosActivity.java

package com.codedecode.yashpwr;

import android.app.Activity;
import android.os.Bundle;

public class PhotosActivity extends Activity {
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.photos_layout);
    }
}

SongsActivity.java

package com.codedecode.yashpwr;

import android.app.Activity;
import android.os.Bundle;

public class SongsActivity extends Activity {
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.songs_layout);
    }
}

VideosActivity.java

package com.codedecode.yashpwr;

import android.app.Activity;
import android.os.Bundle;

public class VideosActivity extends Activity {
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.videos_layout);
    }
}

5. Now create 3 xml layouts by right clicking on res/layout -> New -> Android XML File and name them as photos_layout.xml, songs_layout.xml and videos_layout.xml and type the following code in respective files.

photos_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="match_parent"
    android:layout_height="match_parent">

    <!-- Screen Design for Photos -->
    <TextView
        android:text="PHOTOS HERE"
        android:padding="15dip"
        android:textSize="18dip"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"/>

</LinearLayout>

videos_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="match_parent"
    android:layout_height="match_parent">

    <!-- Screen Design for the SONGS -->
    <TextView
        android:text="SONGS HERE"
        android:padding="15dip"
        android:textSize="18dip"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"/>
</LinearLayout>

videos_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="match_parent"
    android:layout_height="match_parent">

    <!--  Screen Design for VIDEOS -->
    <TextView
        android:text="VIDEOS HERE"
        android:padding="15dip"
        android:textSize="18dip"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"/>
</LinearLayout>

6. Now open AndroidTabLayoutActivity.java and type the following code. In the following code we are creating three TabSepcs and adding them to TabHost.

MainActivity.java

package com.codedecode.yashpwr;

import android.app.TabActivity;
import android.content.Intent;
import android.os.Bundle;
import android.widget.TabHost;
import android.widget.TabHost.TabSpec;

public class MainActivity extends TabActivity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        TabHost tabHost = getTabHost();

        // Tab for Photos
        TabSpec photospec = tabHost.newTabSpec("Photos");
        // setting Title and Icon for the Tab
        photospec.setIndicator("Photos");
        Intent photosIntent = new Intent(this, PhotosActivity.class);
        photospec.setContent(photosIntent);

        // Tab for Songs
        TabSpec songspec = tabHost.newTabSpec("Songs");
        songspec.setIndicator("Songs");
        Intent songsIntent = new Intent(this, SongsActivity.class);
        songspec.setContent(songsIntent);

        // Tab for Videos
        TabSpec videospec = tabHost.newTabSpec("Videos");
        videospec.setIndicator("Videos");
        Intent videosIntent = new Intent(this, VideosActivity.class);
        videospec.setContent(videosIntent);

        // Adding all TabSpec to TabHost
        tabHost.addTab(photospec); // Adding photos tab
        tabHost.addTab(songspec); // Adding songs tab
        tabHost.addTab(videospec); // Adding videos tab
    }
}

7. Now everything is ready and before running your project make sure that you an entry of new activity name in AndroidManifest.xml file. Open you AndroidManifest.xml file and modify the code as below

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.codedecode.yashpwr">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <!--  Songs Activity -->
        <activity android:name=".SongsActivity" />
        <!--  Videos Activity -->
        <activity android:name=".VideosActivity" />
        <!--  Photos Activity -->
        <activity android:name=".PhotosActivity" />
    </application>

</manifest>

8. Finally run your project. You will see simple tabs app with awesome navigation.

Final Output

Android Tab Layout

Download Code

Happy Coding ūüôā