Foglio di partenza con movimento Pulsanti di azione mobile

Question

Desidero utilizzare Bottom-sheet dalla libreria di supporto e due pulsanti di azione mobile (FABS) come illustrato nelle immagini. Il punto è che voglio anche che entrambe le FAB si muovano insieme al foglio di fondo come le immagini 1 e 2. Qual è il layout di base che devo usare e come rendere i FABS appiccicosi sul fondo?

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> 

Sulla base Ruan_Lopes risposta.

Con questo layout i FAB funzionano come voglio ma continuo a pensare che non lo sto facendo molto chiaramente.

Mi chiedo se è possibile farlo in modo più ufficiale.

Answer 1

È possibile utilizzare un layout simile a questo:

<?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> 

ho usato "include" sull'esempio per motivi di chiarezza, ma app: layout_anchor è ciò che sta per rendere il vostro "bastone" FAB sulla bottom-sheet, quindi dovresti inserire l'id del tuo bottom sheet come parametro lì e potresti seguire lo stesso principio per il secondo FAB usando il layout_anchor per attaccarlo sul primo FAB.