ActionBarSherlock Side Menu Navigation with Nested ViewPager Fragment Tabs Tutorial

In this tutorial, you will learn how to implement ActionBarSherlock Side Menu Navigation with Nested ViewPager Fragment Tabs in your Android application. The navigation drawer is a panel that transitions in from the left edge of the screen and displays the main navigation options. Using a Side Menu Navigation Drawer allows the user to easily navigate between fragments or activities. The navigation drawer can be brought onto the screen by swiping from the left edge of the screen or by touching the application icon on the action bar. We will create a custom side menu navigation drawer using ActionBarSherlock Library and on selected menu item click will show a fragment and a ViewPager with Tabs. So lets begin…

Download the Latest Support Library

Download the latest support library revision 13 that supports the new Navigation Drawer. 

Link : http://developer.android.com/tools/extras/support-library.html

Replace the old support library (android-support-v4.jar) with the new support library in your ActionBarSherlock Library.

Support Package, revision 13 (May 2013)

Changes for v4 support library:
  • Added DrawerLayout for creating a Navigation Drawer that can be pulled in from the edge of a window.

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

Application Name : MenuViewPagerTutorial

Project Name : MenuViewPagerTutorial

Package Name : com.androidbegin.menuviewpagertutorial

Open your MainActivity.java and paste the following code.

MainActivity.java

In this activity, we have created some sample titles, subtitles and icons into a string and integer arrays and passed it into MenuListAdapter to display it on a listview as a side menu. On listview side menu click will display the selected fragment together with the title on the action bar. The ActionBarDrawerToggle facilitates the proper interaction behavior between the action bar icon and the navigation drawer.

We have prepared some sample icons for this tutorial. Insert your downloaded sample icons into your res > drawable-hdpi.

Sample Icons

SideMenu Sample Images (7.0 KiB, 3547 downloads)

Next, create an XML graphical layout for your navigation drawer. Go to res > layout > Right Click on layout > New > Android XML File

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

drawer_main.xml

Next, create a custom menu adapter class. Go to File > New > Class and name it MenuListAdapter.java. Select your package named com.androidbegin.menuviewpagertutorial and click Finish.

Open your MenuListAdapter.java and paste the following code.

MenuListAdapter.java

In this custom menu adapter class, string and integer arrays are set into the TextViews and ImageViews followed by the positions.

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

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

drawer_list_item.xml

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

Open your Fragments1.java and paste the following code.

Fragments1.java

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

Open your Fragments2.java and paste the following code.

Fragments2.java

In this activity,  we have created the ViewPager from a ViewPagerAdapter class.

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

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

fragment1.xml

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

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

viewpager_main.xml

Next, create a ViewPager Adapter class. Go to File > New > Class and name it ViewPagerAdapter.java. Select your package named com.androidbegin.menuviewpagertutorial and click Finish.

Open your ViewPagerAdapter.java and paste the following code.

ViewPagerAdapter.java

In this ViewPagerAdapter class, we have declared the number of ViewPager pages and on tab switch or flip will show different fragments.

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

Open your FragmentTab1.java and paste the following code.

FragmentTab1.java

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

Open your FragmentTab2.java and paste the following code.

FragmentTab2.java

Next, create an XML graphical layout for first viewpager 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

Next, create an XML graphical layout for first viewpager 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

Next, change the application name and texts. Open your strings.xml in your res > values folder and paste the following code.

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

Output:

MenuViewPagerTutorial ScreenShots

Source Code:  

