BottomAppBar and BottomNavigationView with FloatingActionButton UI is messed up - android

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:


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>

Related

CoordinatorLayout is hiding half of the floating action button when CoordinatorLayout 's width is set to wrap_content

So I am trying to make a layout like this :
With a FramLayout to hold fragments and I want the frameLayout to be positioned below the topAppBar and above floatingActionButton but I couldn't make it works
I tried to make a relativeLayout and put the FrameLayout between the topApbar and the coordinatorAyout but it cuts the FAB and the rounded space under the fab disappeared as the image below
This is my activity_main.xml :
<?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/drawerLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/AppBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</com.google.android.material.appbar.AppBarLayout>
<com.google.android.material.appbar.MaterialToolbar
android:id="#+id/topToolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/primary"
app:layout_anchor="#+id/AppBarLayout"
app:layout_anchorGravity="center"
app:menu="#menu/top_nav_menu"
app:title="Reading List">
</com.google.android.material.appbar.MaterialToolbar>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/topToolbar"
android:layout_above="#id/coordinatorLayout"
android:background="#color/purple_500"/>
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:id="#+id/coordinatorLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#color/white"
tools:context=".MainActivity">
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:backgroundTint="#color/secondary"
android:src="#drawable/ic_add"
app:layout_anchor="#id/bottomAppBar"
app:maxImageSize="55dp"
app:tint="#color/white" />
<com.google.android.material.bottomappbar.BottomAppBar
android:id="#+id/bottomAppBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:backgroundTint="#color/primary">
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottomNavigationView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginEnd="16dp"
android:background="#android:color/transparent"
app:elevation="0dp"
app:itemIconSize="27dp"
app:itemIconTint="#color/white"
app:itemTextColor="#color/white"
app:menu="#menu/bottom_nav_menu">
</com.google.android.material.bottomnavigation.BottomNavigationView>
</com.google.android.material.bottomappbar.BottomAppBar>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
</RelativeLayout>
<com.google.android.material.navigation.NavigationView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:backgroundTint="#color/primary"
android:fitsSystemWindows="true"
app:headerLayout="#layout/sidebar_header"
app:menu="#menu/nav_drawer_menu"
></com.google.android.material.navigation.NavigationView>
</androidx.drawerlayout.widget.DrawerLayout>

Try this one (I moved all elements into CoordinatorLayout and added app:layout_behavior="#string/appbar_scrolling_view_behavior" to your FrameLayout):
<?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/drawerLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:id="#+id/coordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white"
tools:context=".MainActivity">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/AppBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.google.android.material.appbar.MaterialToolbar
android:id="#+id/topToolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/primary"
app:layout_anchor="#+id/AppBarLayout"
app:layout_anchorGravity="center"
app:menu="#menu/top_nav_menu"
app:title="Reading List" />
</com.google.android.material.appbar.AppBarLayout>
<FrameLayout
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#id/coordinatorLayout"
android:layout_below="#id/topToolbar"
android:background="#color/purple_500" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:backgroundTint="#color/secondary"
android:src="#drawable/ic_add"
app:layout_anchor="#id/bottomAppBar"
app:maxImageSize="55dp"
app:tint="#color/white" />
<com.google.android.material.bottomappbar.BottomAppBar
android:id="#+id/bottomAppBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:backgroundTint="#color/primary">
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottomNavigationView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginEnd="16dp"
android:background="#android:color/transparent"
app:elevation="0dp"
app:itemIconSize="27dp"
app:itemIconTint="#color/white"
app:itemTextColor="#color/white"
app:menu="#menu/bottom_nav_menu">
</com.google.android.material.bottomnavigation.BottomNavigationView>
</com.google.android.material.bottomappbar.BottomAppBar>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
<com.google.android.material.navigation.NavigationView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:backgroundTint="#color/primary"
app:headerLayout="#layout/sidebar_header"
app:menu="#menu/nav_drawer_menu" />
</androidx.drawerlayout.widget.DrawerLayout>

Shared Element Transition overloapping BottomNavigationView

