Bottomsheet with moving Floating action buttons

Question

I want to use Bottom-sheet from support library and two floating action buttons (FABS) as shows the pictures. The point is that I also want both FABS moving together with the bottom-sheet like the picture 1 and 2. What is the basic layout that I have to use and how to make the FABS to be sticky on 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 Ruan_Lopes answer.

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

I am wondering if its possible to do this with more official way.

`think that I am not doing it very clear.` - SO is not discussion board - you asked your question and @Ruan_Lopes answered. According to your comments, this solves your problem and you got your FABs moving as you wanted, therefore you should accept his answer now and close the question. If you got another problem then you should ask another question. — Marcin Orlowski, May 15 '16 at 21:49
I am asking for moving fabs with a space between them. I have not a problem with the answer but it is half for me. — Thanassis, May 15 '16 at 22:04

score 18 · Answer 1 · answered Aug 09 '18 at 10:33

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"
    />

setting the layout_insetEdge on BottomSheet behaviour worked for me. All this time i was setting insetEdge on FAB — soan saini, Apr 08 '19 at 06:31

score 8 · Accepted Answer · edited Jul 04 '19 at 09:43

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.

Thanks for your answer, but currently I am not working in android projects and I cannot confirm your answer. — Thanassis, May 30 '19 at 14:08
As I see your code is about only one floating action button. My question is about two floating action buttons. — Thanassis, May 30 '19 at 14:11
Edited the answer, just simply add the empty textview for the the space between the buttons and layout_anchor is for the textview floating button id 1,then for the floating button 2 is the layout_anchor id is textview, and for all three of them app:layout_anchorGravity is the same top |bottom. This is the full answer would be good if you accept it :D — Petar Ceho, May 31 '19 at 09:14
Thanks buddy! 'app:layout_anchorGravity="top|end"' its help me! — iamkdblue, Nov 17 '19 at 07:20
When the bottom sheet takes up the entire screen only b1 disappears, b2 does not. How could you achieve the same effect for b2? — nullmn, Jan 15 '21 at 14:18

Ruan_Lopes · Answer 3 · 2016-05-13T19:04:18.743

7

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.

edited May 13 '16 at 19:04

answered May 13 '16 at 18:38

Ruan_Lopes

1,381
13
18

This approach is for one button – Thanassis May 13 '16 at 18:54
I am working on this right now. Your answer it is not a completely solution for me but it gives me some hints. – Thanassis May 14 '16 at 12:18
I am working on [this](https://lab.getbase.com/introduction-to-coordinator-layout-on-android/) right now to implement my solution – Thanassis May 14 '16 at 12:21
1

I gave you the basic layout to help you to solve your problem, read your question again. – Ruan_Lopes May 14 '16 at 15:50
Why is my answer not complete? Have you tried? You are attempting to create a custom behavior to do the same as the combination of app:layout_anchor and app:layout_anchorGravity does. – Ruan_Lopes May 14 '16 at 16:05
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/111937/discussion-between-thanassis-and-ruan-lopes). – Thanassis May 14 '16 at 16:26

Bottomsheet with moving Floating action buttons

3 Answers3