CODEWITHSUNDEEP
androidandroid-fragmentsandroid-viewpager
Siju
Siju

Reputation: 2655

Increase number of visible tabs in Viewpager

I have total of 5 fragments inside a Viewpager and I want to display 2 tabs on either side of the current visible tab.

Example : My current tab is 2 . And I want tab 0, tab 1 to left and tab 3,tab 4 to the right to be displayed at once.

I tried setting viewPager.setOffscreenPageLimit(2) but it didnt' work. I still see only 1 tab displayed on either sides. What am I missing?

public class TabsFragment extends Fragment {
    mViewPager = (ViewPager) view.findViewById(R.id.pager);
    titleStrip = (PagerTitleStrip) view.findViewById(R.id.titlestrip);
    adapter = new TabsPagerAdapter(getChildFragmentManager(), getActivity());
    mViewPager.setAdapter(adapter);
    mViewPager.setOffscreenPageLimit(2);
    mViewPager.setCurrentItem(2);
 }

public class TabsPagerAdapter extends FragmentStatePagerAdapter {

private Context context;

public TabsPagerAdapter(FragmentManager fm, Context c) {
    super(fm);
    context = c;
}

@Override
public Fragment getItem(int index) {

    switch (index) {

        case 0:
            return new FirstFrag();
        case 1:
            return new SecondFrag();
        case 2:
            return new ThirdFrag();
        case 3:
            return new FourthFrag();
        case 4:
            return new FifthFrag();
        default:
            return new SecondFrag();
    }

}

@Override
public int getCount() {
    // get item count - equal to number of tabs
    return 5;
}
}

Upvotes: 2

Views: 3728

Answers (2)

Siju
Siju

Reputation: 2655

Solved this issue by using TabLayout. Posting the code for future readers.

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/ThemeOverlay.AppCompat.Light">

   <android.support.v7.widget.Toolbar
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/awesome_toolbar"
        android:layout_width="match_parent"
        android:layout_height="74dp"
        android:background="#ff31353f"
        android:paddingTop="20dp"
        app:popupTheme="@style/AppTheme"
        app:theme="@style/ToolbarTheme"/>

    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabMode="scrollable"/>
</android.support.design.widget.AppBarLayout>

<android.support.v4.view.ViewPager
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>

public class TabsFragment extends Fragment {
 @Override
public void onViewCreated(View view, Bundle savedInstanceState) {
    mViewPager = (ViewPager) view.findViewById(R.id.pager);
    tabLayout = (TabLayout)view.findViewById(R.id.tabs);
    adapter = new TabsPagerAdapter(getChildFragmentManager(), getActivity());
    adapter.addFragment(new FirstFrag(), getResources().getString(R.string.frag1));
    adapter.addFragment(new SecondFrag(), getResources().getString(R.string.frag2));
    adapter.addFragment(new ThirdFrag(), getResources().getString(R.string.frag3));
    adapter.addFragment(new FourthFrag(), getResources().getString(R.string.frag4));
    adapter.addFragment(new FifthFrag(), getResources().getString(R.string.frag5));
    mViewPager.setAdapter(adapter);
    mViewPager.setOffscreenPageLimit(2);
    mViewPager.setCurrentItem(2);
    tabLayout.setupWithViewPager(mViewPager);
}

Upvotes: 3

Drilon Blakqori
Drilon Blakqori

Reputation: 2826

You need to modify your ViewPager adapter. Override the public Fragment getItem(int position) method, and create a custom Fragment that will contain the current fragment and the fragment in position-1 in the left, position+1 in the right. You may have to override the public int getCount() method too. I didn't try an implementation like this before but I think this is the way to approach this.

Upvotes: 0

Related Questions