FabCradle dont work with HideBottomViewOnScrollBehavior layout behaviour

FabCradle dont work with HideBottomViewOnScrollBehavior layout behaviour - android

I wanted to implement app:layout_behavior dependency. After I've implemented it, my fabCradle options don't work. I don't know why I have this problem. I've tried to do this with scrolladapter, but it's more relevant to use app:layout_behavior.
Before After
Activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.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"
tools:context=".MainActivity">
<androidx.fragment.app.FragmentContainerView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/fragment_container"/>
<com.google.android.material.bottomappbar.BottomAppBar
android:id="#+id/bottomAppBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:fabCradleMargin="10dp"
app:fabCradleRoundedCornerRadius="10dp"
app:fabCradleVerticalOffset="5dp"
>
<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="#drawable/transparent_background"
app:menu="#menu/nav_menu"/>
</com.google.android.material.bottomappbar.BottomAppBar>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/essa"
android:src="#drawable/ic_baseline_add_24"
app:layout_anchor="#+id/bottomAppBar"
app:layout_anchorGravity="top|center"
/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

delete app:layout_behavior dependency and just add app:hideOnScroll="true"

Related

BottomAppBar and BottomNavigationView with FloatingActionButton UI is messed up

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>

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>

How to Remove border around BottomNavigationView

How to remove border in BottomNavigationView like below.
My layout:
bottom_nav_activity.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context=".main.BottomNavigation">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/frameContainer"
app:layout_constraintBottom_toTopOf = "#id/bottomAppBar">
</FrameLayout>
<com.google.android.material.bottomappbar.BottomAppBar
android:id="#+id/bottomAppBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:fabCradleMargin="10dp"
app:fabCradleVerticalOffset="10dp"
app:fabCradleRoundedCornerRadius="20dp"
android:layout_gravity="bottom">
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottomNavigationView"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:menu="#menu/bottom_nav_menu"
android:layout_marginEnd="16dp"
app:popupTheme="#style/MyDarkToolbarStyle"
app:backgroundTint="#android:color/transparent"/>
</com.google.android.material.bottomappbar.BottomAppBar>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:backgroundTint="#color/white"
android:src="#drawable/ic_explore"
app:layout_anchor="#id/bottomAppBar" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
If I add background color in BottomAppbar the result is
Is there anyone help me to resolve this?

Add below line to your BottomNavigationView tag
app:elevation="0dp"
If you are using above Api-level 28, You can Add below lines too
android:outlineAmbientShadowColor="#android:color/transparent"
android:outlineSpotShadowColor="#android:color/transparent"

You can solve this in two steps:
Step 1: Create a drawable file that has a Rectangle shape with a transparent color
res\drawable\transparent_rect.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<solid android:color="#00000000" />
</shape>
Step 2: Set the background of the BottomNavigationView to this drawable using android:background
android:background="#drawable/transparent_rect"
Applying this to your layout:
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context=".main.BottomNavigation">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/frameContainer"
app:layout_constraintBottom_toTopOf = "#id/bottomAppBar">
</FrameLayout>
<com.google.android.material.bottomappbar.BottomAppBar
android:id="#+id/bottomAppBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:fabCradleMargin="10dp"
app:fabCradleVerticalOffset="10dp"
app:fabCradleRoundedCornerRadius="20dp"
android:layout_gravity="bottom">
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottomNavigationView"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:menu="#menu/bottom_nav_menu"
android:layout_marginEnd="16dp"
app:popupTheme="#style/MyDarkToolbarStyle"
android:background="#drawable/transparent_rect"
app:backgroundTint="#android:color/transparent"/>
</com.google.android.material.bottomappbar.BottomAppBar>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:backgroundTint="#color/white"
android:src="#drawable/ic_explore"
app:layout_anchor="#id/bottomAppBar" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Preview:

You can use linear layout instead to get rid of the margin start and margin end. See below code.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
tools:context=".home.MainFragment">
<androidx.viewpager2.widget.ViewPager2
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottom_nav"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:menu="#menu/main_bottom_nav"/>
</LinearLayout>

RecycleView doesn't Scroll

been scowering the internet on this seems to happen a lot for a lot of reasons but I can't solve mine. I can't scroll my RecyclerView and I completly don't know why.
My recyclerView is included in another layout (activity_class.xml)
Here is my layout code:
content_home_screen.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.recyclerview.widget.RecyclerView 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/recyclerview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFFF"
tools:context="com.example.schoolteacher.ClassActivity"
tools:showIn="#layout/activity_class">
</androidx.recyclerview.widget.RecyclerView>
activity_class.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.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"
tools:context="com.example.schoolteacher.ClassActivity">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#FFFFFF"
app:popupTheme="#style/AppTheme.PopupOverlay"
app:title="#string/classes"/>
</com.google.android.material.appbar.AppBarLayout>
<include layout="#layout/content_home_screen" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_marginEnd="#dimen/fab_margin"
android:layout_marginBottom="70dp"
android:src="#drawable/ic_add_fab"
android:theme="#style/Theme.AppCompat"
app:backgroundTint="#color/colorPrimary" />
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="?android:attr/windowBackground"
app:menu="#menu/bottombar_menu" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Any ideas, because I tried almost everything.

