BottomNavigationView overlapping FrameLayout in CoordinatorLayout BottomNavigationView overlapping FrameLayout in CoordinatorLayout android android

BottomNavigationView overlapping FrameLayout in CoordinatorLayout


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.


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>


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>