0

I have an android project that my client is requiring me to have a ViewPager similar to the image below.

enter image description here

Showing three panel at a time. The current selected panel will show full at the center, the panel before the selected one (if there is) will be shown half, and the panel after the selected one will be shown in half as well.

Do you guys have any idea in how to do this? Still new in Android an im slowly getting lost when it comes to this kind of stuff?

Here is the code that i have so far that will only show one panel.

ViewPager viewPagerShopPortfolio = (ViewPager) 
mShopPortfolioImageAdapter = new ShopPortfolioImageAdapter(getChildFragmentManager(), portfolioListingModelList);
viewPagerShopPortfolio.setAdapter(mShopPortfolioImageAdapter);

And this is how my app looks like right now which only shows one panel. enter image description here

dalemncy
  • 609
  • 8
  • 26

2 Answers2

1

Well, i found a second solution for this using the following codes:

XML:

<android.support.v4.view.ViewPager
  android:id="@+id/viewPagerShopPortfolio"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:layout_gravity="center"
  android:gravity="center"
  android:clipToPadding="false"
  android:paddingLeft="60dp"
  android:paddingRight="60dp"
  android:background="@color/colorFontWhite" />

Java:

ViewPager viewPagerShopPortfolio = (ViewPager) view.findViewById(R.id.viewPagerShopPortfolio);
viewPagerShopPortfolio.setPageMargin(30);

Here is the following result:

enter image description here

dalemncy
  • 609
  • 8
  • 26
0

You can override getPageWidth method of PageAdapter. For example return 0.7f to have all child pages span only 70% of the ViewPager's width.

Or you can use library:

https://github.com/Pixplicity/MultiViewPager

More information about that lib you can find in [that][2] answer.

Sever
  • 2,338
  • 5
  • 35
  • 55