Android Viewpager with partial view on 4 fragments

Question

I'm using viewpager and populating it with 4 fragments.
I cannot upload images to show what it looks like. However, I have uploaded the images to a picture hosting website and have included the link to the image here.
What I need is: http://postimg.org/image/3l4h53ucl/

However, what I can currently get to work is: http://postimg.org/image/m5kauitzr/

How can I fix this? I have seen this being done perfectly on a viewpager with 3 pages:
ViewPager - get a partial view of the next page

MainActivity.java Global Variables

    PagerAdapter myPagerAdapter;
    ViewPager myPager;
    List<Fragment> myDefaultFragments;

MainActivity.java

    myDefaultFragments = new Vector<Fragment>();
    myDefaultFragments.add(Fragment.instantiate(this, SettingsFragment.class.getName()));
    myDefaultFragments.add(Fragment.instantiate(this, MainFragment.class.getName()));
    myDefaultFragments.add(Fragment.instantiate(this, FriendsFragment.class.getName()));
    myDefaultFragments.add(Fragment.instantiate(this, MessagesFragment.class.getName()));

    myPagerAdapter = new PagerAdapter(this.getSupportFragmentManager(), myDefaultFragments);

    myPager = (ViewPager) findViewById(R.id.viewPager);
    myPager.setAdapter(myPagerAdapter);

PagerAdapter.java

public class PagerAdapter extends FragmentPagerAdapter {

private List<Fragment> myFragments;

public PagerAdapter(FragmentManager fm, List<Fragment> fragments){
    super(fm);
    this.myFragments = fragments;
}

@Override
public Fragment getItem(int whichFrag){
    return  this.myFragments.get(whichFrag);
}

@Override
public int getCount(){
    return this.myFragments.size();
}

@Override
public float getPageWidth(int position) {

    if (position == 0 || position == 2){
        return 0.9f;
    } else if (position == 3) {
        return 0.8f;
    }
    return 1f;
}
}

Take a look at this thread : http://stackoverflow.com/questions/13914609/viewpager-with-previous-and-next-page-boundaries — Andros, Jan 15 '14 at 18:02

score 0 · Answer 1 · answered Jan 15 '14 at 17:58

I don't know exactly what values you need to enter, but you should try some values and check what they do.

My guess:

Position 0: 0.9f

Position 1: 1.3f

Position 2: 1f

Position 3: 0.8f

I'm not sure what the ViewPager does for values larger than 1.0f, but it might work.

score 0 · Answer 2 · answered Jan 15 '14 at 18:10

0

change:

@Override
public float getPageWidth(int position) {

    if (position == 0 || position == 2){
        return 0.9f;
    } else if (position == 3) {
        return 0.8f;
    }
    return 1f;
}

to:

@Override
public float getPageWidth(int position) {


    switch(position){
        case 0:
           return 0.9f;
        case 1:
           return 1.2f;
        case 2:
           return 1f;
        case 3:
           return 0.9f;
        default:
           return 1f;
    }

}

answered Jan 15 '14 at 18:10

vipul mittal

17,343
3
41
44

Because the return on case 1 is 1.2f, it actually makes the viewpager extend the page over. However, when the position comes to case 2, it covers the whole view. I changed the return 1f on case 2 to 0.9f but still doesn't work. – Parham Bakhtiari Jan 16 '14 at 02:19

Android Viewpager with partial view on 4 fragments

2 Answers2