Static BottomNavigation inside CoordinatorLayout but not as direct child

Question

I have top level container with CoordinatorLayout and Toolbar that hides when scolling, this container contain fragments.

    <androidx.coordinatorlayout.widget.CoordinatorLayout 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=".ui.screens.main.MainActivity">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:elevation="0dp"
        android:theme="@style/AppTheme.AppBarOverlay">

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

    </com.google.android.material.appbar.AppBarLayout>

    <include layout="@layout/content_main" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

One of my fragments contain RecycleView and BottomNavigation

 <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:pp="http://schemas.android.com/tools"
    android:id="@+id/cl_content"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.core.widget.NestedScrollView
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">


        <androidx.recyclerview.widget.RecyclerView/>

    </androidx.core.widget.NestedScrollView>

    <BottomNavigation />

</androidx.constraintlayout.widget.ConstraintLayout>

The problem that the BottomNavigation scrolls with the content, when the app start the BottomNavigation almost invisible, and when I scroll down the BottomNavigation became visible and vise versa, I need it to be static without scroll behavior, is there any configuration for that?

I guess the problem because BottomNavigation is not direct child of CoordinatorLayout but is there workaround?

Demo project(ignore slideshow and gallery):

https://github.com/pavelpoley/CoordinatorLayoutQuestion

Answer 1

Remove app:layout_behavior="@string/appbar_scrolling_view_behavior" from your content_main.xml

<?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:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:showIn="@layout/app_bar_main">

</androidx.constraintlayout.widget.ConstraintLayout>

UPDATE: After demo project has been updated with a more complex hierarchy provided solution above didn't work as expected.

I did a lot of research and couldn't find any clean solution to have BottomNavigationView inside CoordinatorLayout but not as a direct child.

The only solution was to move BottomNavigationView inside CoordinatorLayout as a child and then change its visibility based on androidx.navigation.NavController destination.

Source code: https://github.com/dautovicharis/CoordinatorLayoutQuestion/commits/master

Answer 2

You can make a couple of changes

• Add exitUntilCollapsed flag to the Toolbar

  app:layout_scrollFlags="scroll|enterAlways|exitUntilCollapsed"

• Remove the app:layout_behavior from the NestedScrollView, and add it to root ConstraintLayout

By applying those, the layouts will be:

<androidx.coordinatorlayout.widget.CoordinatorLayout 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=".ui.screens.main.MainActivity">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:elevation="0dp"
        android:theme="@style/AppTheme.AppBarOverlay">

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways|exitUntilCollapsed"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

    </com.google.android.material.appbar.AppBarLayout>

    <include layout="@layout/content_main" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

And fragment:

 <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:pp="http://schemas.android.com/tools"
    android:id="@+id/cl_content"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.core.widget.NestedScrollView
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">


        <androidx.recyclerview.widget.RecyclerView/>

    </androidx.core.widget.NestedScrollView>

    <BottomNavigation />

</androidx.constraintlayout.widget.ConstraintLayout>