19 Like 2 Tweet 2

Android ActionbarSherlock Nested Fragment

Tabs Tutorial
(http://www.androidbegin.com/tutorial/android-
actionbarsherlock-nested-fragment-tabs-
tutorial/)
20. Sep. 2013 /
ActionBarSherlock (http://www.androidbegin.com/category/actionbarsherlock/),
Tutorial (http://www.androidbegin.com/category/tutorial/),
/
3 Comments (http://www.androidbegin.com/tutorial/android-actionbarsherlock-
nested-fragment-tabs-tutorial/#comments)
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
(http://www.androidbegin.com/)

(http://www.androidbegin.com/)
Prepare your project by importing the ActionBarSherlock Library. Refer to
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
Implementing ActionBarSherlock in Android
(http://www.androidbegin.com/tutorial/implementing-actionbarsherlock-in-android/)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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
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
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
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
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);

}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<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>
1
2
3
4
package com.androidbegin.absnestedfragtab;

import com.actionbarsherlock.app.SherlockFragment;

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
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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;
}

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
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
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
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
37 }
1
2
3
4
5
6
7
8
9
10
11
12
13
<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>
1
2
3
4
5
6
<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>
1
2
3
4
5
6
7
8
9
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 {
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
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
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.
10
11
12
13
14
15
16
17
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View rootView = inflater.inflate(R.layout.fragmentchildtab1, container, false);
return rootView;
}

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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;
}

}
1
2
3
4
5
6
7
8
9
10
11
12
13
<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>
fragmentchildtab2.xml
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
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
1
2
3
4
5
6
7
8
9
10
11
12
13
<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>
1
2
3
4
5
6
7
8
9
10
11
<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<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>
3 Comments AndroidBegin Login 1
Sort by Newest Share Favorite
Output:
Source Code
ABSNestedFragTab (4.5 MiB, 503 downloads)
22
23
24
25
26
</activity>

</application>

</manifest>
Android Delete Multiple Selected Items
in ListView Tutorial
7 comments a year ago
sujith thycattussery How to change
imageview (flags) dynamically?
Android Search Filter XML Parse Images
and Texts Tutorial
20 comments a year ago
AndroidBegin Your file in inaccessible
directly. I'm getting this result "HTTP verb
used to access this page is not allowed."
which
Android Populating Spinner with JSON Android Parse.com Simple Login and
ALSO ON ANDROIDBEGIN
Join the discussion
Reply
Guest 7 months ago
Hi!
I'm unable to find the FragmentTabHost with:
import android.support.v4.app.FragmentTabHost;
I managed to foloow your previous tutorial on getting ActionBarSherlock tabs
implemented, but the same project setup cannot find this library. Any thoughts?

3
Reply
Ryan Kitlitz a month ago Guest
Make sure the support library is included in your project.
1. Right click your project, click properties.
2. Click Java Build Path
3. Click Libraries
4. Click Add External Jars
5. Locate android-support-v4.jar ( [sdk-install-path]/extras/android/support/v4/ )
6. Click the Order and Export tab
7. Make sure the checkbox next to android-support-v4.jar is selected.


Reply
tam nguyen 10 months ago
Hi , AndroidBegin
i'm Tam, I'm from Viet Nam
i'm asked you.
i want 1 button in tab1, whe onclick button by send "hello" and open tab2.
please help me.
thank you.

1
WHAT'S THIS?
Share
Share
Share
Android Populating Spinner with JSON
Tutorial
18 comments 9 months ago
Stephen There will be a incomplete
coding in these tutorial.they didn't add
JSONFunction class.With the help of Http
request only we
Android Parse.com Simple Login and
Signup Tutorial
6 comments a year ago
Di Great Tutorial! thanks!One mistake
though:LoginSignupActivity.javaline 30 -

Subscribe Add Disqus to your site

