android - ViewPager with multiple visible children and selected bigger

Question

In my Activity I've added a Gallery-like View?using Dave Smith's PagerContainer example and the code I'm using to instantiate it is very similar to the PagerActivity?in his example, while I changed the layout because I needed to use layout weights:

<?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 properly and looks like this (I omitted the bottom ImageView)

But I'd like to resize the unselected items, aiming to emphasize the centered item (selection), something like:

or:

I've found the accepted answer to this question, but implementing that solution means that I'll make the selection bigger than its current dimensions (which already are the maximum possible).

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

The problem is that I'm not sure about which kind of LayoutParams?I should call and calling getWidth()?and getHeight()?in instantiateItem?returns 0.

Currently I'm using:

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

but it sometimes works and sometimes throws a NPE.

Is my approach correct or should I proceed in another way? In both cases, what should I change to achieve what I want?

Answer 1

To achieve this result, I ended up using PixPlicity's MultiViewPager and coding 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: