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