CODEWITHSUNDEEP
androidandroid-fragmentsandroid-actionbarandroid-viewpager
VENKI
VENKI

Reputation: 88

How to implement a Viewpager with tabstrip inside a fragment?

hello Friends i am little new to this Fragments concept!

Problem is

I am having a Actionbar with tabs and fragments now I want to implement viewpager inside one of the fragment of Actionbar tabs.

the point is to implement View pager with tabstrip inside a fragment

Please help me!

enter image description here

Upvotes: 1

Views: 1358

Answers (1)

foobar
foobar

Reputation: 78

I hope that will be useful at least for anyone with the same problem if not for you.
You can put this fragment in every tab from action bar. The code is:

public class TabFragment extends Fragment {

ViewPager mViewPager;
DemoCollectionPagerAdapter mPagerAdapter;

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
                         Bundle savedInstanceState) {
    View view = inflater.inflate(R.layout.fragment_tab, container, false);

    mPagerAdapter = new DemoCollectionPagerAdapter(getChildFragmentManager());

    // Set up the ViewPager, attaching the adapter.
    mViewPager = (ViewPager) view.findViewById(R.id.view_pager);
    mViewPager.setAdapter(mPagerAdapter);

    return view;
    }
}

I took PagerAdapter from the Effective Navigation example and just removed the "static" attribute in order to move it in the separate file:

public class DemoCollectionPagerAdapter extends FragmentStatePagerAdapter {

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

@Override
public Fragment getItem(int i) {
    Fragment fragment = new DemoObjectFragment();
    Bundle args = new Bundle();
    args.putInt(DemoObjectFragment.ARG_OBJECT, i + 1); // Our object is just an integer :-P
    fragment.setArguments(args);
    return fragment;
}

@Override
public int getCount() {
    // For this contrived example, we have a 100-object collection.
    return 5;
}

@Override
public CharSequence getPageTitle(int position) {
    return "OBJECT " + (position + 1);
}

/**
 * A dummy fragment representing a section of the app, but that simply displays dummy text.
 */
public static class DemoObjectFragment extends Fragment {

    public static final String ARG_OBJECT = "object";

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
            View rootView = inflater.inflate(R.layout.fragment_collection_object, container, false);
            Bundle args = getArguments();
            ((TextView) rootView.findViewById(android.R.id.text1)).setText(
                Integer.toString(args.getInt(ARG_OBJECT)));
            return rootView;
        }
    }
}

And the fragment_tab.xml for this TabFragment is:

<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 xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/view_pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

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

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

Consider using a PagerTabStrip as a child view of ViewPager if you want the tab headers to be clickable and a PagerTitleStrip for them to be static (user can only swipe in order to switch to the tab).
Depending on your implementation of ActionBar with tabs I suppose there can arise some dependency problems because in this example I've used support library.

Upvotes: 3

Related Questions