View pager with tabs layout is out of screen bounds

Question

I'm using a tab layout and underneath a view pager to display the content of selected fragment.

On top of the layout there is the tab layout and underneath the view pager. Problem is: the view pager takes the height of the full screen and as a result (since it is constrained to the navigation tabs), its height goes out of the screen like so:

My xml:

<androidx.constraintlayout.widget.ConstraintLayout 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="match_parent"
    tools:context=".activities.MeetActivity">

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/navigationTabs"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="@drawable/navigation_shadow"
        app:layout_constraintTop_toTopOf="parent"
        app:tabIndicator="@null"
        app:tabMinWidth="@dimen/navigation_height"
        app:tabRippleColor="@null" />

<!--    // the fragment will be displayed here:-->
    <androidx.viewpager.widget.ViewPager
        android:id="@+id/fragmentContainer"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@+id/navigationTabs"/>

Is there a way to constrain the view pager to the top of the navigation tabs and force its height to stay within the bounds of the screen? This might look insignificant but it causes widgets in the fragments to appear outside of the screen

Answer 1

the view pager takes the height of the full screen

In ViewPager onMeasure function,wrap_content is calculated as the container size (in this case, ConstaraintLayout).

Try this.

<androidx.viewpager.widget.ViewPager
        android:id="@+id/fragmentContainer"
        android:layout_width="match_parent"
        android:layout_height="0dp" 
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/navigationTabs" />