How to wrap height of Android ViewPager2 to height of current item?

Question

This question is for the new ViewPager2 class.

There is a similar question for the old ViewPager, but the solution requires extending ViewPager. However, ViewPager2 is final so cannot be extended.

In my situation, I have a ViewPager2 that contains three different fragments. One of these fragments is much taller than the other two, which means when you swipe to one of the shorter fragments, there is a lot of empty space. So how do I effectively wrap the ViewPager2 to the height of the current fragment?

See also https://stackoverflow.com/a/60385555/2914140 and https://www.reddit.com/r/androiddev/comments/dl4ug3/viewpager2_with_views_having_different_heights/f4qy1e2/. — CoolMind, Aug 18 '20 at 15:45

score 14 · Answer 1 · edited Nov 18 '20 at 17:13

14

The solution is to add the following in each fragment that is part of the ViewPager2:

override fun onResume() {
   super.onResume()
   binding.root.requestLayout()
}

binding.root is from ViewBinding/DataBinding but it's is the main container of your layout, i.e. ConstraintLayout, LinearLayout, etc.

edited Nov 18 '20 at 17:13

Gastón Saillén

12,319
5
67
77

answered Nov 18 '20 at 17:02

Lucas Nobile

207
3
8

Can you please explain what exactly this code does .. it fixes my problem but i don't understand why – Ahmed senosy Apr 27 '21 at 19:22

score 8 · Answer 2 · answered Nov 10 '19 at 14:03

8

I'm not at all happy with this workaround, but it does solve the rendering problems I had when trying to use ViewPager2 with fragments of different heights. It will obviously slow down rendering and consume more memory.

myStupidViewPager2.offscreenPageLimit = fragments.size

answered Nov 10 '19 at 14:03

Kimble

7,295
4
54
77

1

`viewPager.setOffscreenPageLimit(3);` did not work for me. However, my pages are now Views (rather than Fragments), so maybe your answer could work for someone else. – ban-geoengineering Nov 11 '19 at 20:34
where are you actually calling this? – Derek Hannah Apr 21 '20 at 20:37
2

Good idea but not working with lazy loaded items (like pagination) – Kevin Robatel May 14 '20 at 06:40

score 3 · Answer 3 · answered May 01 '20 at 16:38

I had the same problem, ViewPager2 was in ScrollView, which is under TabLayout. After navigating through the tabs, the height of the ScrollView became equal to the height of the maximum fragment height. The problem was solved by transferring the ScrollView to the fragment.

Assem Mahrous · Answer 4 · 2020-07-27T10:53:46.437

2

I have found an answer to this question where i access the child through it's adapter as when you access the child at any given position rather than Zer0 index the view is null.

    class ViewPager2PageChangeCallback() : ViewPager2.OnPageChangeCallback() {
        override fun onPageSelected(position: Int) {
            val view = (pager.adapter as pagerAdapter).getViewAtPosition(position)
            view?.let {
                updatePagerHeightForChild(view, pager)
            }
        }
    }

    private fun updatePagerHeightForChild(view: View, pager: ViewPager2) {
        view.post {
            val wMeasureSpec =
                View.MeasureSpec.makeMeasureSpec(view.width, View.MeasureSpec.EXACTLY)
            val hMeasureSpec = View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED)
            view.measure(wMeasureSpec, hMeasureSpec)

            if (pager.layoutParams.height != view.measuredHeight) {
                pager.layoutParams = (pager.layoutParams)
                    .also { lp ->
                        lp.height = view.measuredHeight
                    }
            }
        }
    }

   pager.offscreenPageLimit = 1            
   pagerpager.registerOnPageChangeCallback(ViewPager2PageChangeCallback())

     override fun onDestroy() {
        super.onDestroy()
        pager.unregisterOnPageChangeCallback(ViewPager2PageChangeCallback())
    }

 

    class OrderDetailsPager(
    private val arrayList: ArrayList<Fragment>,
    fragmentManger: FragmentManager,
    lifecycle: Lifecycle
    ) : FragmentStateAdapter(fragmentManger, lifecycle) {
    override fun createFragment(position: Int): Fragment {
        return arrayList[position]
    }

    override fun getItemCount(): Int {
        return arrayList.size
    }

    fun getViewAtPosition(position: Int): View? {
        return arrayList[position].view
    }
}

