Develop Reference

CoordinatorLayout and align button relative to BottomSheet

I want to create Button which will move together with BottomSheet. It should be positioned above BottomSheet parent. So I used CoordinatorLayout to achieve this. But if I anchor this Button above BottomSheet layout, its bottom half is cut off (I want to position it above BottomSheet layout like in RelativeLayout). Also if BottomSheet is hidden, its overlapping TabBar. Also Button is for some reason not following BottomSheet. I thought CoordinatorLayout would solve this issue. I dont wanna hand animate Button movement based on BottomSheet peek.
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:id="#+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipChildren="false"
android:clipToPadding="false"
android:orientation="vertical"
tools:ignore="UselessParent">
<ImageButton
android:id="#+id/but_location"
android:layout_width="#dimen/button_height"
android:layout_height="#dimen/button_height"
android:layout_margin="#dimen/padding_medium"
app:layout_anchor="#id/bottomSheetContainer"
app:layout_anchorGravity="end|top"
android:src="#drawable/ic_location_icon"
style="#style/button.shadow" />
<RelativeLayout
android:id="#+id/bottomLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<include
android:id="#+id/bottomSheetContainer"
layout="#layout/bottom_sheet_container"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_above="#id/tabBar" />
<include
android:id="#+id/tabBar"
layout="#layout/tab_bar_layout"
android:layout_alignParentBottom="true"
android:layout_width="match_parent"
android:layout_height="66dp" />
</RelativeLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
UI:

How to anchor FAB to BottomSheet with margins?

I have an issue in my APP, I have a BottomSheet and I was adding a FAB, the FAB should be always at the top of the BottomSheet so I have added a bottom margin to the FAB, the issue is that once the BottomSheet is expanded the FAB goes anchored to bottomsheet without the initial bottom margin.
How could I achieve the FAB to be always at the top?
Here is my code:
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/listView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="2dp"
android:padding="2dp"
android:scrollbars="vertical"
tools:listitem="#layout/recyclerview_pterm" />
<include
layout="#layout/bottom_sheet_pterm" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/floatingActionButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginBottom="76dp"
android:clickable="true"
android:focusable="true"
app:layout_anchor="#+id/bottomSheet"
app:layout_anchorGravity="top|end"
app:srcCompat="#drawable/ic_covid"
android:contentDescription="#string/verifica_gp" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
And here is how it looks like:

You can solve that by adding these two attributes to the FAB:
<com.google.android.material.floatingactionbutton.FloatingActionButton
....
app:useCompatPadding="true"
android:layout_gravity="top" />
The android:layout_gravity="top" makes the FAB to be on top of the anchor (i.e. not intersected with it), and app:useCompatPadding="true" Allows the padding between the FAB & The anchor (i.e. bottomSheet).
Sample:

How to prevent FAB overlaying BottomSheet when Expanded?

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"

why do I need -1 margin to stick button to corner in CoordinatorLayout

I have a coordinator layout with a bunch of stuff, and two buttons in the bottom corners. The buttons seem to be floating 1 pixel inside the corner, both horizontally and vertically. The only way to set them to the actual corner, is to actually set layout_marginBottom and layout_marginStart/layout_marginEnd on them to -1
No padding or margin is set anywhere.
<androidx.coordinatorlayout.widget.CoordinatorLayout 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">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.MaterialComponents.ActionBar">
<com.google.android.material.appbar.MaterialToolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
tools:menu="#menu/map_actions"
app:popupTheme="#style/ThemeOverlay.MaterialComponents.Light" />
</com.google.android.material.appbar.AppBarLayout>
<!-- not the one that causes problems, just included for completeness-->
<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center_horizontal"
android:text="#string/action_record"
android:layout_marginBottom="10dp"
style="#style/Widget.Myapp.MaterialComponents.RecordButton"
app:icon="#drawable/ic_action_record_24dp"
android:visibility="gone"
tools:visibility="visible">
</com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:layout_width="wrap_content"
app:shapeAppearanceOverlay="#style/ShapeAppearanceOverlay.MyApp.BottomStartCorner"
app:fabSize="mini"
app:tint="?attr/colorOnSecondary"
android:layout_height="wrap_content"
android:layout_gravity="bottom|start"
android:src="#drawable/ic_people_24dp"
/>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/actn_open_chat"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:src="#drawable/ic_chat_24dp"
app:fabSize="mini"
app:shapeAppearanceOverlay="#style/ShapeAppearanceOverlay.MyApp.BottomEndCorner"
app:tint="?attr/colorOnSecondary" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>

That's because the fab have default padding defined in its style.
You can check its source code here : material-components-android
You can override the style of fab in the styles.xml
This will help you : material.io

How to prevent BottomAppBar from overlapping content

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>