Bottomnavigationview Overlapping Framelayout In Coordinatorlayout

January 23, 2024 Post a Comment

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 BottomNavigat

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"?><layoutxmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"><data></data><FrameLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"><RelativeLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><android.support.design.widget.CoordinatorLayoutandroid:id="@+id/homeCoordinator"android:layout_width="match_parent"android:layout_height="match_parent"android:layout_above="@+id/bnHome" //abovebottomnavigation
            ><android.support.design.widget.AppBarLayoutandroid:id="@+id/homeAppbar"android:layout_width="match_parent"android:layout_height="wrap_content"android:elevation="0dp"android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"><RelativeLayoutandroid: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.AppCompatImageViewandroid: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.AppCompatTextViewandroid: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.AppCompatImageViewandroid: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.AppCompatImageViewandroid: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><FrameLayoutandroid: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.BottomNavigationViewandroid:id="@+id/bnHome"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_alignParentBottom="true" // alignparentbottomtrueapp: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.ContentLoadingProgressBarandroid: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

Baca Juga

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.ConstraintLayoutxmlns: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"><fragmentandroid: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.BottomNavigationViewandroid: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.CoordinatorLayoutxmlns: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"
><includelayout="@layout/user_app_bar"/><FrameLayoutandroid: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.FloatingActionButtonandroid: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.BottomNavigationViewandroid: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>

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