CODEWITHSUNDEEP
androidbottomnavigationviewcoordinator-layout
hjchin
hjchin

Reputation: 874

BottomNavigationView overlapping FrameLayout in CoordinatorLayout

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>

Upvotes: 18

Views: 12825

Answers (5)

Amit Sharma
Amit Sharma

Reputation: 1

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

Upvotes: -2

Jafar Sadiq SH
Jafar Sadiq SH

Reputation: 734

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>

Upvotes: 6

Chris Gomez
Chris Gomez

Reputation: 6794

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>

Upvotes: 4

Yupi
Yupi

Reputation: 4470

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.

Upvotes: 8

yash786
yash786

Reputation: 1151

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

Upvotes: 1

Related Questions