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?
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
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.
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();
}
