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