Partially show the next and the previous item when using JakeWharton/ViewPagerIndicator

Question

I am using JakeWharton/ViewPagerIndicator and i am trying to get an effect were the current item is fully visible while the next and the previous items are just partially visible. Any ideas of how i go about achieving this.

Answer 1

1. ViewPagerIndicator has nothing to do with this. It just provides with some sort of titles of pages (not necessarily text-based). To make it work you will need to work with the ViewPager itself and its PagerAdapter.

2. You need to override getPageWidth method of your PagerAdapter and make it return a float value <1.0f for pages (positions) that you don't want to fit the whole width of the screen. If you want the same behaviour for all pages of your ViewPager, just make getPageWidth return a fixed value <1.0f. So for example it could've looked like that:

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

3. The previous step will result in something like this:

And I assume your goal looks more like this:

And it's not really that easy to transition between those two ways of displaying pages by a ViewPager (it does not provide with any default way to change gravity of pages or something). And to make your ViewPager display those pages in the center of the View you will need to struggle a bit. There are few threads on SO about that. Ones that I think might help you are this and this. Apart from that you can use this approach.