I used SharedElement Transition to go DetailsActivity in my recyclerView's onItemClick method. But when the item which is at the bottom is clicked it first it gets on top op BottomNavigationView an then Transition happens. OnBackPressed it is the same. Also it get ons top of mechanic keys in emulator. How to fix it?
<android.support.constraint.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=".MainActivity.MainActivity"
android:id="#+id/main_activity"
>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="0dp"
android:id="#+id/childofMain"
app:layout_constraintBottom_toTopOf="#+id/bottom_navigation_view"
android:layout_marginTop="0dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_below="#+id/bottom_navigation_view">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="400dp"
android:background="#null"
android:layout_below="#+id/mainRecyclerView"
>
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:titleEnabled="false"
app:expandedTitleMarginBottom="94dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="?colorPrimary"
android:layout_below="#+id/mainRecyclerView"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:id="#+id/toolbar_image"
app:layout_collapseMode="parallax"
/>
<ImageView android:layout_width="120dp"
android:layout_height="36dp"
android:id="#+id/mainOdulluDUzyazi"
android:layout_marginTop="40dp"
android:scaleType="fitCenter"
android:layout_gravity="center|top"
app:layout_collapseMode="parallax"
/>
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/trendyarismalar"
android:text="Trend Yarışmalar"
android:textColor="#color/white"
android:layout_gravity="center|top"
android:layout_marginTop="100dp"
android:textSize="20sp"
android:textStyle="bold"
app:layout_collapseMode="parallax"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/mainRecyclerView"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:background="#null"
android:layout_gravity="bottom"
app:behavior_overlapTop="150dp"
android:layout_marginRight="15dp"
android:layout_marginLeft="15dp"
android:layout_below="#+id/bottom_navigation_view"
/>
</android.support.design.widget.CoordinatorLayout>
<com.ittianyu.bottomnavigationviewex.BottomNavigationViewEx
android:id="#+id/bottom_navigation_view"
android:layout_width="match_parent"
android:layout_height="50dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:menu="#menu/bottom_navigation_menu"
android:background="?android:attr/windowBackground"
app:itemIconTint="#drawable/nav_item_color_state"
app:itemIconSize="25dp"
app:layout_constraintCircleRadius="5dp"
app:labelVisibilityMode="unlabeled"
>
</com.ittianyu.bottomnavigationviewex.BottomNavigationViewEx>
`

You may try to use this;
<item name="android:windowSharedElementsUseOverlay">false</item>
Note: Put this line to your application base theme inside styles.xml file.

Android CoordinatorLayout, AppBarLayout and inkluded RelativeLayout with Button Overlap

My Problem: The Content of the included RelativeLayout/RecyclerView does not stop before the buttons displayed at the bottom of the screen (see Fig. 1). Therefore the last Elements inside the RecyclerView are overlapped by the buttons after scrolling (see Fig. 2).
My current source code:
<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.example.julian.brainy.ProjectListActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="#dimen/app_bar_height"
android:fitsSystemWindows="true"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
android:theme="#style/MyActionBarTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
app:expandedTitleGravity="bottom"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:toolbarId="#+id/toolbar">
<ImageView
android:id="#+id/bgImage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:contentDescription="#null"
android:minHeight="100dp"
android:scaleType="fitXY"
android:src="#drawable/bg5"
app:layout_collapseMode="parallax"
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed" />
<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/MyActionBarTheme.PopupOverlay"
app:titleTextColor="#color/brainyPrimary" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<include
layout="#layout/content_project_list" />
<Button
android:id="#+id/projectOverviewCreateProject"
style="#style/Widget.AppCompat.Button.Colored"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:layout_alignParentStart="true"
android:layout_gravity="bottom"
android:layout_marginBottom="60dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:stateListAnimator="#null"
android:layout_marginTop="5dp"
android:background="#color/brainyPrimary"
android:text="#string/btn_create_project"
android:textColor="#color/brainyWhite" />
<Button
android:id="#+id/btndirectlearning"
style="#style/Widget.AppCompat.Button.Colored"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:stateListAnimator="#null"
android:layout_alignParentEnd="true"
android:layout_alignParentStart="true"
android:layout_gravity="bottom"
android:layout_margin="5dp"
android:background="#color/brainyPrimaryExperimental"
android:text="#string/btn_start_timer_project_list"
android:textColor="#color/brainyWhite" />
</android.support.design.widget.CoordinatorLayout>
and the included XML:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
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:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/projectOverviewCreateProject"
android:background="#android:color/transparent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context=".ProjectListActivity"
tools:showIn="#layout/activity_project_list">
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#id/projectOverviewCreateProject"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:clipToPadding="false"
android:scrollbars="vertical" />
</RelativeLayout>
I tried to use a ConstraintLayout, but it broke the AppBar.
Update: Now the included Layout exceeds the top of the AppBarLayout.
Source code changed:
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<include
layout="#layout/content_project_list"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_margin="5dp"
app:layout_constraintBottom_toTopOf="#id/projectOverviewCreateProject"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<Button
android:id="#+id/projectOverviewCreateProject"
style="#style/Widget.AppCompat.Button.Colored"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentEnd="true"
android:layout_alignParentBottom="true"
android:layout_gravity="bottom"
android:layout_margin="5dp"
android:background="#color/brainyPrimary"
android:stateListAnimator="#null"
android:text="#string/btn_create_project"
android:textColor="#color/brainyWhite"
app:layout_constraintBottom_toTopOf="#id/btndirectlearning"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintWidth_default="spread"
tools:layout_editor_absoluteX="5dp"
tools:layout_editor_absoluteY="459dp" />
<Button
android:id="#+id/btndirectlearning"
style="#style/Widget.AppCompat.Button.Colored"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentEnd="true"
android:layout_alignParentBottom="true"
android:layout_gravity="bottom"
android:layout_margin="5dp"
android:background="#color/brainyPrimaryExperimental"
android:stateListAnimator="#null"
android:text="#string/btn_start_timer_project_list"
android:textColor="#color/brainyWhite"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintWidth_default="spread"
tools:layout_editor_absoluteX="222dp" />
</android.support.constraint.ConstraintLayout>

Put the and the two Buttons in a ConstraintLayout. Then, give the buttons the right rules so they will stay at the bottom of the layout, and modify the tag to look like this:
<include
android:layout_height="0dp"
android:layout_width="match_parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toTopOf="#id/projectOverviewCreateProject"
layout="#layout/content_project_list" />
EDIT:
to solve the issue related to the RecyclerView overlapping the appBar, just add this to your ConstraintLayout:
app:layout_behavior="#string/appbar_scrolling_view_behavior"

How to keep the logo above the collapsing toolbar

I'm programming in kotlin, I have problems with the collapsing toolbar, my main view is the following
Main View
When scrolling my logo appears behind the collapsing toolbar, as it appears in the following image
When Scrolling
<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:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="false">
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="12dp"
android:layout_marginRight="12dp"
android:layout_marginBottom="56dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="120dp">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
style="#style/Widget.QueComer.CollapsingToolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
<LinearLayout
style="#style/Widget.QueComer.CollapsingToolbarContent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.65">
</LinearLayout>
<!-- Wrap this view: -->
<android.support.v7.widget.Toolbar
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/header_logo"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_gravity="center"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:contentDescription="#string/app_name"
android:cropToPadding="false"
android:scaleType="fitCenter"
android:src="#mipmap/ic_logo"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.3"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#mipmap/ic_logo" />
</android.support.constraint.ConstraintLayout>
<android.support.design.widget.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#ffffff"
android:theme="#style/ThemeOverlay.QueComer.BottomNavigation"
app:menu="#menu/menu_quecomer">
</android.support.design.widget.BottomNavigationView>
</android.support.design.widget.CoordinatorLayout>
I need the logo to be in front of the bar, as the following image shows
result Image
The result image is edited with photoshop

Try to place ImageView inside your CollapsingToolbarLayout like this:
<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:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="false">
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="12dp"
android:layout_marginRight="12dp"
android:layout_marginBottom="56dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="120dp">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
style="#style/Widget.QueComer.CollapsingToolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
<LinearLayout
style="#style/Widget.QueComer.CollapsingToolbarContent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.65">
<ImageView
android:id="#+id/header_logo"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_gravity="center"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:contentDescription="#string/app_name"
android:cropToPadding="false"
android:scaleType="fitCenter"
android:src="#mipmap/ic_logo"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.3"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#mipmap/ic_logo" />
</LinearLayout>
<!-- Wrap this view: -->
<android.support.v7.widget.Toolbar
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.design.widget.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#ffffff"
android:theme="#style/ThemeOverlay.QueComer.BottomNavigation"
app:menu="#menu/menu_quecomer">
</android.support.design.widget.BottomNavigationView>
</android.support.design.widget.CoordinatorLayout>

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>

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.

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>

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>

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

Categories

Resources