Android ViewPager padding/margin between page fragments

Question

Android Market/Google Music seem to be able to have a gap of some sort between the different fragments that are contained in the ViewPager.

Any idea how this is done? Adding margin/padding to the actual fragment view doesn't work, because the view still needs to occupy the entire width of the screen. The 'gap' is only visible when swiping the ViewPager.

score 128 · Answer 1 · edited Oct 24 '12 at 16:06

128

In Support Package, r4 you can use these methods:

setPageMargin(int marginPixels)
setPageMarginDrawable(Drawable)
setPageMarginDrawable(int)

in ViewPager class.

I don't know why this doesn't have equivalent in XML :-(

If you need use dip unit you can use this method:

public static int convertDip2Pixels(Context context, int dip) {
    return (int)TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dip, context.getResources().getDisplayMetrics());
}

edited Oct 24 '12 at 16:06

Flynny75

1,593
1
11
11

answered Nov 01 '11 at 21:11

ATom

15,960
6
46
50

16

For dp to px conversion, I prefer the cleaner Context.getResources().getDimensionPixelOffset(int dimenId) method. – greg7gkb Jun 06 '13 at 22:10
getting resource not found when executing Context.getResources().getDimensionPixelOffset(int dimenId). The ID of teh dimension is correct but it doesnt work – Jono Oct 28 '14 at 15:01
use adapter reference instead of Context – Kaveesh Kanwal May 28 '15 at 17:08

score 24 · Answer 2 · answered Nov 17 '15 at 21:57

Hoping this might help someone with a ViewPager and page margins.

I wanted to have a ViewPager is a CardView and had issues with the padding and the margin between the viewpager pages. The setPageMargin did not work for me at all. I had to use the following:

int pagerPadding = 16;
pager.setClipToPadding(false);
pager.setPadding(pagerPadding, 0, pagerPadding, 0);

This allow the pages to be very close together.

score 7 · Answer 3 · answered Apr 11 '17 at 10:54

  viewPager.setPageMargin(dpToPx(10)); 
  // replace 10 with the value you want for margin in dp. 


 public int dpToPx(int dp) {
    DisplayMetrics displayMetrics = getActivity().getResources().getDisplayMetrics();
    return Math.round(dp * (displayMetrics.xdpi / DisplayMetrics.DENSITY_DEFAULT));
 }

score 5 · Answer 4 · answered Nov 21 '16 at 11:43

Try This .

    ViewPager viewPager = (ViewPager) findViewById(R.id.h_view_pager);
    viewPager.setClipToPadding(false);
    viewPager.setPadding(60, 0, 60, 0);
    viewPager.setPageMargin(20);
    ImagePagerAdapter adapter = new ImagePagerAdapter();
    viewPager.setOffscreenPageLimit(adapter.getCount());
    viewPager.setAdapter(adapter);

score 2 · Answer 5 · answered Sep 29 '16 at 11:28

2

pager.setClipToPadding(false); pager.setPadding(left,0,right,0); If you need space between two pages in the viewpager then add pager.setPageMargin(int);

answered Sep 29 '16 at 11:28

RAHULRSANNIDHI

527
6
20

score 1 · Answer 6 · answered Oct 02 '17 at 17:12

1

Try this

    viewPager.setClipToPadding(false);
    viewPager.setOffscreenPageLimit(2);
    viewPager.setPadding(20, 0, 20, 0);

answered Oct 02 '17 at 17:12

Ankit Aman

999
6
15

score 0 · Answer 7 · edited Sep 17 '20 at 07:31

here is a sample solution :

implement the ViewPager.OnPageChangeListener in your activity or your fragment where you use the ViewPager

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        int tabStripChildCount = mTabStrip.getChildCount();

        for (int i=0 ; i < tabStripChildCount ; i++){
            View view = mTabStrip.getChildAt(i);

            ViewGroup.MarginLayoutParams p = (ViewGroup.MarginLayoutParams) view.getLayoutParams();
            p.setMargins(0, 0, 50, 0);
            view.requestLayout();
        }
    }

mTabStrip is the table layout in your activity or fragment

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

    mSectionsPagerAdapter = new SectionsPagerAdapter(getChildFragmentManager());
    View view =  inflater.inflate(R.layout.patient_activity__fragment_tab_viewer, container, false);

    mViewPager = (ViewPager) view.findViewById(R.id.viewPager); 
    mViewPager.setAdapter(mSectionsPagerAdapter);

    mTabStrip = (SlidingTabLayout) view.findViewById(R.id.tabs);

    mTabStrip.setViewPager(mViewPager);
    return view;
}

finally you will have a margin between your title fragments

Android ViewPager padding/margin between page fragments

7 Answers7

Linked

Related