BottomNavigationView overlapping FrameLayout in CoordinatorLayout

Question

The following is my layout xml. The problem now is that the BottomNavigationView is overlapping the FrameLayout. I wanted the FrameLayout to stretch to the top of the BottomNavigationView.

I tried with trick such as adding paddingBottom in the FrameLayout but I wonder if there is other better solution. Thanks.

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.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:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >

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

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:background="?android:attr/windowBackground"
        app:menu="@menu/navigation"
        app:itemTextColor="@color/colorPrimaryDark"
        app:itemIconTint="@color/colorPrimaryDark"
        />

    <FrameLayout
        android:id="@+id/fragment_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingBottom="58dp"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

   <android.support.design.widget.FloatingActionButton
       android:id="@+id/fab"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_margin="@dimen/fab_margin"
       app:layout_anchorGravity="bottom|end"
       app:layout_anchor="@id/app_bar"
       app:srcCompat="@drawable/ic_edit_white_24px" />

</android.support.design.widget.CoordinatorLayout>

UPDATE: more information on the user_app_bar.xml. It contains a CollapsingToolbarLayout.

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.AppBarLayout 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/app_bar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.AppBarOverlay"
    app:layout_behavior="co.domain.DisableAppBarLayoutBehaviour"
    >

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/toolbar_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        app:titleEnabled="false"
        app:contentScrim="?attr/colorPrimary">

        <android.support.constraint.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_collapseMode="parallax">

            <ImageView
                android:id="@+id/backdrop"
                android:layout_width="match_parent"
                android:layout_height="250dp"
                android:layout_marginBottom="0dp"
                android:layout_marginLeft="0dp"
                android:layout_marginRight="0dp"
                android:layout_marginTop="0dp"
                android:contentDescription=""
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintHorizontal_bias="0.0"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintVertical_bias="0.0"
                tools:ignore="ContentDescription"
                android:background="@color/gray"/>

            <TextView
                android:id="@+id/profileName"
                style="@style/textShadow"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginEnd="8dp"
                android:layout_marginLeft="8dp"
                android:layout_marginRight="8dp"
                android:layout_marginStart="8dp"
                android:layout_marginTop="0dp"
                android:text="user name"
                android:textAlignment="center"
                android:textSize="18sp"
                android:textColor="#fff"
                app:layout_constraintHorizontal_bias="0.5"
                app:layout_constraintLeft_toLeftOf="@+id/profileImage"
                app:layout_constraintRight_toRightOf="@+id/profileImage"
                app:layout_constraintTop_toBottomOf="@+id/profileImage" />

            <de.hdodenhof.circleimageview.CircleImageView
                android:id="@+id/profileImage"
                android:layout_width="70dp"
                android:layout_height="70dp"
                android:layout_marginBottom="8dp"
                android:layout_marginLeft="32dp"
                android:layout_marginStart="32dp"
                android:layout_marginTop="8dp"
                android:alpha="0.5"
                android:src="@drawable/ic_account_circle_black_24dp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintTop_toTopOf="parent" />
        </android.support.constraint.ConstraintLayout>

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_collapseMode="pin"
            app:popupTheme="@style/AppTheme.PopupOverlay"/>

    </android.support.design.widget.CollapsingToolbarLayout>

</android.support.design.widget.AppBarLayout>

Answer 1

There is simple solution for your issue. That is to put marginBottom in FrameLayout on 56dp which is according to documentation height of BottomNavigationView. I'm not sure is it changable acording to mobile screens. Even the documentation says nothing about changing of height. And I used it in some of my apps and I didn't find that height of BottomNavigationView is changing. But just in case check. Hope this will help.

Answer 2

Place CoordinatorLayout and BottomNavigationView inside RelativeLayout

with BottomNavigation android:layout_alignParentBottom="true" and CoordinatorLayout layout above with android:layout_above="@+id/{BottomNavigationView-ID}"

please check below layout

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto">
<data>

</data>

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <android.support.design.widget.CoordinatorLayout
            android:id="@+id/homeCoordinator"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_above="@+id/bnHome" //above bottom navigation
            >

            <android.support.design.widget.AppBarLayout
                android:id="@+id/homeAppbar"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:elevation="0dp"
                android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

                <RelativeLayout
                    android:id="@+id/rlTopLayout"
                    android:layout_width="match_parent"
                    android:layout_height="?android:actionBarSize"
                    android:layout_alignParentTop="true"
                    android:background="@color/white"
                    android:orientation="horizontal"
                    app:layout_scrollFlags="scroll|enterAlways">

                    <android.support.v7.widget.AppCompatImageView
                        android:id="@+id/ivHomeLogo"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_alignParentLeft="true"
                        android:layout_alignParentStart="true"
                        android:layout_centerVertical="true"
                        android:layout_marginLeft="@dimen/_minus15sdp"
                        android:src="@mipmap/launcher_logo" />

                    <android.support.v7.widget.AppCompatTextView
                        android:id="@+id/tvHomeTitle"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_centerVertical="true"
                        android:layout_gravity="center_vertical"
                        android:layout_toEndOf="@+id/ivHomeLogo"
                        android:layout_toRightOf="@+id/ivHomeLogo"
                        android:text="@string/app_name"
                        android:textColor="@color/colorPrimary"
                        android:textSize="@dimen/_16ssp"
                        android:textStyle="bold" />

                    <android.support.v7.widget.AppCompatImageView
                        android:id="@+id/ivHomeSurprise"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_toLeftOf="@id/ivHomeSearch"
                        android:layout_toStartOf="@id/ivHomeSearch"
                        android:paddingBottom="@dimen/_13sdp"
                        android:paddingTop="@dimen/_13sdp"
                        android:src="@mipmap/surprise_icon_blue" />

                    <android.support.v7.widget.AppCompatImageView
                        android:id="@+id/ivHomeSearch"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_alignParentEnd="true"
                        android:layout_alignParentRight="true"
                        android:layout_centerVertical="true"
                        android:padding="@dimen/_10sdp"
                        app:srcCompat="@drawable/ic_search_grey" />

                </RelativeLayout>

            </android.support.design.widget.AppBarLayout>

            <FrameLayout
                android:id="@+id/flHomeContainer"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:layout_behavior="@string/appbar_scrolling_view_behavior" />

        </android.support.design.widget.CoordinatorLayout>

        <android.support.design.widget.BottomNavigationView
            android:id="@+id/bnHome"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true" // align parent bottom true
            app:itemBackground="@color/white_smoke"
            app:itemIconTint="@color/bnv_color_state"
            app:itemTextColor="@color/bnv_color_state"
            app:menu="@menu/bottom_navigation_main"
            app:onNavigationItemSelected="@{(item)->vm.onNavigationItemSelected(item)}" />

    </RelativeLayout>

    <android.support.v4.widget.ContentLoadingProgressBar
        android:id="@+id/clpb_progress"
        style="?android:attr/progressBarStyle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:visibility="@{vm.isLoading}" />
</FrameLayout>