Android ViewPager — Resize with every page

It is nice to adjust sometimes.

Commonly when we use view pager, all our views try to fit into a specified dimension. This is fine in most of the scenarios but how about making our screen to adjust with each view in focus on view pager. Something like in the below image:

Content shifted up and down as per the image height

As you can see our action buttons and content below it shift downwards if an image with height greater than the previous image comes in focus and vice versa. So let’s dive straight into the code and get this done.

Step 1: Create a class AdjustingViewPager (obviously you can name it anything) which extends ViewPager.

class AdjustingViewPager: ViewPager {
    constructor(context: Context) : super(context)
    constructor(context: Context, attrs: AttributeSet?) :     super(context, attrs)
}

Step 2: Override the onMeasure callback as follows

Let’s understand what this does.

1) It checks if the view has been assigned any dimension by its parent or not. If it is in either MeasureSpec.UNSPECIFIED or MeasureSpec.AT_MOST mode which means the view can be of any dimension it wants to be, we check for our current view.

2) If the currentView is not null then we extract its measured height.

3) If the currentView’s height is greater than our allowed height in pixels then we simply set it to allowedHeight and pass on the final width and height to

super.onMeasure(widthMeasureSpec, newViewHeight)

Step 3: Create a method in our AdjustingViewPager class

fun measureCurrentView(view: View) {
    this.currentView = view
    requestLayout()
}

This method simply takes in the current view in focus and request to refresh the view pager layout to resize according to the new view dimensions.

Step 4: Inside the ImagePagerAdapter class, override the following method like this

override fun setPrimaryItem(container: ViewGroup, position: Int, `object`: Any) {
    super.setPrimaryItem(container, position, `object`)
    if (container !is AdjustingViewPager)
        return
    if (position != currentPosition) {
        val viewPager: AdjustingViewPager = container
        currentPosition = position;
        viewPager.measureCurrentView(`object` as View)
    }
}

In this method we simply checks if the current view is not in focus then update this to the view pager and resize it.

And that is it. Now you can use the AdjustingViewPager as a normal view pager in your layouts as follows

<com.aqua30.learningproject.AdjustingViewPager
    android:id="@+id/view_pager"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

Here is the final output of the above:

Hope it would come in handy.

Checkout the complete code gist at https://gist.github.com/aqua30/b7da69fc8d78c0b117a1fb6dd5bc1d00

Keep coding.

Cheers!