Photo by Olga Tutunaru on Unsplash

If you’ve ever switched from ViewPager to ViewPager2 and suddenly your pages are blank, tabs are visible but fragment content doesn’t show, welcome to the club.
This invisible layout bug cost me almost an entire day.

Here’s what actually happens — and how to fix it in seconds.

💥 The Problem

Everything in your code looks perfect:

• Adapter set
• Fragments inflate correctly
• Data loads
• Tabs appear
• No crash, no error logs

Yet ViewPager2 shows a completely blank screen inside.

You check logic, adapters, fragment lifecycle…
Everything is fine.

And still — no content🥹.

🎯 The Hidden Culprit: Parent Layout Height

ViewPager2 relies on RecyclerView, which requires a measurable height.
If ViewPager2 is wrapped inside a parent with:

• wrap_content height
• Collapsing layout
• Weak constraints

…it gets assigned 0 height, even if the ViewPager2 itself is match_parent.

Result → fragments don’t render → blank screen

This never happened with the old ViewPager because it forced child measurement internally.
ViewPager2 doesn’t.

❌ Example of a Broken Layout

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

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

Parent height = wrap_content →
ViewPager2 ends up with 0 height → nothing rendered.

✅ The Fix (Instant)

Give ViewPager2 a real, measurable height via its parent.

 <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

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

• Parent now has a defined height (match_parent).
• ViewPager2 can measure its children correctly.
• Fragments render perfectly

📜 Nesting in ScrollView (or NestedScrollView)

Placing a ViewPager2 inside a vertical ScrollView or NestedScrollView is tricky.

Why? Because now you have two conflicting scroll mechanisms

• The parent scroll view wants to scroll vertically
• ViewPager2 may try to handle swipe gestures internally

This can cause unexpected behavior, including blank or partially rendered pages.

Solution 1: Disable ViewPager2 scrolling

// Disable user swipe
viewPager.isUserInputEnabled = false


// Change pages programmatically
viewPager.setCurrentItem(1, true) // moves to page 2 smoothly

• Prevents ViewPager2 from handling swipe gestures
• Lets the parent ScrollView handle all scrolling

Solution 2: Give ViewPager2 a fixed height

• Parent ScrollView is wrap_content
• ViewPager2 cannot rely on match_parent for height
• Must use a fixed dp value

<NestedScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent">

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

        <ViewPager2
            android:id="@+id/my_view_pager"
            android:layout_width="match_parent"
            android:layout_height="300dp" /> <!-- Fixed height -->

    </LinearLayout>
</NestedScrollView>

• Fixed height ensures ViewPager2 can render content inside a scrolling parent.
• Without this, ViewPager2 may collapse to 0 height and appear blank.

🏗️ Nesting in ConstraintLayout

ConstraintLayout is flexible, but ViewPager2 still needs a defined size to render correctly.

• Using wrap_content can break rendering
• Using match_parent works if parent is well constrained
• Best practice: use 0dp (MATCH_CONSTRAINT) and constrain ViewPager2 to edges

Example: Filling available space below a header

<ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <View
        android:id="@+id/header"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        app:layout_constraintTop_toTopOf="parent" />

    <ViewPager2
        android:id="@+id/my_view_pager"
        android:layout_width="0dp"  <!-- MATCH_CONSTRAINT -->
        android:layout_height="0dp" <!-- MATCH_CONSTRAINT -->
        app:layout_constraintTop_toBottomOf="@id/header"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

</ConstraintLayout>

• 0dp tells ConstraintLayout to size the ViewPager2 according to constraints
• ViewPager2 now has measurable width and height
• Fragments render properly without blank pages

This is the most flexible layout for ViewPager2 when you want it to fill available space relative to other views.

⚡ Key Takeaways

1. Never use wrap_content on the scrolling axis of ViewPager2 (height for vertical, width for horizontal).
2. Always ensure the parent provides measurable dimensions:

• match_parent
• Fixed dp
• Or 0dp with constraints in ConstraintLayout

3. NestedScrollView / ScrollView:

• Either disable ViewPager2 swipe gestures (isUserInputEnabled = false)
• Or give ViewPager2 a fixed height (dp)

4. ConstraintLayout:

• Use 0dp (MATCH_CONSTRAINT) for height/width
• Properly constrain top, bottom, start, and end

5. Most blank-screen issues are layout measurement issues, not adapter or fragment bugs.

6. Quick Rule of Thumb:

• If ViewPager2 content is blank, check parent layout height first — 90% of the time, this is the cause.

 

Migrating to ViewPager2 is mostly smooth — until you run into this hidden layout bug.

Understanding parent height and proper constraints will save you hours of frustration and unnecessary debugging.

Nail your ViewPager2 constraints and you’ll spend more time coding and less time issue-fixing.

Happy Coding! 👩‍💻🙂

This article was previously published on proandroiddev.com