Android ActionbarSherlock Nested Fragment Tabs Tutorial

In this tutorial, you will learn how to implement ActionbarSherlock Nested Fragment Tabs in your Android application. Nested fragment allows you to embed fragments inside fragments. Which means you can place dynamic and re-usable UI components in a UI component that is itself dynamic and re-usable. We will create parent tabs with fragments and inside the parent fragment will have child tabs with fragments 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 ABSNestedFragTab.

Application Name : ABSNestedFragTab

Project Name : ABSNestedFragTab

Package Name : com.androidbegin.absnestedfragtab

Open your MainActivity.java and paste the following code.

MainActivity.java

package com.androidbegin.absnestedfragtab;

import com.actionbarsherlock.app.SherlockFragmentActivity;

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

public class MainActivity extends SherlockFragmentActivity {
	// Declare Variables	
	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 Parent Tab1 
		mTabHost.addTab(mTabHost.newTabSpec("parent1").setIndicator("Parent1"),
				FragmentParentTab1.class, null);

		// Create Parent Tab2
		mTabHost.addTab(mTabHost.newTabSpec("parent2").setIndicator("Parent2"),
				FragmentParentTab2.class, null);

	}
}

In this activity, we have created two parent tabs with FragmentTabHost and each tab will open a different fragment.

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>

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

Open your FragmentParentTab1.java and paste the following code.

FragmentParentTab1.java

package com.androidbegin.absnestedfragtab;

import com.actionbarsherlock.app.SherlockFragment;

import android.os.Bundle;

import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

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

}

Next, create the second fragment parent tab. Go to File > New > Class and name it FragmentParentTab2.java. Select your package named com.androidbegin.absnestedfragtab and click Finish.

Open your FragmentParentTab2.java and paste the following code.

FragmentParentTab2.java

package com.androidbegin.absnestedfragtab;

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

public class FragmentParentTab2 extends SherlockFragment {
	FragmentTabHost mTabHost;

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {

		mTabHost = new FragmentTabHost(getSherlockActivity());

		mTabHost.setup(getSherlockActivity(), getChildFragmentManager(),
				R.layout.fragmentparenttab2);

		// Create Child Tab1
		mTabHost.addTab(mTabHost.newTabSpec("child1").setIndicator("Child1"),
				FragmentChildTab1.class, null);

		// Create Child Tab2
		mTabHost.addTab(mTabHost.newTabSpec("child2").setIndicator("Child2"),
				FragmentChildTab2.class, null);
		return mTabHost;
	}

	@Override
	public void onDestroyView() {
		super.onDestroyView();
		mTabHost = null;
	}
}

In this fragment, we have created two child tabs with FragmentTabHost and each tab will open a different fragment.

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

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

fragmentparenttab1.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/FragmentParentTab1" />

</RelativeLayout>

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

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

fragmentparenttab2.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" >

</RelativeLayout>

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

Open your FragmentChildTab1.java and paste the following code.

FragmentChildTab1.java

package com.androidbegin.absnestedfragtab;

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

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

}

Next, create the second fragment child tab. Go to File > New > Class and name it FragmentChildTab2.java. Select your package named com.androidbegin.absnestedfragtab and click Finish.

Open your FragmentChildTab2.java and paste the following code.

FragmentChildTab2.java

package com.androidbegin.absnestedfragtab;

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

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

}

Next, create an XML graphical layout for first fragment child tab. Go to res > layout > Right Click on layout > New > Android XML File
Name your new XML file fragmentchildtab1.xml and paste the following code.

fragmentchildtab1.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/FragmentChildTab1" />

</RelativeLayout>

Next, create an XML graphical layout for second fragment child tab. Go to res > layout > Right Click on layout > New > Android XML File
Name your new XML file fragmentchildtab2.xml and paste the following code.

fragmentchildtab2.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/FragmentChildTab2" />

</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 Nested Fragment Tabs Tutorial</string>
    <string name="hello_world">Hello world!</string>
    <string name="menu_settings">Settings</string>
    <string name="title_activity_main">ABS Nested Fragment Tabs Tutorial</string>
    <string name="FragmentParentTab1">This is Fragment Parent Tab 1</string>
    <string name="FragmentChildTab1">This is Fragment Child Tab 1</string>
    <string name="FragmentChildTab2">This is Fragment Child Tab 2</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.absnestedfragtab"
    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:

Source Code 

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