Bottomsheet with moving Floating action buttons

This code worked for me

<?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"
    tools:context="com.androidsample.BottomSheetActivity">

    <!-- include app bar -->
    <include layout="@layout/app_bar" />

    <!-- include main content -->
    <include layout="@layout/activity_bottom_sheet_content" />

    <!-- include bottom sheet -->
    <include layout="@layout/bottom_sheet" />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/b2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/activity_vertical_margin"
        android:src="@drawable/ic_share_black_24dp"
        app:backgroundTint="#3F51B5"
        app:layout_anchor="@+id/text"
        app:layout_anchorGravity="top|end" />

    <TextView
        android:id="@+id/text"
        android:layout_width="50dp"
        android:layout_height="70dp"
        app:layout_anchor="@+id/b1"
        app:layout_anchorGravity="top|end" />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/b1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/activity_vertical_margin"
        android:src="@drawable/ic_share_black_24dp"
        app:backgroundTint="#3F51B5"
        app:layout_anchor="@+id/bottom_sheet_mapviewfinal"
        app:layout_anchorGravity="top|end" />

</android.support.design.widget.CoordinatorLayout>

with layout_anchor id you are referring to the id of the bottom_sheet.

reference: Medium Reference

Hope it helps.


You could use a layout similar to this:

<?xml version="1.0" encoding="utf-8"?>  
<android.support.design.widget.CoordinatorLayout> 

    <android.support.design.widget.AppBarLayout>
          <!-- Your code -->
    </android.support.design.widget.AppBarLayout>

    <!-- Your content -->
    <include layout="@layout/content_main" />

    <!-- Bottom Sheet -->
    <include layout="@layout/bottom_sheets_main"/>

    <!-- First FAB -->
    <android.support.design.widget.FloatingActionButton 
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" 
        app:layout_anchor="@id/bottomSheet"
        app:layout_anchorGravity="bottom|end"/>  

    <!-- Second FAB -->
    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="top|end"
        app:layout_anchor="@id/fab"
        app:layout_anchorGravity="top" />

</android.support.design.widget.CoordinatorLayout>

I used "include" on the example for the sake of clarity but app:layout_anchor is what is going to make your FAB "stick" on the bottom-sheet, so you should put the id of your bottom Sheet as parameter there and you could follow the same principle for you second FAB using the layout_anchor to stick it on the first FAB.


Have you tried to add app:layout_insetEdge="bottom" to the view with the BottomSheetBehaviour? Something like this, being FAB and the BottomSheetBehaviour View siblings inside a ConstraintLayout works for me:

<android.support.design.widget.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="end|bottom"
    android:layout_margin="16dp"
    app:backgroundTint="@color/white"
    app:fabSize="normal"
    app:layout_dodgeInsetEdges="bottom"
    app:srcCompat="@drawable/icon"
    />

<View
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:layout_insetEdge="bottom"
    app:layout_behavior="android.support.design.widget.BottomSheetBehavior"
    />