I'm using Material FAB and BottomSheet in my Android App and i'm having some issues with the FAB which is overlaying the BottomSheet and i would prevent it.
Actually i have two BottomSheets when the BottomSheet1 is completly expanded i would the FAB to be behind the BottomSheet while when the BottomSheet2 is HalfExpanded i would it to be over the BottomSheet and make it behind it when it's fully expanded.
I've yet tried to make the BottomSheet elevation highter than the FAB one but it's not working any way.
Here is how my code looks like:
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/content"
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=".LetturaActivity">
<com.google.android.material.bottomappbar.BottomAppBar
android:id="#+id/bottomAppBar"
style="#style/Widget.MaterialComponents.BottomAppBar.Colored"
android:layout_gravity="bottom"
app:navigationIcon="#drawable/ic_baseline_menu_24"
app:menu="#menu/bottom_app_bar"
app:hideOnScroll="true"
android:layout_width="match_parent"
android:layout_height="wrap_content" \>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fabNuovo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="#drawable/ic_add"
android:elevation="4dp"
app:tint="#color/white"
android:contentDescription="#string/nuovo_documento"
app:layout_anchor="#id/bottomAppBar"
/>
<include layout="#layout/bottom_sheet_testata" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
And the BottomSheet parent layout is the following:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/bottomSheetTestata"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFFFFF"
app:behavior_hideable="true"
android:elevation="5dp"
android:clickable="false"
android:focusable="false"
app:behavior_peekHeight="0dp"
app:layout_behavior="#string/bottom_sheet_behavior"
android:orientation="vertical">
...
<\LinearLayout>
But it looks like this when BottomSheet is expanded:
Is not overlapping is overlaying, the problem is the elevation.
From the documentation you can see all elements have different elevations.
Fab is 6dp, although the BottomSheet is not easy to find is there, it should be 16dp (you can use your browser functionality for the keyword bottom)
So change your elevation to
android:elevation="16dp"
Related
I made a simple layout in which there is a AppBarLayout (that doesn't scroll), some content in the middle, and a BottomSheet. This BottomSheet is actually a LinearLayout with a BottomSheetBehavior and inside has a RecyclerView.
This BottomSheet when expanded places the RecyclerView on top of the AppBarLayout. The problem is that, when the user tries to scroll this RecyclerView, the AppBarLayout below steals the scroll.
I'm leaving the layout code, but I uploaded the whole example project to GitHub with a GIF to illustrate.
Layout
<?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:id="#+id/coordinator_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:liftOnScroll="false">
<com.google.android.material.appbar.MaterialToolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:title="#string/app_name" />
<androidx.appcompat.widget.AppCompatTextView
android:layout_width="match_parent"
android:layout_height="56dp"
android:background="?colorSurface"
android:gravity="center_vertical"
android:padding="16dp"
android:text="Subtitle"
android:textAppearance="?textAppearanceSubtitle1" />
<androidx.appcompat.widget.AppCompatTextView
android:layout_width="match_parent"
android:layout_height="56dp"
android:background="?colorSurface"
android:gravity="center_vertical"
android:padding="16dp"
android:text="Subsubtitle"
android:textAppearance="?textAppearanceBody2" />
</com.google.android.material.appbar.AppBarLayout>
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="56dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<androidx.appcompat.widget.AppCompatTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="16dp"
android:text="#string/lorem_ipsum"
android:textAppearance="?textAppearanceBody1" />
</androidx.core.widget.NestedScrollView>
<LinearLayout
android:id="#+id/bottom_sheet_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="bottom"
android:background="#FFF"
android:elevation="5dp"
android:orientation="vertical"
app:behavior_hideable="false"
app:behavior_peekHeight="64dp"
app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior">
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/bottom_sheet_header"
android:layout_width="match_parent"
android:layout_height="64dp"
android:gravity="center_vertical"
android:padding="16dp"
android:text="Fruits"
android:textAppearance="?textAppearanceHeadline6" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager" />
</LinearLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
I've tried:
Placing the nestedScrollingEnabled attribute in various places, but didn't work and this behavior occurs in old APIs (like JellyBean);
In the original project where I saw this I wrote a custom AppBarLayout behavior to ignore if the target View is the RecyclerView of the BottomSheet, but also didn't work;
Set the whole AppBarLayout GONE when the BottomSheet is expanded and funny enough the AppBarLayout behaves like I set to INVISIBLE (if programmatically set to GONE, it behaves like invisible, if set before inflating, it behaves as expected).
I'm avoiding use a Fragment to create this BottomSheet due to project specifications.
The workaround I did was split the CoordinatorLayout in 2, where one contains the AppBarLayout and the NestedScrollView, and the other one contains the BottomSheet (LinearLayout).
The hierarchy, using the layout of the question as example, end up like this:
<FrameLayout>
<CoordinatorLayout>
<AppBarLayout>
<MaterialToolbar/>
<AppCompatTextView/>
<AppCompatTextView/>
</AppBarLayout>
<NestedScrollView>
<AppCompatTextView/>
</NestedScrollView>
</CoordinatorLayout>
<CoordinatorLayout>
<LinearLayout>
<AppCompatTextView/>
<RecyclerView/>
</LinearLayout>
</CoordinatorLayout>
</FrameLayout>
In my case this works because my BottomSheet doesn't need to coordinate any behavior with the other views.
I would like to use a CoordinatorLayout to include a BottomAppBar at the bottom of the screen, and to display some content in the remaining space (for example using a ConstraintLayout).
If I add a ConstraintLayout to the CoordinatorLayout, and then I add a button which is placed at the bottom of the ConstraintLayout, the button is covered by the BottomAppBar.
I would like the ConstraintLayout to use up all the vertical space, except for where the BottomAppBar is located, so that the button is not covered.
I tried including app:layout_behavior="#string/appbar_scrolling_view_behavior" in the ConstraintLayout, as suggested on some sites, but it doesn't work.
Also, setting app:layout_insetEdge="bottom" in the BottomAppBar, and then setting app:layout_dodgeInsetEdges="bottom" in the ConstraintLayout does not work properly, since the ConstraintLayout then overflows at the top of the screen (but the bottom is not covered anymore).
Below is the xml layout file where the BottomAppBar covers the button.
Thank you
<?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:id="#+id/coordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="top"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<Button
android:id="#+id/myButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
<com.google.android.material.bottomappbar.BottomAppBar
android:id="#+id/bottomAppBar"
style="#style/Widget.MaterialComponents.BottomAppBar.Colored"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
I haven't found a proper fix, but what works for me is adding a margin to the one overlapping the BottomAppBar,
android:layout_marginBottom="?attr/actionBarSize"
e.g.
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="top"
android:layout_marginBottom="?attr/actionBarSize"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<Button
android:id="#+id/myButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
I'm having difficulties getting AppBarLayout, NestedScrollView and BottomNavigationView working together properly. My problem is that when I set app:layout_behavior="#string/appbar_scrolling_view_behavior" on the NestedScrollView, it extends behind the BottomNavigationView as illustrated here.
So the issue is that the BottomNavBar overlays the content, instead of the content stopping at the top of the Nav.
I've tried many solutions, including wrapping the layout in a RelativeLayout and putting the BottomNavView in that instead of the CoordinatorLayout.
Here's the basic layout from the sample project I've attached.
<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.android.navigationadvancedsample.MainActivity">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:elevation="0dp">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways" />
</com.google.android.material.appbar.AppBarLayout>
<androidx.core.widget.NestedScrollView
android:id="#+id/app_scroll_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:fillViewport="true">
<FrameLayout
android:id="#+id/nav_host_container"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
</androidx.core.widget.NestedScrollView>
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottom_nav"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:menu="#menu/bottom_nav"/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Here's a small sample project that reproduces the issue (based on the Navigation components sample from Google). Can someone please tell me what I'm doing wrong?
You just have to take BottomNavigationView out of the CoordinatorLayout and put both inside a RelativeLayout.
I was facing same problem and found the solution here. Hope it helps.
In your code, your NestedScrollView was taking up the whole screen. Using a vertical LinearLayout with weights you can make it to where the NestedScrollView stops at the top of the NavBar like you want.
<androidx.core.widget.NestedScrollView
android:id="#+id/app_scroll_view"
android:layout_width="match_parent"
android:layout_height="0dp" *** changed from match_parent to 0dp
android:layout_weight="1" *** added weight to fill remaining screen
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:fillViewport="true">
<FrameLayout
android:id="#+id/nav_host_container"
android:layout_width="match_parent"
android:layout_height="match_parent"/> *** changed from 0dp to match_parent
</androidx.core.widget.NestedScrollView>
The way it now is set up takes into account the NavBar and expands the layout of the NestedScrollView to fill the remaining empty space on the screen. Now the NestedScrollView will not expand beyond the NavBar.
Not sure . But seem like working in preview . Putting nestedScrollView and BottomNavigation view inside a relative layout .
<RelativeLayout android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.core.widget.NestedScrollView
android:id="#+id/app_scroll_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/bottom_nav"
android:fillViewport="true" android:layout_marginBottom="-2dp">
<FrameLayout
android:id="#+id/nav_host_container"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
</androidx.core.widget.NestedScrollView>
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottom_nav"
android:layout_alignParentBottom="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:menu="#menu/bottom_nav_menu"/>
</RelativeLayout>
How can I get the elevation for BottomAppBar. I think by default it has elevation as 8dp but I'm not getting any elevation.
Here's my code.
<?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">
<com.google.android.material.bottomappbar.BottomAppBar
android:id="#+id/bottom_bar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom"
style="#style/Widget.MaterialComponents.BottomAppBar" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_anchor="#id/bottom_bar"
android:src="#android:drawable/ic_input_add"
android:tint="#color/colorPrimary"/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Part of the problem is the way the lighting system works on Android. There is a light source from the top and a light source directly in the middle. This means shadows are generally not visible on top of Views.
We have a bug to fake the shadow for the BottomAppBar, but it's not as trivial as BottomNavigation for instance because the fab can move and change shape, so the shadow should change as well.
I want to hide my bottom bar on scroll but a FAB should stay on the screen.
If I put the FAB on top of BottomNavigationView using anchors but it appears behind it.
If I put layout_insetEdge="bottom" to the BottomNavigationView then it works but make my tests fail (https://issuetracker.google.com/issues/70162122) so I cannot use that at the moment.
Layout:
<?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/mainLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".screens.main.MainActivity">
<FrameLayout
android:id="#+id/mainContainer"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/scrolling_view_behaviour" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/mainNewQuestionButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/spacing_8dp"
app:layout_anchor="#+id/mainBottomNavigationView"
app:layout_anchorGravity="top|right|end"
app:srcCompat="#drawable/create_question"
tools:visibility="visible" />
<android.support.design.widget.BottomNavigationView
android:id="#+id/mainBottomNavigationView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:itemBackground="#color/my_gray"
app:itemIconTint="#drawable/selector_bottombar_item"
app:itemTextColor="#drawable/selector_bottombar_item"
app:layout_anchor="#id/mainContainer"
app:layout_anchorGravity="bottom"
app:layout_behavior="#string/hide_bottom_navigation_view_behaviour"
app:menu="#menu/bottom_navigation_main" />
</android.support.design.widget.CoordinatorLayout>
Just use:
<androidx.coordinatorlayout.widget.CoordinatorLayout>
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_gravity="bottom"
.../>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:layout_gravity="top"
app:layout_anchor="#id/bottom_navigation"
app:layout_anchorGravity="top|end"
/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
You seem to be having a Z-Ordering issue here.
You could try the fab.bringToFront() followed by fab.invalidate() for api's below 21, and ViewCompat.setZ(fab, someFloat) for api's above 21.
I used these methods to bring a custom FloatingActionMenu, consisting of a series of FAB's I wrote for a project, to the front so they would overlap everything on the screen.