icono - personalizar toolbar android studio

Dos botones flotantes en un diseño.

Question

Estoy creando una aplicación sencilla con el uso de diseño de materiales. Y quiero tener dos botones flotantes en un diseño.

Y quiero hacer que se muevan juntos cuando se muestra un snack bar. Pero no puedo hacer esto mal, de la manera correcta, porque layout_margin no funciona. Estas son la captura de pantalla de la aplicación y el marcado. ¿Usted me podría ayudar?

                  <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

Con el código de respuesta correcto no funcionará en Android por debajo de 5.0, ya que la FAB superior cambiará. Sobre todo, en su código de muchos atributos adicionales, escribiré la respuesta a continuación, en función de la suya, que funcionará correctamente en todos los dispositivos y será más fácil de entender.

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

En la biblioteca de soporte, versión 24.2.0, el CoordinatorLayout tiene un nuevo atributo layout_dodgeInsetEdges que puedes agregar a LinearLayout (o cualquier otra vista, que contiene) tus dos FAB, ¡y Snackbar moverá esa vista completa del camino!

Así por ejemplo:

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

Intenté algunos ajustes con su código para que funcionara y en el proceso he adquirido cierta comprensión sobre el funcionamiento de los anclajes.

Lo primero que hay que notar es que el CoordinatorLayout alinea sus vistas secundarias en función de los bordes de la vista. Así que agregar margen entre elementos no ayudaría en absoluto en movimiento. Se verá bien en el diseño, pero ceder en movimiento.

Por lo tanto, agregar una vista ficticia ayuda a anclar correctamente sin problemas. Además, necesitas configurar apropiadamente el layout_gravities.

Simplemente reemplace el código de los 2 FAB en su diseño con este fragmento de código:

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

¡Espero que esto ayude! Por favor acepte esta respuesta si funciona. :)

Answer 4

La solución marcada como correcta es una modificación hecha, que se emitirá para diferentes dispositivos con diferentes ppp de pantalla, por lo que la solución correcta será https://.com/a/33900363/5740236

Answer 5

No me gustó agregar una vista solo para agregar el relleno, en lugar de eso envolví el Fab en 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>