BottomNavigationView overlapping FrameLayout in CoordinatorLayout
Solution 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.
Solution 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>
Solution 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>
Solution 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>
Related videos on Youtube
hjchin
Updated on June 04, 2022Comments
-
hjchin almost 2 years
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>
-
hjchin over 6 yearsJust rearrangement of the elements? I assumed to remove the paddingBottom as well. I tried and it didn't work.
-
hjchin over 6 yearsI need to use CoordinatorLayout as root layout as I have AppBarLayout in the user_app_bar layout file.
-
Yupi over 6 yearsIf you don't have
TabLayout
inside yout app_bar_ layout.xml then just use topmargin see my edite answer -
hjchin over 6 yearsI added the app_bar layout file on above. I can't use a fixed height as AppBarLayout has a CollapsingToolbarLayout in it.
-
Yupi over 6 yearsThen 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 remain56dp
-
hjchin over 6 yearsActually I'm using this approach but with paddingBottom. I was thinking if there is a better approach than this. Thanks for the input.
-
hjchin almost 6 yearsCould 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.
-
s-han.lee about 5 yearsThis is perfect answer +1
-
mustofa.id over 4 yearsHow about scrolling behavior? Like hide appbar on scroll.
-
pete almost 4 yearslayout_above does the trick for me. layout_below somehow doesn't work
-
Stan almost 3 yearsThe 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.