Android: Viewpager inside a fragment of Navigation Drawer

Question

I'm currently developing an Android application what I need is to implement a Viewpager or Tabs inside a fragment of Navigation Drawer. I already implemented the Navigation Drawer from this tutorial: Navigation Drawer Tutorial

Now I have my Navigation Drawer consist of 3 fragments. Fragment A, Fragment B, Fragment C

on Fragment A how can I add a Viewpager for this Fragment?

Answer 1

Here you go.. first the tabbed or view pager fragment class..

public class TabbedFragment extends Fragment {
private SectionsPagerAdapter mSectionsPagerAdapter;
public static final String TAG = TabbedFragment.class.getSimpleName();

/**
 * The {@link ViewPager} that will host the section contents.
 */
ViewPager mViewPager;


public static TabbedFragment newInstance() {
    return new TabbedFragment();
}

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
}

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    View v = inflater.inflate(R.layout.fragment_viewpager_network, container, false);
    mSectionsPagerAdapter = new SectionsPagerAdapter(
            getChildFragmentManager());

    mViewPager = (ViewPager) v.findViewById(R.id.pager);
    mViewPager.setAdapter(mSectionsPagerAdapter);

    return v;
}


public class SectionsPagerAdapter extends FragmentPagerAdapter {

    public SectionsPagerAdapter(FragmentManager fm) {
        super(fm);
    }

    @Override
    public Fragment getItem(int position) {
        // getItem is called to instantiate the fragment for the given page.
        // Return a DummySectionFragment (defined as a static inner class
        // below) with the page number as its lone argument.
        if (position == 0)
            return FragmentOne.getInstance();
        else
            return FragmentTwo.getInstance();
    }

    @Override
    public int getCount() {
        // Show 2 total pages.
        return 2;
    }

    @Override
    public CharSequence getPageTitle(int position) {
        Locale l = Locale.getDefault();
        switch (position) {
            case 0:
                return "Fragment 1";
            case 1:
                return "Fragment 2";
        }
        return null;
    }
  }
}

the xml file tabbed_fragment.xml

<android.support.v4.view.ViewPager
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent">

<!--
This title strip will display the currently visible page title, as well as the page
titles for adjacent pages.
-->

<android.support.v4.view.PagerTitleStrip
    android:id="@+id/pager_title_strip"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="top"
    android:background="#33b5e5"
    android:paddingBottom="4dp"
    android:paddingTop="4dp"
    android:textColor="#fff" />

</android.support.v4.view.ViewPager>

usage in activity class that uses Navigation Drawer, Note : I used navigation drawer code pre given by android studio 1.2

@Override
public void onNavigationDrawerItemSelected(int position) {
    boolean isChild = getSharedPreferences(Constansts.PREFERENCE_NAME,0).getBoolean(Constansts.IS_CHILD,false);
    Fragment fragment = null;
    if (lastSelectedPosition == position)
        return;
    lastSelectedPosition = position;
    switch (position) {
        case 0:
            fragment = HomeFragment.getInstance();
            break;
        case 1:
            fragment = HomeFragment.getInstance();
            break;
        case 2:
            fragment = UserProfileFragment.getInstance();
            break;
        case 3:
            fragment = TabbedFragment.getInstance();
            break;
    }
    if (fragment == null) {
        fragment = HomeFragment.getInstance();
    }
    fragmentManager = getSupportFragmentManager();
    fragmentTransaction = fragmentManager.beginTransaction();
    fragmentTransaction.replace(R.id.container, fragment).addToBackStack(mTitle.toString());
    fragmentTransaction.commit();
}

Answer 2

This is possible for Android < 4.2. In your Fragment A onCreateView method, when you're inflating the root View, inflate your layout containing the android.support.v4.view.ViewPager:

View rootView = inflater.inflate(R.layout.your_viewpager_layout, container, false);

your_viewpager_layout.xml being something similar to the following:

<android.support.v4.view.ViewPager
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.yourapp.YourActivity" />

Then in your FragmentPagerAdapter.getItem(int position) method, return the Fragment you want to display in your ViewPager, as you would do in a "normal" ViewPager.

Answer 3

This is definitely possible. You just need to use child fragments for the viewpager. Other than that the implementation is straightforward. Create a custom pager adapter, use the standard viewpager api

Extend FragmentPagerAdapter like so:

private class MyPagerAdapter extends FragmentPagerAdapter
{
    public MyPagerAdapter (FragmentManager fm) {
        super(fm);
    }

    @Override
    public Fragment getItem(int i) {
        switch (i) {
            case 0:
                return Fragment1;
            case 1:
                return Fragment2;

        }
    }

    @Override
    public int getCount() {
        return 2;
    }

    @Override
    public CharSequence getPageTitle(int position) {
        switch (position) {
            case 0:
                return FRAGMENT_1_NAME;
            case 1:
                return FRAGMENT_2_NAME;



        }
    }

You'll need an layout with a viewpager of course, then just make sure to hook it up like this in Fragment A:

myPagerAdapter = new MyPagerAdapter(this.getChildFragmentManager());
myPager = (ViewPager) mRoot.findViewById(R.id.pager);
myPager.setAdapter(myPagerAdapter);

Note that you'll need to use the support library and support fragments unless your minimum SDK is 4.2 or higher, since the child fragments are API 17

Answer 4

There is a ViewPager class that is part of the support library. You should be able to use that along with a PagerAdapter.