ConstraintLayout not filling whole screen

Question

I have ConstraintLayout inside the NestedScrollView. If I don't use NestedScrollView to wrap ConstraintLayout then the ConstraintLayout takes whole screen area, but as soon as I wrap it with NestedScrollView, the ConstraintLayout wraps its views and takes only the wrapped space.

But, I need ConstraintLayout to stay with its parent NestedScrollView or at least screen height.

For me, I have inflated fragments in the ViewPager2. When ConstraintLayout wraps its content views, I am not able to see fragment in ViewPager2 in runtime.

If I remove NestedScrollView, everything works perfectly and I am able to see all fragment correctly.

Here is my layout code.

<?xml version="1.0" encoding="utf-8"?>
<androidx.core.widget.NestedScrollView 
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp">
    
    <TextView
        android:id="@+id/textView"
        android:layout_width="0dp"
        android:text="Sample Text"
        android:layout_height="wrap_content"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>
    
    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabGravity="fill"
        android:layout_marginTop="32dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@id/textView">
        
        <com.google.android.material.tabs.TabItem
            android:id="@+id/first"
            android:text="First"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
        <com.google.android.material.tabs.TabItem
            android:id="@+id/second"
            android:text="Second"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
        <com.google.android.material.tabs.TabItem
            android:id="@+id/third"
            android:text="Third"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
    </com.google.android.material.tabs.TabLayout>
    
    <androidx.viewpager2.widget.ViewPager2
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@id/tabLayout"
        app:layout_constraintBottom_toBottomOf="parent"/>
    </androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>

I have some images included.

Any help will be appreciated. Thanks

Answer 1

android:fillViewport="true" helped to inflate the fragment, means I was able to see the fragments at run time. But, fragments had different heights. So, another problem created as ViewPager allocated same height for all the fragments.

Finally, on each fragment's onResume method, I need to call requestLayout(). And that solved problem of different heights of fragment.

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

Link to the answer: Answer