ViewPager with multiple visible children and large selected

Question

In my Activity I added Gallery -like View using the Dave Smith PagerContainer , and the code I use to create the instance is very similar to the PagerActivity in its example, while I changed the layout because I needed to use layouts:

 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <com.example.myapp.PagerContainer android:id="@+id/pager_container" android:layout_width="match_parent" android:overScrollMode="never" android:layout_marginTop="5dp" android:layout_marginBottom="5dp" android:layout_height="0dp" android:layout_weight="0.66" > <android.support.v4.view.ViewPager android:layout_width="150dp" android:overScrollMode="never" android:layout_height="match_parent" android:layout_gravity="center" /> </com.example.myapp.PagerContainer> <ImageView android:layout_width="150dp" android:layout_height="0dp" android:layout_weight="0.34" android:id="@+id/current_selection_logo" android:layout_gravity="center_horizontal"/> </LinearLayout> 

Now my ViewPager works correctly and looks like this (I omitted the bottom ImageView )

But I would like to resize the unselected elements to emphasize the centered element (selection), something like:

or

I found the accepted answer to this question, but the implementation of this solution means that I will make a choice more than its current sizes (which are already the maximum possible).

So I decided to edit instantiateItem in the PagerAdapter to set the reduced width and height, and in onPageSelected use the approach shown in the question.

The problem is that I'm not sure what type of LayoutParams I should call and call getWidth() and getHeight() in instantiateItem returns 0 .

I am currently using:

 View v = container.getChildAt(position); PagerContainer.LayoutParams params = (PagerContainer.LayoutParams)v.getLayoutParams(); 

but it sometimes works and sometimes throws NPE.

Is my approach right or should I act differently? In both cases, what should I change to achieve what I want?

Answer 1

You should use PageTransform for this purpose. The callback you must implement receives two parameters. The first is the View object, the second is int . When its value is zero, it means that the representation of objects refers to the fully visible object in the center. -1 and -1 are fully visible views on the left and right, respectively. You can use this value to implement the transformation you want. For example, using ViewCompat, you can change the translationX, translationY, and Scale values.

Answer 2

To achieve this result, I ended up using PixPlicity MultiViewPager and encoded a simple PageTransformer , as suggested by @Blackbelt:

 private float mScale = 0.8f; private class ScalePageTransformer implements ViewPager.PageTransformer{ @Override public void transformPage(View view, float position) { if(position==0){ ViewCompat.setScaleX(view, 1); ViewCompat.setScaleY(view, 1); } else{ ViewCompat.setScaleX(view, mScale); ViewCompat.setScaleY(view, mScale); } } } 

The result is something like:

Answer 3

I have the same problem. My solution is to use MultipleViewPager + PagerTransformer

and it works great.