edited Jul 27 '20 at 10:53

answered Dec 22 '19 at 14:29

Assem Mahrous

411
3
15

this does not works, what is getViewAtPosition and pagerAdapter ? Code is really bad. – AndroidRuntimeException Jan 30 '20 at 18:33
getViewAtPosition as a method added at your pagerAdapter (View pager2 Adapter) – Assem Mahrous Feb 01 '20 at 12:08
@AssemMahrous could you please update the example code to also show getViewAtPosition and pagerAdapter because I am puzzled aswell by where you got those from. – Niclas Feb 23 '20 at 10:29
i have edited the code and adde the pager adapter @sphrak – Assem Mahrous Feb 24 '20 at 11:03
pretty sure this doesn't work for viewpager2 FragmentStateAdapter is for viewpager and it's already deprecated – Fugogugo Mar 11 '20 at 07:31
@Fugogugo No it exists in viewpager2 in androidx.viewpager2.adapter package – Assem Mahrous Mar 11 '20 at 14:49
1

Why do you again create a callback in `onDestroy`: `pager.unregisterOnPageChangeCallback(ViewPager2PageChangeCallback())`? Ha, it's funny. – CoolMind Jun 05 '20 at 14:48
`getViewAtPosition` may be unknown. – CoolMind Jun 05 '20 at 17:21
@AssemMahrous view.measuredHeight is always zero – praj Jul 26 '20 at 15:43
@praj do you add the fragments to adapter and set of screen limit ?? – Assem Mahrous Jul 27 '20 at 10:54
@AssemMahrous Yes I have added fragments to adapter and offscreenPageLimit to 3. First time loading the view i am getting value for measuredHeight . Switching between tab value get reset to zero. – praj Jul 28 '20 at 11:32
arrayList[position].view sometimes is null because the view has not be rendered yet, so the solution does not works in all cases – AndroidRuntimeException Aug 19 '20 at 17:41

score 1 · Answer 5 · answered Mar 12 '21 at 07:55

This worked for me after spending a lot of time, My viewpager2 is inside a Nesterscrollview

binding.viewpager.offscreenPageLimit = 2
binding.viewpager.isUserInputEnabled = false
binding.viewpager.registerOnPageChangeCallback(object :ViewPager2.OnPageChangeCallback(){
     override fun onPageSelected(position: Int) {
           super.onPageSelected(position)
           val myFragment = childFragmentManager.findFragmentByTag("f$position")
           myFragment?.view?.let { updatePagerHeightForChild(it,binding.viewpager) }
     }
})

private fun updatePagerHeightForChild(view: View, pager: ViewPager2) {
        view.post {
            val wMeasureSpec =
                View.MeasureSpec.makeMeasureSpec(view.width, View.MeasureSpec.EXACTLY)
            val hMeasureSpec = View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED)
            view.measure(wMeasureSpec, hMeasureSpec)

            if (pager.layoutParams.height != view.measuredHeight) {
                pager.layoutParams = (pager.layoutParams)
                    .also { lp ->
                        lp.height = view.measuredHeight
                    }
            }
        }
    }

score 1 · Answer 6 · answered Jul 30 '21 at 08:36

I have an issue with dynamic pages height which could change in the runtime. After page change, some of the content on the highest page is cut off.

I was able to fix that by re-measuring pager content (i.e page) and pager itself.

         viewPager2.setPageTransformer { page, _ ->
                val wMeasureSpec =
                    View.MeasureSpec.makeMeasureSpec(page.width, View.MeasureSpec.EXACTLY)
                val hMeasureSpec =
                    View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED)
                page.measure(wMeasureSpec, hMeasureSpec)
                measure(wMeasureSpec, hMeasureSpec)
                post {
                    adapter?.notifyDataSetChanged()
                }
            }

This one worked like charm with me. – abd3lraouf Oct 06 '21 at 07:36 — abd3lraouf, Oct 06 '21 at 07:36