Add this to the content_home_screen layout
android:scrollbars="vertical"

Android - RecyclerView Obscured By BottomNavigationView

I created the default bottom navigation project. In one of the fragments I added a ListView, that worked fine. Then I changed that to a RecyclerView, it gets obscured by the BottomNavigationView. What am I doing wrong?
Here is the layout for the main activity:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="#+id/my_toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:background="?attr/colorPrimary"
android:elevation="4dp"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
</LinearLayout>
<android.support.design.widget.BottomNavigationView
android:id="#+id/navigation"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="0dp"
android:layout_marginStart="0dp"
android:background="?android:attr/windowBackground"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:menu="#menu/navigation" />
</android.support.constraint.ConstraintLayout>
Here is the layout for the fragment:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
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"
tools:context=".DiaryFragment">
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/darker_gray"
tools:listitem="#layout/recyclerview_item" />
</LinearLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:src="#android:drawable/ic_menu_add"
android:layout_marginBottom="70dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="10dp"
/>
</android.support.constraint.ConstraintLayout>
When the RecyclerView contains more rows than fit on the screen, then the last row appears partially behind the BottomNavigationView. I would be grateful for any suggestions.
Edit - here is a screenshot:
Edit #2: In the first layout, if I move the BottomNavigationView inside the LinearLayout (thanks #Juanje), and change its android:layout_width from 0dp to match_parent, then the RecyclerView is no longer obscured by the BottomNavigationView, but now the FloatingActionButton is cast adrift:
I am tinkering with it, I would be grateful for any ideas.
Edit #3
Below is what I ended up with after following the accepted answer plus a couple other tweaks. The necessary changes were:
1) In the first layout:
Move the BottomNavigationView inside the LinearLayout
In the BottomNavigationView, change android:layout_width from "0dp" to "match_parent"
2) In the second layout:
In the FloatingActionButton, change android:layout_marginBottom
from "70dp" to "10dp"
The first layout file:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="#+id/my_toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:background="?attr/colorPrimary"
android:elevation="4dp"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<android.support.design.widget.BottomNavigationView
android:id="#+id/navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="0dp"
android:layout_marginStart="0dp"
android:background="?android:attr/windowBackground"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:menu="#menu/navigation" />
</LinearLayout>
</android.support.constraint.ConstraintLayout>
The second layout file:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
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"
tools:context=".DiaryFragment">
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/darker_gray"
tools:listitem="#layout/recyclerview_item" />
</LinearLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:src="#android:drawable/ic_menu_add"
android:layout_marginBottom="10dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="10dp"
/>
</android.support.constraint.ConstraintLayout>

You need to set some constraints, otherwise your elements overlap. Use this:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:orientation="vertical"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#id/navigation"> <!--Added here and one line above; changed height: 0dp height means match constraint-->
<android.support.v7.widget.Toolbar
android:id="#+id/my_toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:background="?attr/colorPrimary"
android:elevation="4dp"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
</LinearLayout>
<android.support.design.widget.BottomNavigationView
android:id="#+id/navigation"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="0dp"
android:layout_marginStart="0dp"
android:background="?android:attr/windowBackground"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:menu="#menu/navigation" />
</android.support.constraint.ConstraintLayout>

You should include the BottomNavigationView inside the LinearLayout.

The important attributes for fragment element is setting android:layout_height="0dp" to match the constrains layout and adding app:layout_constraintBottom_toTopOf="#id/nav_view" to make the fragment be above the BottomNavigationView.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/nav_view"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="0dp"
android:layout_marginEnd="0dp"
android:background="?android:attr/windowBackground"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:menu="#menu/bottom_nav_menu" />
<fragment
android:id="#+id/nav_host_fragment"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="0dp"
app:defaultNavHost="true"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#id/nav_view"
app:navGraph="#navigation/mobile_navigation" />
</androidx.constraintlayout.widget.ConstraintLayout>

Here is my solution with SwipeRefreshLayout:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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="match_parent"
xmlns:tools="http://schemas.android.com/tools">
<androidx.swiperefreshlayout.widget.SwipeRefreshLayout
android:id="#+id/swipe_refresh"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/people_list"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</androidx.swiperefreshlayout.widget.SwipeRefreshLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
BottomNavigationView is wrapped by ConstraintLayout and looks like:
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:elevation="0dp"
app:menu="#menu/navigation"/>

Develop Reference

The Android operating system is a mobile operating system that was developed by Google (GOOGL?) to be primarily used for touchscreen devices, cell phones, and tablets.

FabCradle dont work with HideBottomViewOnScrollBehavior layout behaviour - android

delete app:layout_behavior dependency and just add app:hideOnScroll="true"

Related

BottomAppBar and BottomNavigationView with FloatingActionButton UI is messed up

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

How to Remove border around BottomNavigationView

RecycleView doesn't Scroll

Android - RecyclerView Obscured By BottomNavigationView

Categories

Resources