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>

Phonetics

you will have to give fixed height (you can do it dynamically by calculating screen height and deducting bottombar height ) to be always on top of the bottomview layout, or you can use relative layout and assign bottom property – Sapsago

Could you write some xml please? – Phonetics

I want to know is relative layout as root fine for you ?? – Sapsago

I need to use CoordinatorLayout as I have AppBarLayout in the user_app_bar layout file. – Phonetics

Is the problem solved? – Scissure

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.

Podgy

I need to use CoordinatorLayout as root layout as I have AppBarLayout in the user_app_bar layout file. – Phonetics

If you don't have TabLayout inside yout app_bar_ layout.xml then just use topmargin see my edite answer – Podgy

I added the app_bar layout file on above. I can't use a fixed height as AppBarLayout has a CollapsingToolbarLayout in it. – Phonetics

Then there is simple solution use your previous xml layout and just put bottom margin in FrameLayout 56dp that is the height of bottom navigation view. I don't know is it changable. See on different screens but I think height will remain 56dp – Podgy

Actually I'm using this approach but with paddingBottom. I was thinking if there is a better approach than this. Thanks for the input. – Phonetics

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>

Shoring

This is perfect answer +1 – Joyejoyful

layout_above does the trick for me. layout_below somehow doesn't work – Golightly

The problem with this approach is if you need to have any views with behaviours outside the CoordinatorLayout. That won't work, as they have to be direct children of a CoordinatorLayout. You might be tempted to add a second CoordinatorLayout, but it's not that great of a solution. And in any case, views from one of the CL's cannot communicate through behaviors with views from the other CL. So this solution is nice, but only if your situation is simple enough and allows it. – Fessler

Answer 3

Good a better solutions without having to hardcode the bottomView

You can put it inside a ConstraintLayout and make the height of the content 0dp and also set it's bottomToTop="@id/bottomViewId" or whatever is the Id you put to the bottomViewNavigator.

Here is an example.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".StartActivity">

    <fragment
        android:id="@+id/nav_controller"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toTopOf="@id/bottom_navigation"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:defaultNavHost="true"
        app:navGraph="@navigation/nav_graph" />

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:background="@color/colorPrimary"
        app:itemIconTint="@android:color/white"
        app:itemTextColor="@android:color/white"
        app:menu="@menu/bottom_navigation_menu" />
</androidx.constraintlayout.widget.ConstraintLayout>

Pistol

Could you provide a complete solution with the user_app_bar.xml? I needed CoordinatorLayout because I have CollapsingToolbarLayout in user_app_bar.xml. I do think ConstraintLayout sounds promising to solve this problem. – Phonetics

How about scrolling behavior? Like hide appbar on scroll. – Tack

Answer 4

/Try to replace your code with this/

<?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"/>

<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.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"
    />

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

Visby

Just rearrangement of the elements? I assumed to remove the paddingBottom as well. I tried and it didn't work. – Phonetics

Answer 5

add this line in your BottomNavigationView android:background="?android:attr/windowBackground"

<com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/app_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        app:labelVisibilityMode="labeled"
        android:background="?android:attr/windowBackground"
        app:menu="@menu/app_navigation" />

Coerce