[Android] NavigationDrawer, NavigationBar and NestedFragments without third library

After many search and tests, I would share with you my solution to have a Navigation Drawer and a Navigation Bar with all of you.

This is possible with nested fragment and without using any third library like ActionBarScherlock, … but only compatible with android 14+. Wich is, for me, the only platform version range that we should really support for new application.

In short : this will allow you to have a navigation tab inside fragment handled by the navigation drawer.

In order to be a clear and consise, we would have the following statements :

MainActivity (with the navigation drawer) → MySuperFragment (with the navigation bar) → MyFragments (inside MySuperFragment )

Step 1 : Create the Navigation Drawer

I don’t want copy/paste any tutorial or documents, moreover the google documentation describe all we want for setup a Navigation Drawer, so I put the link here, and you have just to follow and understand what’s the code is doing.

⇒Creating a Navigation Drawer

Once your navigation drawer setup (one fragment per menu item), rename your first fragment in MySuperFragment1 in order to follow the rest of the tutorial.

Step 2 : Insert our Navigation Bar into fragments

First of all, like decribed in the Google navigation bar documentation, we need a PagerAdapter to manage the navigation between nested fragments

public class MySuperFragment1Adapter extends FragmentPagerAdapter {
	private final Map<String, Fragment> map = new HashMap<String, Fragment>();
	private final Context context;

	public MySuperFragment1Adapter(FragmentManager fm, Context context) {
		super(fm);
		this.context = context;
	}

	@Override
	public Fragment getItem(int pos) {
		switch (pos) {
		case 0:
			return new MyFragment1();
		case 1:
			return new MyFragment2();
		case 2:
			return new MyFragment3();
		}
		return null;
	}

	@Override
	public int getCount() {
		return context.getResources().getStringArray(R.array.superFragment1_tabslist).length;
	}

	@Override
	public CharSequence getPageTitle(int pos) {
		return context.getResources().getStringArray(R.array.superFragment1_tabslist)[pos];
	}

Now we have to add the navigationbar and the nested fragment view in the layout.
Open your XML layout and fill it with the following :

<!--?xml version="1.0" encoding="utf-8"?-->
<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.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >
        <android.support.v4.view.PagerTabStrip
            android:id="@+id/pagerTabStrip"
            android:layout_width="fill_parent"
            android:layout_height="30dp"
            android:layout_gravity="top" >
        </android.support.v4.view.PagerTabStrip>
    </android.support.v4.view.ViewPager>
</LinearLayout>

Finnaly, we have to update our fragment’s onCreateView to add the navigation tab handler.

        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container,
                Bundle savedInstanceState) {
            View rootView = inflater.inflate(R.layout.superfragment_one, container, false);
            MySuperFragment1Adapter mSectionsPagerAdapter = new MySuperFragment1Adapter(getChildFragmentManager(), getActivity());;
            ViewPager mViewPager = view.findViewById(R.id.viewPager);
            mViewPager.setAdapter(mSectionsPagerAdapter);
            if (savedInstanceState == null) {
                mViewPager.setCurrentItem(1);
            }


            return rootView;
        }
Share and Enjoy:
  • Print
  • Facebook
  • Digg
  • Sphinn
  • del.icio.us
  • Mixx
  • Google Bookmarks
  • Add to favorites
  • MSN Reporter
  • MySpace

Leave a Reply