BottomAppBar and BottomNavigationView with FloatingActionButton UI is messed up

Question

I have added BottomAppBar and BottomNavigationView with FloatingActionButton inside ConstraintLayout but the white strip is showing at bottom of the screen in the entire application. On this screen, a Navigation drawer is added using Drawerlaout, and Framelayout is used for that. Now it is difficult to manage all these components.

So, please check the below code and help me to sort this UI issue.

<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout 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/drawer"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="right"
    android:fitsSystemWindows="true"
    android:gravity="right"
    tools:openDrawer="end">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="45dp"
            android:background="@color/colorPrimaryDark"
            android:elevation="5dp"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:layout_constraintTop_toTopOf="parent"
            app:titleTextColor="@color/White"
            tools:layout_editor_absoluteX="0dp" />

        <include
            android:id="@+id/header"
            layout="@layout/header_layout" />

        <FrameLayout
            android:id="@+id/home_fragment_container"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@id/header"
            app:layout_constraintBottom_toTopOf="@id/layout_constraint"></FrameLayout>

        <androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/layout_constraint"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/White"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent">

            <androidx.coordinatorlayout.widget.CoordinatorLayout
                android:id="@+id/layout_coordinator"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@color/White">

                <com.google.android.material.bottomappbar.BottomAppBar
                    android:id="@+id/bottom_app_bar"
                    style="@style/Widget.MaterialComponents.BottomAppBar"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_gravity="bottom"
                    app:backgroundTint="@color/lighter_gray"
                    app:fabAlignmentMode="center"
                    app:fabCradleMargin="7dp"
                    app:fabCradleRoundedCornerRadius="7dp" />

                <com.google.android.material.bottomnavigation.BottomNavigationView
                    android:id="@+id/navigation"
                    android:layout_width="match_parent"
                    android:layout_height="85dp"
                    android:layout_gravity="bottom"
                    android:background="@android:color/transparent"
                    android:paddingTop="30dp"
                    app:itemBackground="@android:color/transparent"
                    app:itemIconTint="@drawable/tab_color"
                    app:itemTextColor="@drawable/tab_color"
                    app:labelVisibilityMode="labeled"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintLeft_toLeftOf="parent"
                    app:layout_constraintRight_toRightOf="parent"
                    app:menu="@menu/bottom_navigation_menu" />

                <com.google.android.material.floatingactionbutton.FloatingActionButton
                    android:id="@+id/fab_options"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    app:backgroundTint="@color/colorPrimary"
                    app:fabSize="auto"
                    app:layout_anchor="@+id/bottom_app_bar"
                    app:layout_anchorGravity="center|top"
                    app:srcCompat="@drawable/ic_baseline_add" />

            </androidx.coordinatorlayout.widget.CoordinatorLayout>

        </androidx.constraintlayout.widget.ConstraintLayout>

    </androidx.constraintlayout.widget.ConstraintLayout>

    <com.google.android.material.navigation.NavigationView
        android:id="@+id/navview"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="end|right"
        android:background="@color/White"
        android:fitsSystemWindows="true"
        android:paddingLeft="20dp"
        android:paddingRight="20dp"
        app:headerLayout="@layout/nav_header"
        app:itemBackground="@android:color/transparent"
        app:itemIconTint="@color/background_gray"
        app:itemTextColor="@color/background_gray"
        app:menu="@menu/drawer_menu" />

</androidx.drawerlayout.widget.DrawerLayout>

I am adding a screenshot of the UI issue:

Answer 1

You can not remove this padding, but you can solve this by adding an elevation to the BottomAppBar.

Doing that, you could encounter artifacts at right and left of the BottomNavigationView, to fix this Add 0dp Elevation to the BottomNavigationView.

Extra Notes:

• Remove the constraints from the BottomNavigationView as it is not wrapped in a ConstraintLayout
• You can drop the ConstraintLayout that wraps the CoordinatorLayout, as it's an extra ViewGroup that has no need.

<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout 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/drawer"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="right"
    android:fitsSystemWindows="true"
    android:gravity="right"
    tools:openDrawer="end">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="45dp"
            android:background="@color/colorPrimaryDark"
            android:elevation="5dp"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:layout_constraintTop_toTopOf="parent"
            app:titleTextColor="@color/White"
            tools:layout_editor_absoluteX="0dp" />

        <include
            android:id="@+id/header"
            layout="@layout/header_layout" />

        <FrameLayout
            android:id="@+id/home_fragment_container"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@id/header"
            app:layout_constraintBottom_toTopOf="@id/layout_constraint"></FrameLayout>


        <androidx.coordinatorlayout.widget.CoordinatorLayout
            android:id="@+id/layout_coordinator"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:background="@android:color/transparent"
            app:layout_constraintBottom_toBottomOf="parent">

            <com.google.android.material.bottomappbar.BottomAppBar
                android:id="@+id/bottom_app_bar"
                style="@style/Widget.MaterialComponents.BottomAppBar"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom"
                app:backgroundTint="@color/lighter_gray"
                app:elevation="10dp"
                app:fabAlignmentMode="center"
                app:fabCradleMargin="7dp"
                app:fabCradleRoundedCornerRadius="7dp" />

            <com.google.android.material.bottomnavigation.BottomNavigationView
                android:id="@+id/navigation"
                android:layout_width="match_parent"
                android:layout_height="85dp"
                android:layout_gravity="bottom"
                android:background="@android:color/transparent"
                android:paddingTop="30dp"
                app:elevation="0dp"
                app:itemBackground="@android:color/transparent"
                app:itemIconTint="@drawable/tab_color"
                app:itemTextColor="@drawable/tab_color"
                app:labelVisibilityMode="labeled"
                app:menu="@menu/bottom_navigation_main" />

            <com.google.android.material.floatingactionbutton.FloatingActionButton
                android:id="@+id/fab_options"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:backgroundTint="@color/colorPrimary"
                app:fabSize="auto"
                app:layout_anchor="@+id/bottom_app_bar"
                app:layout_anchorGravity="center|top"
                app:srcCompat="@drawable/ic_baseline_add" />

        </androidx.coordinatorlayout.widget.CoordinatorLayout>


    </androidx.constraintlayout.widget.ConstraintLayout>

    <com.google.android.material.navigation.NavigationView
        android:id="@+id/navview"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="end|right"
        android:background="@color/White"
        android:fitsSystemWindows="true"
        android:paddingLeft="20dp"
        android:paddingRight="20dp"
        app:headerLayout="@layout/nav_header"
        app:itemBackground="@android:color/transparent"
        app:itemIconTint="@color/background_gray"
        app:itemTextColor="@color/background_gray"
        app:menu="@menu/drawer_menu" />

</androidx.drawerlayout.widget.DrawerLayout>