Android TabHost

Previous
Next

Android TabHost

TabHost can be defined as below –

"TabHost is a Container for tabbed window view. This object holds two children, one of whom is set of tab labels that the user clicks to select a specific tab and other is a FrameLayout object that displays the content of that page."

Attributes of Android TabHost

Some of the popular attributes of android TabHost  –

 

 

 

 

S. No. XML Attributes Description
1 android:id This is unique id of the TabHost to uniquely identify the TabHost.
2 android:height Height of the TabHost.
3 android:width Width of the TabHost.
4 android:alpha Specifies the alpha of the view.
5 android:background Specifies the background of the view.
6 android:padding Specifies padding of the view for edges.
7 android:tooltipText Specifies text displayed in a small popup window on hover or long press.
8 android:clickable Specifies whether view is clickable or not.
9 android:theme Specifies a theme override for view.

Some of the popular attributes of android TabHost inherited from ViewGroup are –

S. No. XML Attributes Description
1 android:animateLayoutChanges Specifies whether LayoutTransition should run whenever there is any changes in layout.
2 android:animationCache Specifies whether layout animations should create a drawing cache for their children.
3 android:clipToPadding Specifies whether the ViewGroup will clip its children and resize (but not clip) any EdgeEffect to its padding, if padding is not zero.
4 android:layoutAnimation Specifies the layout animation to use the first time the ViewGroup is laid out.
5 android:layoutMode Specifies the layout mode of this viewGroup.

Some of the popular attributes of android TabHost inherited from FrameLayout are –

 

 

 

 

S. No. XML Attributes Description
1 android:foregroundGravity Specifies the gravity of the foreground drawable.
2 android:measureAllChildren Specifies whether to measure all children or only those in VISIBLE or INVISIBLE state when measuring.

At first, we will create android application. Then, we will use TabHost in the application.

Follow steps below to create new project. Please ignore the steps if you've already created a new application.

S. No. Steps
1 Open Android Studio.
2 Click on Start a new Android Studio Project Write application name as TabHost. Then, click next button.
3 Select minimum SDK you need. However, we have selected 14 as minimum SDK. Then, click next button.
4 Then, select Empty Activity => click next => click finish.
5 If you have followed above process correctly, you will get a newly created project successfully. However, you can also visit tutorial  to Create a New Project to know steps in detail.

Modify Values folder

Open res/values/strings.xml file. Then, add below code into it.

<resources>
<string name="app_name">TabHost</string>'
<string name="home">Home</string>
<string name="dashboard">Dashboard</string>
<string name="notification">Notification</string>
<string name="no_image">No Image</string>
<string name="presented_by">Presented by UK Academe</string>
</resources>

Create Pages for Each Tab in TabHost

Now, we will create tab pages that will be shown when any tab label is clicked. In this application, we are going to implement three tabs. We will create three activity that represents three pages. Follow the steps below to create pages (Home, Dashboard and Profile Pages) –

  • HomeActivity.java and xml file (activity_home.xml)
  • DashboardActivity.java and xml file (activity_dashboard.xml)
  • ProfileActivity.java and xml file (activity_profile.xml)

 

 

 

 

Create First Page(Home Page) of TabHost

Create xml file in the res/layout folder for this activity class and name it activity_home.xml. Then, add below code into it

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical"
android:background="@android:color/holo_red_dark">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
android:text="@string/home"
android:textColor="@android:color/white"
android:textSize="17sp"
android:textStyle="bold"/>

<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
android:contentDescription="@string/no_image"
android:src="@drawable/ukacademe"/>

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/presented_by"
android:textColor="@android:color/white"
android:textSize="18sp"
android:textStyle="bold"/>

</LinearLayout>

Now, create a new java file in main/java/com.ukacademe.tabhost folder and name it HomeActivity.java. Then, add below code into it.

package com.ukacademe.tabhost;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;

public class HomeActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_home);
    }
}

Create Second Page(Dashboard Page) Of TabHost

Create xml file for this activity class in res/layout folder and name it activity_dashobard.xml. Then, add below code into it.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:background="@android:color/holo_orange_light"
android:orientation="vertical">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
android:text="@string/dashboard"
android:textColor="@android:color/white"
android:textSize="17sp"
android:textStyle="bold"/>

