CODEWITHSUNDEEP
androidandroid-fragmentsandroid-viewpager
psychotik
psychotik

Reputation: 39029

Android ViewPager padding/margin between page fragments

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.

Upvotes: 66

Views: 60298

Answers (7)

Chakib Temal
Chakib Temal

Reputation: 332

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

Upvotes: 0

Ankit Aman
Ankit Aman

Reputation: 1009

Try this

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

Upvotes: 2

Anirudh
Anirudh

Reputation: 3428

  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));
 }

Upvotes: 8

Rambabu
Rambabu

Reputation: 93

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);

Upvotes: 5

RAHULRSANNIDHI
RAHULRSANNIDHI

Reputation: 537

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

Upvotes: 2

Ray Hunter
Ray Hunter

Reputation: 15557

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.

Example of the viewpager with a small margin between the pages.

Upvotes: 24

ATom
ATom

Reputation: 16200

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

Upvotes: 128

Related Questions