FAB doesn't stick to bottom|end when using ViewPager

Question

I'm using a fragment with a ViewPager+TabLayout:

<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"
    android:orientation="vertical"
    tools:context=".ui.view.InventoryOverviewFragment">

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:tabIndicatorColor="@color/colorAccent"
        app:tabMode="scrollable"
        app:tabTextColor="@android:color/white" />

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/tabLayout" />

</androidx.constraintlayout.widget.ConstraintLayout>

The ViewPager in turn hosts three different options you can click on (goods received, goods sold, inventory levels). Two of these fragments contain a recyclerView and should have a FAB (goods received and goods sold).

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".ui.view.InventoryReceivedFragment">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerViewReceived"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:scrollbars="vertical"
        app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/addReceived"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:layout_margin="24dp"
        android:src="@drawable/ic_add_black_24dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

It is supposed to be on the bottom right corner when I test it on my device, however, the FAB is always on the top right corner. As shown in the code, I've also tried using a constraintLayout where the constraints for bottom and end are set, but no luck...

Could someone pls help me out with this? It's driving me crazy ^-^

Answer 1

You make the ViewPager height to match the constraints wit 0dp, and you didn't add any constraints that controls its height; so add app:layout_constraintBottom_toBottomOf="parent" to the ViewPager so that it always has the entire height of the parent so that the underlying tabs will take the entire height as well.

If it didn't work, then make the ViewPager height as match_parent