<ImageView
android:id="@+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
android:contentDescription="@string/no_image"
android:src="@drawable/ukacademe"/>

<TextView
android:id="@+id/txtMain"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/presented_by"
android:textColor="@android:color/white"
android:textSize="18sp"
android:textStyle="bold"/>
</LinearLayout>

Now, create a new java file in main/java/com.ukacademe.tabhost folder and name it DashboardActivity.java. Then, add below code into it. 

package com.ukacademe.tabhost;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;

public class DashboardActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_dashboard);
    }
}

 

 

 

 

Create Third Page(Profile Page) Of TabHost

Create xml file in the res/layout folder for this activity class and name it activity_profile.xml. Then, add below code into it.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:background="@android:color/holo_orange_dark"
android:orientation="vertical">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
android:text="@string/profile"
android:textColor="@android:color/white"
android:textSize="17sp"
android:textStyle="bold"/>

<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
android:contentDescription="@string/no_image"
android:src="@drawable/ukacademe"/>

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/presented_by"
android:textColor="@android:color/white"
android:textSize="18sp"
android:textStyle="bold"/>

</LinearLayout>

Now, create a new java file in main/java/com.ukacademe.tabhost folder and name it ProfileActivity.java. Then, add below code into it.

package com.ukacademe.tabhost;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;

public class ProfileActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_profile);
    }
}

 

TabHost in xml file

Open res/layout/activity_main.xml file. Then, add below code into it.

<TabHost
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@android:id/tabhost"
android:layout_width="match_parent"
android:layout_height="match_parent">

 <RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"> 

<TabWidget
android:id="@android:id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true">

</TabWidget>

<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@android:id/tabs">

</FrameLayout>

</RelativeLayout>

</TabHost>

In activity_main.xml file, we have defined TabHost Layout. TabWidget contains the tab labels which displays page of selected tab in frameLayout when clicked.

 

 

 

 

TabHost in java file

Open src/main/java/com.ukacademe.tabhost/MainActivity.java file. Then, add below code into it.

package com.ukacademe.tabhost;

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


public class MainActivity extends TabActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        TabHost tabHost = findViewById(android.R.id.tabhost);
        if (tabHost != null) {
            addTab(tabHost, getString(R.string.home), getString(R.string.home), HomeActivity.class);
            addTab(tabHost, getString(R.string.dashboard), getString(R.string.dashboard), DashboardActivity.class);
            addTab(tabHost, getString(R.string.profile), getString(R.string.profile), ProfileActivity.class);

            tabHost.setCurrentTab(1);
            tabHost.setOnTabChangedListener(new TabHost.OnTabChangeListener() {
                @Override
                public void onTabChanged(String tabId) {
                    Toast.makeText(getApplicationContext(), tabId, Toast.LENGTH_SHORT).show();
                }
            });
        }
    }

    private void addTab(TabHost tabHost, String name, String indicator, Class<?> className) {
        TabHost.TabSpec tabSpec = tabHost.newTabSpec(name);
        tabSpec.setIndicator(indicator);
        Intent intent = new Intent(this, className);
        tabSpec.setContent(intent);
        tabHost.addTab(tabSpec);
    }

}

In MainActivity.java file, we have accessed tabHost. Then, we have added three tabs(Home, Dashobard and Profile) in it. After that, we've set tab change listener to show a toast message that displays current selected tab.

Now, Because We added three new activity or java file Home, Dashboard and Profile in our android app so we have to mention this java files in our Androidmanifest.xml file. 

Note :- We want to mention every new created java  or activity file in AndroidManifest.xml file if we don't mention it in AndroidManifest its mean we can't acess or we can say that  we can't see the particular activity in our android application. So its compulsory to mention the activity in AndroidManifest file.

Since the file of AndroidManifest.xml is very important in any android application, we are also going to see the content inside this file.

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

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

<activity 
android:name=".HomeActivity"
android:label="@string/home"> 
</activity>

<activity
android:name=".DashboardActivity"
android:label="@string/dashboard">
</activity>

<activity
android:name=".ProfileActivity"
android:label="@string/profile">
</activity>

</application>
</manifest>

Output


Previous
Next

Course Topic