Implementing ActionBarSherlock Fragment Tabs In Android

Last Updated: March 5, 2013

In this tutorial, you will learn how to implement ActionBarSherlock fragment tabs in your Android application. Tabs allow user to navigate among sibling screens by selecting the appropriate tab indicator available at the top of the display. We will create tabs that allow users to navigate between fragments that contain a particular text using ActionBarSherlock Library. 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 ABSFragmentTabs.

Application Name : ABSFragmentTabs

Project Name : ABSFragmentTabs

Package Name : com.androidbegin.absfragmenttabs

Open your MainActivity.java and paste the following code.

MainActivity.java

package com.androidbegin.absfragmenttabs;

import com.actionbarsherlock.app.ActionBar;
import com.actionbarsherlock.app.SherlockFragmentActivity;
import android.os.Bundle;
import android.support.v4.app.Fragment;

public class MainActivity extends SherlockFragmentActivity {

	ActionBar.Tab Tab1,Tab2,Tab3;
	Fragment fragmentTab1 = new FragmentTab1();
	Fragment fragmentTab2 = new FragmentTab2();
	Fragment fragmentTab3 = new FragmentTab3();

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

		ActionBar actionBar = getSupportActionBar();

		// Hide Actionbar Icon
		actionBar.setDisplayShowHomeEnabled(false);

		// Hide Actionbar Title
		actionBar.setDisplayShowTitleEnabled(false);

		// Create Actionbar Tabs
		actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);

		// Set Tab Icon and Titles
		Tab1 = actionBar.newTab().setIcon(R.drawable.tab1);
		Tab2 = actionBar.newTab().setText("Tab2");
		Tab3 = actionBar.newTab().setText("Tab3");

		// Set Tab Listeners
		Tab1.setTabListener(new TabListener(fragmentTab1));
		Tab2.setTabListener(new TabListener(fragmentTab2));
		Tab3.setTabListener(new TabListener(fragmentTab3));

		// Add tabs to actionbar
		actionBar.addTab(Tab1);
		actionBar.addTab(Tab2);
		actionBar.addTab(Tab3);
	}

}

We have created three tabs with tab listeners and set the action bar to navigation mode tabs. For the first tab, we have set a custom tab icon and the other two with texts title. 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 activity_main.xml and paste the following code.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/fragment_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

Next, create a tab listener class. Go to File > New > Class and name it TabListener.java. Select your package named com.androidbegin.absfragmenttabs and click Finish.

Open your TabListener.java and paste the following code.

TabListener.java

package com.androidbegin.absfragmenttabs;

import com.actionbarsherlock.app.ActionBar;
import com.actionbarsherlock.app.ActionBar.Tab;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentTransaction;

public class TabListener implements ActionBar.TabListener {

	Fragment fragment;

	public TabListener(Fragment fragment) {
		// TODO Auto-generated constructor stub
		this.fragment = fragment;
	}

	@Override
	public void onTabSelected(Tab tab, FragmentTransaction ft) {
		// TODO Auto-generated method stub
		ft.replace(R.id.fragment_container, fragment);
	}

	@Override
	public void onTabUnselected(Tab tab, FragmentTransaction ft) {
		// TODO Auto-generated method stub
		ft.remove(fragment);
	}

	@Override
	public void onTabReselected(Tab tab, FragmentTransaction ft) {
		// TODO Auto-generated method stub

	}
}

This tab listener class manages the selected tab clicks and to show or remove a fragment.

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

Open your FragmentTab1.java and paste the following code.

FragmentTab1.java

package com.androidbegin.absfragmenttabs;

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

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. Go to File > New > Class and name it FragmentTab2.java. Select your package named com.androidbegin.absfragmenttabs and click Finish.

Open your FragmentTab2.java and paste the following code.

FragmentTab2.java

package com.androidbegin.absfragmenttabs;

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

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.absfragmenttabs and click Finish.

Open your FragmentTab3.java and paste the following code.

FragmentTab3.java

package com.androidbegin.absfragmenttabs;

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

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 Fragment Tabs</string>
    <string name="hello_world">Hello world!</string>
    <string name="menu_settings">Settings</string>
    <string name="Fragmenttab1">This is ActionBarSherlock Fragment 1</string>
    <string name="Fragmenttab2">This is ActionBarSherlock Fragment 2</string>
    <string name="Fragmenttab3">This is ActionBarSherlock Fragment 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.absfragmenttabs"
    android:versionCode="1"
    android:versionName="1.0" >

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

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

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

</manifest>

Output :