Advertise Here
(https://buysellads.com/buy/detail/185711/zone/1288064?
utm_source=site_185711&utm_medium=website&utm_campaign=adhere&utm_content=zone_1288064)
Popularity Posts Widget
Implementing ActionBarSherlock Side Menu Navigation Drawer i...
(http://www.androidbegin.com/tutorial/implementing-actionbarsherlock-side-menu-
navigation-drawer-in-android/)
Views (53009) | Comments (153)
Android Video Streaming (VideoView) Tutorial
(http://www.androidbegin.com/tutorial/android-video-streaming-videoview-tutorial/)
Views (26443) | Comments (42)
Android Google Cloud Messaging GCM using PHP Tutorial
(http://www.androidbegin.com/tutorial/android-google-cloud-messaging-gcm-tutorial/)
Views (26155) | Comments (95)
Android JSON Parse Images and Texts Tutorial
(http://www.androidbegin.com/tutorial/android-json-parse-images-and-texts-tutorial/)
Views (26146) | Comments (102)
Implementing Fragment Tabs in Android (http://www.androidbegin.com/tutorial/implementing-
fragment-tabs-in-android/)
Views (25560) | Comments (39)
Android ActionBarSherlock ViewPager Tabs Tutorial
(http://www.androidbegin.com/tutorial/android-actionbarsherlock-viewpager-tabs-tutorial/)
Views (20308) | Comments (104)
Implementing ActionBarSherlock in Android
(http://www.androidbegin.com/tutorial/implementing-actionbarsherlock-in-android/)
Views (16103) | Comments (25)
Android ViewPager Gallery Images and Texts Tutorial
(http://www.androidbegin.com/tutorial/android-viewpager-gallery-images-and-texts-tutorial/)
Views (14839) | Comments (22)
Implementing ActionBarSherlock Fragment Tabs in Android
(http://www.androidbegin.com/tutorial/implementing-actionbarsherlock-fragment-tabs-in-
android/)
Views (13866) | Comments (32)
ActionBarSherlock Side Menu Navigation with Nested ViewPager...
(http://www.androidbegin.com/tutorial/actionbarsherlock-side-menu-navigation-nested-
viewpager-fragment-tabs-tutorial/)
Views (12533) | Comments (25)
advertise here
(https://buysellads.com/buy/detail/185711/zone/1289979?
utm_source=site_185711&utm_medium=website&utm_campaign=cpmadhere&utm_content=zone_1289979)
Find us on Facebook
AndroidBegin
935 people like AndroidBegin.
Facebook social plugin
Like
AndroidBegin.com
+ 257
Follow +1
advertise here
(https://buysellads.com/buy/detail/185711/zone/1289509?
utm_source=site_185711&utm_medium=website&utm_campaign=cpmadhere&utm_content=zone_1289509)
Subscribe to our Newsletter

Insert email address
Subscribe!
Navigate
About Us (http://www.androidbegin.com/about-us/)
Advertise (http://www.androidbegin.com/advertise/)
Contact Us (http://www.androidbegin.com/contact-us/)
Privacy Policy (http://www.androidbegin.com/privacy-policy/)
Terms of Service (http://www.androidbegin.com/terms-of-service/)
(http://facebook.com/AndroidBegin) (http://twitter.com/AndroidBeginBlg)
(http://youtube.com/AndroidBeginBlg) (http://plus.google.com/+androidbegin)
(http://delicious.com/androidbegin) (http://about.me/androidbegin)
(http://www.androidbegin.com/feed/)
Copyright 2014 AndroidBegin.com. All rights reserved. Privacy Policy (http://www.androidbegin.com/privacy-policy/).
(http://creativecommons.org/licenses/by-sa/3.0/deed.en_GB)
AndroidBegin.com content is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License
(http://creativecommons.org/licenses/by-sa/3.0/deed.en_GB).
For any reuse or distribution, you must make clear to others the license terms of this work. The best way to do this is with a link to this web
page.
All trademarks and registered trademarks appearing on AndroidBegin.com are the property of their respective owners.
(http://affl.sucuri.net/?affl=3b7d2098dcd7cd558c291195ac47738a)
(http://www.site5.com/in.php?id=207303-40)
(http://www.statcounter.com)