Android ActionBarSherlock FragmentTabHost Tutorial

In this tutorial, you will learn how to implement ActionBarSherlock FragmentTabHost in your Android application. FragmentTabHost allows the use of fragment objects for its tab content. We will create fragment tabs with FragmentTabHost using ActionBarSherlock Library and on tab selection will show a selected fragment. So lets begin…

Prepare your project by importing the ActionBarSherlock Library. Refer to Implementing ActionBarSherlock in Android tutorial.

Create a new project in Eclipse File > New > Android Application Project. Fill in the details and name your project ABSFragTabHost.

Application Name : ABSFragTabHost

Project Name : ABSFragTabHost

Package Name : com.androidbegin.absfragtabhost

Open your MainActivity.java and paste the following code.

MainActivity.java

package com.androidbegin.absfragtabhost;

import com.actionbarsherlock.app.SherlockFragmentActivity;

import android.support.v4.app.FragmentTabHost;
import android.os.Bundle;

public class MainActivity extends SherlockFragmentActivity {
	// Declare Variables	
	private FragmentTabHost mTabHost;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		// Set the view from main_fragment.xml
		setContentView(R.layout.main_fragment);

		// Locate android.R.id.tabhost in main_fragment.xml
		mTabHost = (FragmentTabHost) findViewById(android.R.id.tabhost);

		// Create the tabs in main_fragment.xml
		mTabHost.setup(this, getSupportFragmentManager(), R.id.tabcontent);

		// Create Tab1 with a custom image in res folder
		mTabHost.addTab(mTabHost.newTabSpec("tab1").setIndicator("", getResources().getDrawable(R.drawable.tab1)),
				FragmentTab1.class, null);

		// Create Tab2
		mTabHost.addTab(mTabHost.newTabSpec("tab2").setIndicator("Tab2"),
				FragmentTab2.class, null);

		// Create Tab3
		mTabHost.addTab(mTabHost.newTabSpec("tab3").setIndicator("Tab3"),
				FragmentTab3.class, null);
	}
}

In this activity, we have created three tabs with FragmentTabHost and each tab will open a different fragment.  For the first tab, we have set a custom tab icon. We have prepared a sample tab icon for this tutorial. Insert your downloaded sample tab icon into your res drawable-hdpi.

Sample Tab Icon

[wpfilebase tag=file id=29 tpl=download-button /]

Next, create an XML graphical layout for the MainActivity. Go to res > layout > Right Click on layout > New > Android XML File

Name your new XML file main_fragment.xml and paste the following code.

main_fragment.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <android.support.v4.app.FragmentTabHost
        android:id="@android:id/tabhost"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <FrameLayout
            android:id="@+id/tabcontent"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </android.support.v4.app.FragmentTabHost>

</LinearLayout>

Output:

ABS FragmentTabHost ScreenShot

Next, create the first fragment tab. Go to File > New > Class and name it FragmentTab1.java. Select your package named com.androidbegin.absfragtabhost and click Finish.

Open your FragmentTab1.java and paste the following code.

FragmentTab1.java

package com.androidbegin.absfragtabhost;

import com.actionbarsherlock.app.SherlockFragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class FragmentTab1 extends SherlockFragment {
	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		View rootView = inflater.inflate(R.layout.fragmenttab1, container, false);
		return rootView;
	}

}

Next, create the second fragment tab. Create another class for FragmentTab2. Go to File > New > Class and name it FragmentTab2.java. Select your package named com.androidbegin.absfragtabhost and click Finish.

Open your FragmentTab2.java and paste the following code.

FragmentTab2.java

package com.androidbegin.absfragtabhost;

import com.actionbarsherlock.app.SherlockFragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class FragmentTab2 extends SherlockFragment {
	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		View rootView = inflater.inflate(R.layout.fragmenttab2, container, false);
		return rootView;
	}

}

Next, create the third fragment tab. Go to File > New > Class and name it FragmentTab3.java. Select your package named com.androidbegin.absfragtabhost and click Finish.

Open your FragmentTab3.java and paste the following code.

FragmentTab3.java

package com.androidbegin.absfragtabhost;

import com.actionbarsherlock.app.SherlockFragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class FragmentTab3 extends SherlockFragment {
	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		View rootView = inflater.inflate(R.layout.fragmenttab3, container, false);
		return rootView;
	}

}

Next, create an XML graphical layout for first fragment tab. Go to res > layout > Right Click on layout > New > Android XML File

Name your new XML file fragmenttab1.xml and paste the following code.

fragmenttab1.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="@string/FragmentTab1" />

</RelativeLayout>

Next, create an XML graphical layout for second fragment tab. Go to res > layout > Right Click on layout > New > Android XML File

Name your new XML file fragmenttab2.xml and paste the following code.

fragmenttab2.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="@string/FragmentTab2" />

</RelativeLayout>

Next, create an XML graphical layout for third fragment tab. Go to res > layout > Right Click on layout > New > Android XML File

Name your new XML file fragmenttab3.xml and paste the following code.

fragmenttab3.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="@string/FragmentTab3" />

</RelativeLayout>

Change the application name and fragment textview texts in strings.xml. Open your strings.xml and paste the following code. Go to res > values > strings.xml

strings.xml

<resources>

    <string name="app_name">ABS FragmentTabHost Tutorial</string>
    <string name="hello_world">Hello world!</string>
    <string name="menu_settings">Settings</string>
    <string name="title_activity_main">ABS FragmentTabHost Tutorial</string>
    <string name="FragmentTab1">This is Fragment Tab 1</string>
    <string name="FragmentTab2">This is Fragment Tab 2</string>
    <string name="FragmentTab3">This is Fragment Tab 3</string>

</resources>

In your AndroidManifest.xml, we need to change the theme style to “Theme.Sherlock” and set your preferable Android minimum SDK version. Open your AndroidManifest.xml and paste the following code.

AndroidManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.androidbegin.absfragtabhost"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="7"
        android:targetSdkVersion="15" />

    <application
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/Theme.Sherlock" >
        <activity
            android:name=".MainActivity"
            android:label="@string/title_activity_main" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

    </application>

</manifest>

Output:

ABS FragmentTabHost ScreenShot

Source Code

[purchase_link id=”7983″ text=”Purchase to Download Source Code” style=”button” color=”green”]

Latest comments

I want to create a list contact to display in the Frament . who can help me ?

PhamTruong

Android ActionBarSherlock FragmentTabHost Tutorial

actually i was displayed counter in logcat but cant able to display on badge in fragment tabhost?

Dimpal Chavan

Android ActionBarSherlock FragmentTabHost Tutorial

//Dashboardmain.java classBadgeView badge1;//BadgeView is different classtabs = (TabWidget)findViewById(android.R.id.tabs); badge1 = new BadgeView(DashBoardMain.this, tabs,1); badge1.setBadgePosition(BadgeView.POSITION_TOP_RIGHT); badge1.setBadgeBackgroundColor(Color.RED); badge1.setTextSize(20); badge1.setTextColor(Color.BLUE); badge1.setText("?"); badge1.show();

Dimpal Chavan

Android ActionBarSherlock FragmentTabHost Tutorial

how can set the counter value on badge in tabhost fragment..??

Dimpal Chavan

Android ActionBarSherlock FragmentTabHost Tutorial