Can I set viewpager's item width?

Question

I hope I can show 3 items in a page of viewpager, but now I only could set viewpager's padding value and margin value, so it only show one item in a page of viewpager. How can I set the item width? I think if I can set more little width of item, the viewpager will show more items in a page.

Answer 1

Quick Answer

What you want is overriding getPageWidth in the PagerAdapter implementation you made for that ViewPager.

For example setting it to 0.8f will make a single page cover only 80% of the viewpagers width so that part of the next and/or previous pages are visible.

@Override
public float getPageWidth(final int position) {
    return 0.8f;
}

More information at https://developer.android.com/reference/android/support/v4/view/PagerAdapter.html#getPageWidth(int)

Other remarks

Also note that the negative margins will only cause the separate pages to overlap each other. The margin is used to define the space between each page.

If no alternative pageWidth is configured (there is no setter, only the override) it will cover 100% by default making no part of the other pages visible unless dragged.

Code example

A very nice overview of what is possible can be found here https://commonsware.com/blog/2012/08/20/multiple-view-viewpager-options.html

The view pager in your layout

<android.support.v4.view.ViewPager
    android:id="@+id/viewpager"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
</android.support.v4.view.ViewPager>

Example of an inline configured Adapter implementation, this would go in the onCreate or onViewCreated methods:

// get a reference to the viewpager in your layout
ViewPager mViewPager = (ViewPager) findViewById(R.id.viewpager);
// this margin defines the space between the pages in the viewpager mViewPager.setPageMargin(context.getResources().getDimensionPixelSize(R.dimen.margin_normal));
// setting the adapter on the viewpager, this could/should be a proper Adapter implementation in it's own class file instead
mViewPager.setAdapter(new PagerAdapter() {

    // just example data to show, 3 pages
    String[] titles = {"Eins", "Zwei", "Drei"};
    int[] layouts = {R.layout.layout1, R.layout.layout2, R.layout.layout3};

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        LayoutInflater inflater = LayoutInflater.from(MainActivity.this);
        // here you can inflate your own view and dress up
        ViewGroup layout = (ViewGroup) inflater.inflate(layouts[position], container, false);
        container.addView(layout);
        return layout;
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView((View)object);
    }

    @Override
    public float getPageWidth(final int position) {
        return 0.8f;
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return titles[position];
    }

    @Override
    public int getCount() {
        return layouts.length;
    }

    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view == object;
    }
});

Example code based on https://newfivefour.com/android-viewpager-simple-views.html

Answer 2

Have you tried setting the page margins to a negative value, see setPageMargin(int)? If I remember correctly, I read someone realizing something similar to what you're describing that way.

Alternatively, you could have a look at using a Gallery in stead, although I have to admit I'm not a big fan of them as they seem to be less flexible and more buggy.