Bottom sheet with floating floating buttons

Question

I want to use the bottom sheet from the support library and two buttons with a floating action (FABS), as shown in the figures. The fact is that I also want both FABS to move along with the bottom sheet, as in Figures 1 and 2. What basic scheme should I use and how to make FABS sticky on the bottom sheet?

UPDATE

<LinearLayout 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" android:orientation="vertical" tools:context=".MainActivity"> <android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:theme="@style/AppTheme.AppBarOverlay"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" app:popupTheme="@style/AppTheme.PopupOverlay"/> </android.support.design.widget.AppBarLayout> <android.support.design.widget.CoordinatorLayout android:id="@+id/main_content" android:layout_width="match_parent" android:layout_height="match_parent"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent"> <!-- my context here --> </LinearLayout> <!-- bottomsheet --> <FrameLayout android:id="@+id/bottom_sheet" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#ff0000" app:behavior_hideable="true" app:layout_behavior="android.support.design.widget.BottomSheetBehavior"> <include layout="@layout/navigation_info" /> </FrameLayout> <!-- FABS --> <!-- wrap to primary fab to extend the height --> <LinearLayout android:id="@+id/primary_wrap" android:layout_width="wrap_content" android:layout_height="88dp" app:layout_anchor="@id/bottom_sheet" app:layout_anchorGravity="top|end"> <android.support.design.widget.FloatingActionButton android:id="@+id/primary" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="@dimen/fab_margin" android:src="@android:drawable/ic_delete"/> </LinearLayout> <!-- Pin secondary fab in the top of the extended primary --> <android.support.design.widget.FloatingActionButton android:id="@+id/secondary" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="top|end" android:layout_margin="16dp" android:src="@android:drawable/ic_dialog_email" app:layout_anchor="@+id/primary_wrap" app:layout_anchorGravity="top|end"/> </android.support.design.widget.CoordinatorLayout> 

Based on the answer of Ruan_Lopes .

With this layout, my FABS works as I want, but I still think that I am not doing this very clearly.

I wonder if this can be done in a more formal way.

Answer 1

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 the id of layout_anchor you are referencing the id of the bottom sheet

reference: medium

Hope it helps.

Answer 2

You can use a layout like 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" in the example for clarity, but app: layout_anchor is what is going to make your FAB stick on the bottom sheet, so you have to put the identifier of your bottom sheet as a parameter and you can follow the same principle as and the second FAB, using layout_anchor to insert it into the first FAB.

Answer 3

Have you tried adding app: layout_insetEdge = "bottom" to the view with BottomSheetBehaviour? Something like this: being FAB and brothers of the BottomSheetBehaviour View inside 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" />