MenuViewPagerTutorial (4.3 MiB, 1616 downloads)
  • http://www.AndroidBegin.com/ AndroidBegin

    I’ll check on it. Thanks for your feedback.

  • Umar

    coool !!
    haven’t checked if it works but looking forward to implement the layout on my app :)

  • MIKI

    Thaks for that, it realy helps me :D
    But what can I do when I want TextView or AutoCompeteTextView instead the tile (I mean Title Fragment 1 and Title Fragment 2 in ActionBar) nex to button in top-left

  • Balazs Ruda

    Hi,
    I had the same problem on 2.3.
    I deleted the following line from the drawer_list_item.xml;
    android:background=”?android:attr/activatedBackgroundIndicator”
    After this, it works fine.

  • Martin JM

    is this App also compatible with android 2.3?

  • Alexander

    Thank you thank you thank you! Worked perfectly. I wanted to put menu items in xml but had trouble parsing out the icon drawables from xml. The following tutorial helped (hint: int[] becomes TypedArray) http://androidcookbook.com/Recipe.seam;jsessionid=FBBDB8B566AF5762933354F7F6989661?recipeId=1418

    • http://www.AndroidBegin.com/ AndroidBegin

      Hi there, I’m glad this tutorial helped you. :)

  • Alexmuller1416

    how to use intent in the project

  • Tom

    This is makes the app look a lot more professional, thanks for teaching :)

  • JoJo

    Please show me how to add action for fragment 1. Thanks

  • anushya subbiah

    hey thanks for the tutorial.. it was great.. i ran it in my emulator. There was no problem.But when i exported there was a problem. eclipse closed abruptly whenever i finished the export procedure. Any solution for this.

  • Fred

    Thank you very very much for the tutorial. its amazing. this might be a stupid question. but can i add more fragments to the drawer menu. and give seperate tabs for the new fragments. if its possible will you please help me. Thanks anyways.

  • Artem

    Hello!

    Thanks for the tutorial! But here is one question – why we should use child FragmentManager via getChildFragmentManager() instead of accessing FragmentManger directly? Thanks in advance!

  • Albert John Mwanjesa

    Hi,

    First, thank you for your tutorials, they are very helpful.

    With this tutorial I have one problem. It seems that my ActionbarSherlockProject is missing the ActionbarDrawerToggle widget and also the DrawerLayout widget as well. How do I solve this problem?

    Thank you in advance!

  • Andrew

    I try to load strings from resource like this:
    Original: private String titles[] = new String[] { “Tab1″, “Tab2″ };

    Modification:
    Resources titles_array = context.getResources();
    String[] titles = titles_array.getStringArray(R.array.title);

    Unfortunetly app crash always. What else can I do to load titles from resource?

    • NikoWeb

      Hi, I also had the same problem, did you solved? please help me.

      try to do the same but with the slide titles and app crashes

  • Çağrı Çakır

    Great, simple and clear explanation. Thanks.

  • chandu

    very good………….. and thank u for u r Tutorial..

  • Nguyễn Hoàng Anh

    how can I use viewpager tabswipe in actionbar not TabStrip

  • Tony Kim

    Im using webview inside the fragment… i need to load the back page. when back pressed… While im doing so, the application exits. Help me….

  • ProSpartan

    Awesome stuff! Been looking for something like this for ages.

    Question: How can i build my programs without having the Sherlock action bar program in my workspace? I can get the .jar file which is basically all that is needed for most of the programming except for the res files. Is there a way to have those without including them in my program?

  • NikoWeb

    Thank you very much for the article, took 4 days looking for something.

    Please help me to add more tabs.

    I try to do it but the app crashes upon opening when I add the name of the layer in this line of activity.

    Thank you very much.

    • NikoWeb

      After 3 days a silly mistake, I answer myself.

      There was forgetting generating a third menu icon.

      need to add the icon to the fragment 3 to the stretch hdpi folder

      and generate it in the activity.

  • Siju

    I have been trying to implement menu options in child fragment of view pager . But the onCreateOptionsMenu never gets called. Can you pleas help?

  • waseem ahmad

    My Second Tab Is not Responding …I worked As U did In Tutorial …1st tab Is Working ..When I i sweep For Second Not displaying Blank …….

    can u tell whats wrong

  • waseem ahmad

    second Tab Is not Performing ….i mean Content Of Second Tab Is Not Running Please Help

  • waseem ahmad

    can u tell ME How to Update Tabs mean refresh……please rply soon

    • http://www.AndroidBegin.com/ AndroidBegin

      Hi Waseem, I apologize for replying so late. I’ve been busy updating this site. Please ask your questions in stackoverflow. Thank you.

  • Leto

    Hello,

    Thanks for this tutorial. I search for long time to use the NavigationDrawer and the Viewpager and the solution it’s the ActionbarSherlock.

    I have a problem in Fragment2 class. The methode onCreateView doesn’t recognize the call at getChildFragmentManager().
    ActionBarSherlock is in my library and I delete the standard library (android.support.v4.jar)

    Do you have any idea to solve my probleme?