BottomNavigationView - display on initial render

[ArcherEmiya05]

trafficstars

Description: Is there a way to display BottomNavigationView by default when using a layout_scrollFlags="scroll|enterAlways" on MaterialToolbar and layout_behavior="@string/appbar_scrolling_view_behavior"? The new BottomNavigationView height changed as well in Material3, it becomes a little visible while in the documentation guideline it is not.

Expected behavior:

1. Show BottomNavigationView by default (at least on initial render) and only apply the scrolling behavior when the user start scrolling.
2. Completely hide the BottomNavigationView as shown in the guideline.

Source code: From Android Studio Template when working with Navigation component

<?xml version="1.0" encoding="utf-8"?>
<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=".presentation.MainActivity">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/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/AppPopupOverlay" />

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

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

</androidx.coordinatorlayout.widget.CoordinatorLayout>

The 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:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:showIn="@layout/app_bar_main">

    <androidx.fragment.app.FragmentContainerView
        android:id="@+id/nav_host_fragment_content_main"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:defaultNavHost="true"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:navGraph="@navigation/drawer_navigation" />

</androidx.constraintlayout.widget.ConstraintLayout>

Home fragment (default destination)

<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.LinearLayoutCompat xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context=".presentation.ui.home.HomeFragment"
    android:orientation="vertical">

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/viewPagerContainer"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"/>

    <FrameLayout
        android:id="@+id/ad_frame"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"/>

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottomNav"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_anchorGravity="bottom"
        android:background="@color/colorPrimary"
        app:itemIconTint="@color/tab_selector"
        app:itemTextColor="@color/tab_selector"
        app:menu="@menu/bottom_navigation_menu"/>

</androidx.appcompat.widget.LinearLayoutCompat>

Android API version: SDK 21 and above

Material Library version: 1.6.0-beta01

[ArcherEmiya05]

Any update on this? Thanks

[ArcherEmiya05]

Is this a normal behavior since Material 3? I don't see it in the documentation page.

[ArcherEmiya05]

This is how bad it can look like, it seems the bottom has been cut out.

[ArcherEmiya05]

Based on MDC3 documentation it should collapse fully.