Due pulsanti fluttuanti nello stesso layout

Question

Sto creando una semplice app con l'utilizzo del material design. E voglio ottenere due pulsanti mobili su un unico layout.

e voglio farli in movimento assieme quando uno snack bar è stato mostrato. Ma non posso farlo nel modo sbagliato nel modo giusto, perché layout_margin non funziona. Questi sono lo screenshot dell'app e il markup. Potresti aiutarmi?

    <android.support.design.widget.AppBarLayout 
        android:id="@+id/addProductsAppBar" 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" 
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> 

        <android.support.design.widget.TabLayout 
         android:id="@+id/addProductsTabs" 
         android:layout_width="match_parent" 
         android:layout_height="wrap_content" /> 

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

        <android.support.v4.view.ViewPager 
        android:id="@+id/addProductsViewpager" 
        android:layout_width="match_parent" 
        android:layout_height="match_parent" 
        app:layout_behavior="@string/appbar_scrolling_view_behavior" /> 

        <android.support.design.widget.FloatingActionButton 
        android:id="@+id/addProductFab" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:layout_gravity="end|bottom" 
        android:layout_margin="16dp" 
        android:src="@drawable/ic_add_white_36dp" /> 

        <android.support.design.widget.FloatingActionButton 
        android:id="@+id/searchFab" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        app:layout_anchor="@id/addProductFab" 
        app:layout_anchorGravity="top|right|end" 
        android:layout_marginBottom="80dp" 
        android:layout_marginRight="16dp" 
        android:src="@drawable/ic_search_white_36dp"/> 

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

Answer 1

ho provato alcune modifiche con il codice per farlo funzionare e nel processo ho acquisito una certa comprensione del funzionamento degli ancoraggi.

La prima cosa da notare è che CoordinatorLayout allinea le sue viste secondarie in base ai bordi della vista. Quindi aggiungere margine tra gli elementi non aiuterebbe affatto a muoversi. Apparirà benissimo nel layout, ma si arrenderà.

Quindi aggiungere una vista fittizia aiuta nell'ancoraggio correttamente senza problemi. Inoltre, è necessario impostare appropriatamente il layout_gravities.

Basta sostituire il codice per le 2 FAB nel layout con questo frammento:

<android.support.design.widget.FloatingActionButton 
    android:id="@+id/addProductFab" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_gravity="end|bottom" 
    android:layout_margin="16dp" 
    android:src="@drawable/ic_add_white_36dp" /> 

<View 
    android:id="@+id/dummy" 
    android:layout_width="1dp" 
    android:layout_height="16dp" 
    app:layout_anchor="@id/addProductFab" 
    app:layout_anchorGravity="top|right|end" /> 

<android.support.design.widget.FloatingActionButton 
    android:id="@+id/searchFab" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_gravity="end|top" 
    android:layout_margin="16dp" 
    android:src="@drawable/ic_search_white_36dp" 
    app:layout_anchor="@id/dummy" 
    app:layout_anchorGravity="top|right|end" /> 

Spero che questo aiuti! Si prega di accettare questa risposta se funziona. :)

Answer 2

Con il codice di risposta corretto non funzionerà su Android inferiore a 5.0, poiché il FAB superiore si sposterà. Soprattutto, nel tuo codice un sacco di attributi extra, scriverò la risposta di seguito, basata sul tuo, che funzionerà correttamente su tutti i dispositivi, e sarà più facile da capire.

<android.support.design.widget.CoordinatorLayout 
xmlns:android="http://schemas.android.com/apk/res/android" 
xmlns:app="http://schemas.android.com/apk/res-auto" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:padding="10dp" 
android:background="#e2022068"> 

<android.support.design.widget.FloatingActionButton 
    android:id="@+id/fab_down" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_gravity="end|bottom" 
    android:src="@android:drawable/arrow_down_float" /> 

<ImageView 
    android:id="@+id/divider" 
    android:layout_width="1dp" 
    android:layout_height="40dp" 
    app:layout_anchor="@id/fab_down" 
    app:layout_anchorGravity="end" /> 

<android.support.design.widget.FloatingActionButton 
    android:id="@+id/fab_up" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_gravity="end" 
    android:src="@android:drawable/arrow_up_float" 
    app:layout_anchor="@id/divider" 
    app:layout_anchorGravity="right|end" /> 

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

Answer 3

non mi piaceva l'aggiunta di una vista solo per aggiungere l'imbottitura, invece di che ho avvolto i Fab in un FrameLayout:

<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" 
    android:fitsSystemWindows="true"> 
    <android.support.design.widget.FloatingActionButton 
     android:id="@+id/fab_directions" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_marginEnd="@dimen/fab_margin" 
     android:src="@android:drawable/ic_menu_directions" 
     android:visibility="gone"/> 

    <!-- We need the frame layout to set the margin between FABs--> 
    <FrameLayout 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_gravity="top|end" 
     app:layout_anchor="@id/fab_directions" 
     app:layout_anchorGravity="top|end"> 

     <android.support.design.widget.FloatingActionButton 
      android:id="@+id/fab_search" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_marginBottom="@dimen/fab_margin" 
      android:layout_marginEnd="@dimen/fab_margin" 
      android:src="@android:drawable/ic_menu_search" 
      app:elevation="@dimen/fab_elevation"/> 
    </FrameLayout> 

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

Answer 4

A sostegno biblioteca versione 24.2.0, il CoordinatorLayout ha un nuovo attributo layout_dodgeInsetEdges che puoi aggiungere al LinearLayout (o qualsiasi altra vista, per quella materia) contenente i tuoi due FAB, e lo Snackbar sposterà l'intera vista fuori strada!

Così, ad esempio:

<android.support.design.widget.CoordinatorLayout 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:clipChildren="false" 
     android:fitsSystemWindows="true" 
     tools:context=".Activities.MainActivity"> 

    <LinearLayout 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:orientation="vertical" 
      android:layout_gravity="bottom|right" 
      android:layout_marginRight="@dimen/fab_margin" 
      android:layout_marginBottom="@dimen/fab_margin" 
      app:layout_dodgeInsetEdges="bottom"> //THIS IS THE LINE THAT MATTERS 

     <android.support.design.widget.FloatingActionButton 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_marginTop="@dimen/fab_margin" 
       android:src="@drawable/icon" 
       android:tint="@color/colorTextAndIcons" 
       app:backgroundTint="@color/colorPrimary"/> 

     <android.support.design.widget.FloatingActionButton 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_marginTop="@dimen/fab_margin" 
       android:src="@drawable/icon" 
       android:tint="@color/colorTextAndIcons" 
       app:backgroundTint="@color/colorPrimary"/> 
    </LinearLayout> 
</android.support.design.widget.CoordinatorLayout> 

Answer 5

la soluzione contrassegnato come giusta è un tweak realizzato, che sarà problema per diversi dispositivi con differenti dpi schermo, quindi la soluzione giusta sarà https://stackoverflow.com/a/33900363/5740236