score 1 · Answer 7 · answered Sep 30 '21 at 15:55

Based on Lucas Nobile I found out another way of implementing. Instead of putting the following code on the OnResume method of each affected fragment:

override fun onResume() {
   super.onResume()
   binding.root.requestLayout()
}

Just add this override to the adapter of the viewPager2:

override fun onBindViewHolder(
   holder: FragmentViewHolder,
   position: Int,
   payloads: MutableList<Any>
){
   holder.itemView.requestLayout()
   super.onBindViewHolder(holder, position, payloads)
}

Obs: Code made in kotlin.

score 0 · Answer 8 · answered Sep 03 '19 at 08:15

0

For me set viewpager2's recyclerview layout params resolve this problem.

Try

<androidx.viewpager2.widget.ViewPager2
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

and set recyclerview layout params

RecyclerView recyclerView = (RecyclerView) viewPager.getChildAt(0);
recyclerView.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT));

answered Sep 03 '19 at 08:15

KayaMeaw

1

Thanks, but this didn't work for me. All my ViewPager2 pages disappeared with this code. That said, my pages are Views now (rather than Fragments), so maybe your answer could work for someone else. – ban-geoengineering Nov 11 '19 at 20:33

chin chin · Answer 9 · 2021-02-02T05:02:07.323

https://gist.github.com/safaorhan/1a541af729c7657426138d18b87d5bd4

this work for me;

Thanks this work for me ,when we want to use viewpager as Book ' pages. There are different kinds of page height. Sometimes , we need to scroll action when page is too long :3 At that time, just wrap your viewpager's item layout with NestedScroll View..

Thanks to @safaorhan

/** * Disables the child attach listener so that inflated children with wrap_content heights can pass. * * This is very fragile and depends on the implementation details of [ViewPager2]. * * @see ViewPager2.enforceChildFillListener (the removed listener) */

// call this method with your viewpager...

private fun ViewPager2.hackMatchParentCheckInViewPager() {
    (getChildAt(0) as RecyclerView).clearOnChildAttachStateChangeListeners()
}

//View Pager

<androidx.viewpager2.widget.ViewPager2
        android:id="@+id/page_view_pager"
        android:layout_width="match_parent"
        android:layout_height="0dp">

//Your Child Viewpager item

<androidx.core.widget.NestedScrollView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <LinearLayout
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
      ....
    </LinearLayout>
    </androidx.core.widget.NestedScrollView>

score 0 · Answer 10 · answered Apr 24 '21 at 20:07

I was able to do so by overriding onPageSelected callback and remeasuring the current view's height.

It would look something like this:

mViewPager.registerOnPageChangeCallback(new ViewPager2.OnPageChangeCallback() {
            @Override
            public void onPageSelected(int position) {
                mTabLayout.selectTab(mTabLayout.getTabAt(position));

 View view = mViewPagerAdapter.getViewAtPosition(position); // this is a method i have in the adapter that returns the fragment's view, by calling fragment.getview()
                if (view != null) {
                    view.post(() -> {
                        int wMeasureSpec = View.MeasureSpec.makeMeasureSpec(view.getWidth(), View.MeasureSpec.EXACTLY);
                        int hMeasureSpec = View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED);
                        view.measure(wMeasureSpec, hMeasureSpec);
                        viewPager.getLayoutParams().height = view.getMeasuredHeight();
                        mViewPagerAdapter.notifyDataSetChanged();
                    });
                }
            }
        });
        mViewPager.setOffscreenPageLimit(mTabLayout.getTabCount());

The layout of TabLayout and Viewpager2 looks the following (inside a NestedScrollView)

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

                        <com.google.android.material.tabs.TabLayout
                            android:id="@+id/data_collection_tab_layout"
                            android:layout_width="match_parent"
                            android:layout_marginBottom="12dp"
                            android:layout_height="wrap_content" />

                        <androidx.viewpager2.widget.ViewPager2
                            android:id="@+id/data_collection_viewpager2"
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"/>

                    </LinearLayout>

Also, please make sure all the Fragment's layout height it's wrap content.

How to wrap height of Android ViewPager2 to height of current item?

10 Answers10

Linked