ConstrainLayout - Bottom Navigation overlaps RecyclerView

Question

I have a ConstraintLayout with an AppBar, 2 fragments (each fragment contains a RecyclerView) and a bottom navigation. The problem is that the bottom navigation overlaps the RecyclerView last row.

This is my Layout

<?xml version="1.0" encoding="utf-8"?>
<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:background="@color/template_grey_dark"
    tools:context=".presentation.ui.activity.MainActivity">

    <include
        android:id="@+id/AppBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        layout="@layout/app_bar" />

    <androidx.swiperefreshlayout.widget.SwipeRefreshLayout
        android:id="@+id/SwipeRefreshLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        *app:layout_constraintTop_toBottomOf="@+id/AppBar"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent">
        <androidx.core.widget.NestedScrollView
            android:id="@+id/NestedScrollView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:clipToPadding="true"
            android:fillViewport="true"
            android:fitsSystemWindows="true"
            android:padding="@dimen/activity_horizontal_margin_8">
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">
                <androidx.fragment.app.FragmentContainerView
                    android:id="@+id/FragmentMovie"
                    android:name=".presentation.ui.fragment.MovieFragment"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    tools:layout="@layout/fragment_movie"
                    android:layout_marginTop="@dimen/activity_horizontal_margin_16"/>
                <androidx.fragment.app.FragmentContainerView
                    android:id="@+id/FragmentTVShow"
                    android:name=".presentation.ui.fragment.TVShowFragment"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    tools:layout="@layout/fragment_tv_show"
                    android:layout_marginTop="@dimen/activity_horizontal_margin_16"/>
            </LinearLayout>
        </androidx.core.widget.NestedScrollView>
    </androidx.swiperefreshlayout.widget.SwipeRefreshLayout>
    <LinearLayout
        android:id="@+id/FabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintBottom_toTopOf="@+id/BottomNavigationLayout"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        android:gravity="end">
        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="end|bottom"
            android:src="@mipmap/baseline_filter_list_white"
            android:contentDescription="I'm Feeling Lucky"
            android:layout_margin="@dimen/activity_vertical_margin_16"
            app:backgroundTint="@color/black"
            app:tint="@color/white"/>
    </LinearLayout>
    <LinearLayout
        android:id="@+id/BottomNavigationLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent">
        <com.google.android.material.bottomnavigation.BottomNavigationView
            android:id="@+id/BottomNavigation"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:menu="@menu/bottom_navigation"
            android:background="@color/black"
            style="bottomNavigationStyle"/>
    </LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

If I add

app:layout_constraintBottom_toTopOf="@+id/BottomNavigationLayout"

To the SwipeRefreshLayout, it does nothing.

Any idea of what the problem might be?

Answer 1

Please edit your swipe refresh *app:layout_constraintTop_toBottomOf="@+id/AppBar" to app:layout_constraintTop_toBottomOf="@id/AppBar" and your app:layout_constraintBottom_toTopOf="@id/+BottomNavigationLayout" to app:layout_constraintBottom_toTopOf="@id/BottomNavigationLayout" and finally, set height of your SwipeRefreshLayout to 0dp to make it match_constraint using, android:layout_height="0dp"