Set Viewpager height inside Scrollview in android

Question

I have to show a viewpager (An image and text below the image in pager row) inside a scrollview. I'm downloading the image, text from web and showing in pager rows. I wrapped viewpager inside a srollview to support the landscape mode too.

 <com.xxx.myapp.android.ui.CustomScrollView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:fadingEdge="none"
    android:fillViewport="true"
    android:gravity="center">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:descendantFocusability="blocksDescendants"
        android:orientation="vertical" >

        <android.support.v4.view.ViewPager
            android:id="@+id/viewPager"
            android:layout_width="match_parent"
            android:layout_height="800dp"
            android:layout_gravity="top"
            android:layout_marginTop="10dp" />  
    </LinearLayout>
</com.xxx.myapp.android.ui.CustomScrollView>

And here is CustomScrollView. The problem is How can I set the view pager height based on its children height so that I can scroll the screen till the view pager item ends only. If I set view pager height to wrapcontent, nothing is showing in viewpager. If I set some 800dp then I can see the pager items but there is unnecessary scrolling in the screen. I dont want my scrollview to be scrolled beyond the pager childrens height. Please help me.

@Gayathri please share class of com.xxx.myapp.android.ui.CustomScrollView — Smit Patel, Dec 11 '14 at 07:26

score 24 · Answer 1 · edited Jul 18 '16 at 18:53

To fix the height of the viewpager we can customize the viewpager class.

public class WrapContentViewPager extends ViewPager {

private int mCurrentPagePosition = 0;

public WrapContentViewPager(Context context) {
    super(context);
}

public WrapContentViewPager(Context context, AttributeSet attrs) {
    super(context, attrs);
}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    try {
        View child = getChildAt(mCurrentPagePosition);
        if (child != null) {
            child.measure(widthMeasureSpec, MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED));
            int h = child.getMeasuredHeight();
            heightMeasureSpec = MeasureSpec.makeMeasureSpec(h, MeasureSpec.EXACTLY);
        }
    } catch (Exception e) {
        e.printStackTrace();
    }
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}

public void reMeasureCurrentPage(int position) {
    mCurrentPagePosition = position;
    requestLayout();
}
}

where this reMeasureCurrentPage should be called at viewpager onPageSelected callback.and CustomScrollView is the parent view.

I need a viewpager with the height of its currently showing child. This is the perfect solution among plenty of answers on SOF. — Santhosh, Oct 26 '15 at 12:33
Doesn't work for me. I have a GridView in the ViewPager contents though. — John61590, Jun 26 '18 at 21:42
worked for me, but resize viewpager height when scrolled to last item — Muhammed Haris, Jan 24 '20 at 09:11

score 9 · Answer 2 · answered Mar 14 '14 at 07:20

mViewPager = new ViewPager(mContext) {
        @Override
        protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
            super.onMeasure(widthMeasureSpec, heightMeasureSpec);

            View view = getChildAt(this.getCurrentItem());
            if (view != null) {
                view.measure(widthMeasureSpec, heightMeasureSpec);
            }
            setMeasuredDimension(getMeasuredWidth(), measureHeight(heightMeasureSpec, view));
        }

        private int measureHeight(int measureSpec, View view) {
            int result = 0;
            int specMode = MeasureSpec.getMode(measureSpec);
            int specSize = MeasureSpec.getSize(measureSpec);

            if (specMode == MeasureSpec.EXACTLY) {
                result = specSize;
            } else {
                // set the height from the base view if available
                if (view != null) {
                    result = view.getMeasuredHeight();
                }
                if (specMode == MeasureSpec.AT_MOST) {
                    result = Math.min(result, specSize);
                }
            }
            return result;
        }
    };

score 6 · Answer 3 · answered Nov 15 '13 at 11:57

Try this way

<com.xxx.myapp.android.ui.CustomScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="center"
    android:fadingEdge="none"
    android:fillViewport="true"
    android:gravity="center">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:descendantFocusability="blocksDescendants"
        android:orientation="vertical" >

        <android.support.v4.view.ViewPager
            android:id="@+id/viewPager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="top"
            android:layout_marginTop="10dp" />  
    </LinearLayout>
</com.xxx.myapp.android.ui.CustomScrollView>

score 0 · Accepted Answer · answered Nov 15 '13 at 12:25

0

Wrap your pager row inside CustomScrollView instead of wrapping the pager inside CustomScrollview. And Don't fix height of Viewpager as Piyush Gupath commented. Use wrapcontent.

answered Nov 15 '13 at 12:25

Santhosh

4,956
12
62
90

score 0 · Answer 5 · answered Apr 12 '20 at 08:49

This is the best and easy solution :

1) Inside your custom ViewPager Class -

override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
    var heightMeasureSpec = heightMeasureSpec
    val mode = MeasureSpec.getMode(heightMeasureSpec)
    // Unspecified means that the ViewPager is in a ScrollView WRAP_CONTENT.
    // At Most means that the ViewPager is not in a ScrollView WRAP_CONTENT.
    if (mode == MeasureSpec.UNSPECIFIED || mode == MeasureSpec.AT_MOST) {
        // super has to be called in the beginning so the child views can be initialized.
        super.onMeasure(widthMeasureSpec, heightMeasureSpec)
        var height = 0
        for (i in 0 until childCount) {
            val child = getChildAt(i)
            child.measure(
                widthMeasureSpec,
                MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED)
            )
            val h = child.measuredHeight
            if (h > height) height = h
        }
        heightMeasureSpec = MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY)
    }
    // super has to be called again so the new specs are treated as exact measurements
    super.onMeasure(widthMeasureSpec, heightMeasureSpec)
}

2) While Setting the adapter to your ViewPager -

val viewPagerAdapter = ViewPagerAdapter(fragmentList, supportFragmentManager)
view_pager.adapter = viewPagerAdapter
view_pager.measure(LinearLayout.LayoutParams.MATCH_PARENT,LinearLayout.LayoutParams.WRAP_CONTENT)`
view_pager.currentItem = 0

Set Viewpager height inside Scrollview in android

5 Answers5

Linked