Android ViewPager allows the user to flip left and right through pages of contents. ViewPager found in the support library.

If you are using ViewPager for flipping static height layouts then you can simply add height flag as hardcoded like:

android:layout_height="300dp"

1	android:layout_height="300dp"

If you want to use ViewPager for flipping the layouts having different heights then this blog will be helpful to you.

By adding WRAPCONTENT height flag for ViewPager will result in the ViewPager invisible this is because the wrap_content flag needs the height from the chield view which is not known in advance.

In this blog, we are using ViewPager for dynamic height views and the height of ViewPager will we updated dynamically at runtime based on the active layout height.

Creating ViewPager with dynamic height

First, create a custom view pager class by extending ViewPager class

class EnhancedDynamicHeightViewPager : ViewPager {
    private var mCurrentView: View? = null

    constructor(context: Context) : this(context, null)

    constructor(context: Context, attrs: AttributeSet?) : super(context, attrs)


    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
        var heightMeasureSpec = heightMeasureSpec
        if (mCurrentView == null) {
            super.onMeasure(widthMeasureSpec, heightMeasureSpec)
            return
        }
        var height = 0
        mCurrentView?.measure(widthMeasureSpec, MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED))
        val h: Int = mCurrentView?.getMeasuredHeight()?:0
        if (h > height) height = h
        heightMeasureSpec = MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY)
        super.onMeasure(widthMeasureSpec, heightMeasureSpec)
    }

    fun measureCurrentView(currentView: View) {
        mCurrentView = currentView
        requestLayout()
    }

}

class EnhancedDynamicHeightViewPager : ViewPager {

private var mCurrentView: View? = null

constructor(context: Context) : this(context, null)

constructor(context: Context, attrs: AttributeSet?) : super(context, attrs)

override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {

var heightMeasureSpec = heightMeasureSpec

if (mCurrentView == null) {

super.onMeasure(widthMeasureSpec, heightMeasureSpec)

return

}

var height = 0

mCurrentView?.measure(widthMeasureSpec, MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED))

val h: Int = mCurrentView?.getMeasuredHeight()?:0

if (h > height) height = h

heightMeasureSpec = MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY)

super.onMeasure(widthMeasureSpec, heightMeasureSpec)

}

fun measureCurrentView(currentView: View) {

mCurrentView = currentView

requestLayout()

}

Now use this custom ViewPager in your layout xml file

<com.example.mycustomclass.EnhancedDynamicHeightViewPager
                android:id="@+id/carousel_banner_view_pager"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:nestedScrollingEnabled="false" />

<com.example.mycustomclass.EnhancedDynamicHeightViewPager

android:id="@+id/carousel_banner_view_pager"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:nestedScrollingEnabled="false" />

Till now we have created ViewPager with WRAPCONTENT height it will take the maximum height of your child’s view. Now we have to make the changes on the ViewPager adapter for changing the height of ViewPager as per our current active child view for this override the following method inside your ViewPager adapter:

private var mCurrentPosition = -1 
override 
fun setPrimaryItem(container: ViewGroup, position: Int, `object`: Any) {
super.setPrimaryItem(container, position, `object`)
   if (position != mCurrentPosition) {
     val pager: EnhancedDynamicHeightViewPager = container as EnhancedDynamicHeightViewPager
     mCurrentPosition = position
     pager.measureCurrentView(your child view)
   }

}

private var mCurrentPosition = -1

override

fun setPrimaryItem(container: ViewGroup, position: Int, `object`: Any) {

super.setPrimaryItem(container, position, `object`)

if (position != mCurrentPosition) {

val pager: EnhancedDynamicHeightViewPager = container as EnhancedDynamicHeightViewPager

mCurrentPosition = position

pager.measureCurrentView(your child view)

}

Akshay Kumar 30 November 2020

. . .

Android Dynamic height ViewPager

Creating ViewPager with dynamic height

Leave a Comment Cancel Reply

Android Dynamic height ViewPager

Creating ViewPager with dynamic height

Leave a Comment Cancel Reply

Message Sent!