El material de documentación de diseño tiene un ejemplo de los Mapas de Google que muestra a dos flotante botones de acción, uno junto a otro (en realidad, una encima de la otra).

Dos flotante botones de acción junto a la otra

Cómo se hace esto? Tengo dos FAB en un coordinador de diseño, pero terminan en la parte superior de uno al otro, de modo que sólo se vea un botón.

<?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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- Use ThemeOverlay to make the toolbar and tablayout text
white -->
<android.support.design.widget.AppBarLayout
android:id="@+id/abl_top"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
</android.support.design.widget.AppBarLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:id="@+id/img_photo"
android:layout_width="match_parent"
android:layout_height="256dp"
android:background="#C5C5C5"/>
<EditText
android:id="@+id/text_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/img_baby"
android:layout_alignParentStart="true"
android:layout_alignParentLeft="true"
android:hint="Name"
android:drawableLeft="@drawable/ic_account"
android:drawablePadding="20dp"
android:textAppearance="?android:attr/textAppearanceSmall" />
<TextView
android:id="@+id/text_dob"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/text_name"
android:layout_alignParentStart="true"
android:layout_alignParentLeft="true"
android:hint="Date of birth"
android:drawableLeft="@drawable/ic_cake"
android:drawablePadding="20dp"
style="@android:style/Widget.Holo.Spinner"/>
</LinearLayout>
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab_camera"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:src="@drawable/ic_camera"
android:clickable="true"
app:fabSize="mini"
app:layout_anchor="@id/img_photo"
app:layout_anchorGravity="bottom|right|end"/>
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab_gallery"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:src="@drawable/ic_image"
android:clickable="true"
app:fabSize="mini"
app:layout_anchor="@id/img_photo"
app:layout_anchorGravity="bottom|right|end"/>
</android.support.design.widget.CoordinatorLayout>
  • Se puede dar el código que ya tengo? Que hace que sea más fácil para nosotros para ayudarle.
  • publicar el código que he probado
  • Yo no he jugado con CoordinatorLayout, pero ¿hay alguna razón por la que no envuelva sus dos Fábricas en un LinearLayout, la forma en que lo envolvió las otras cosas en su propio LinearLayout?
  • La primera vez que traté de que yo no podía ver la FAB en todo. Desde entonces, he descubierto la elevación de los bienes y la aplicación que para el diseño se parece al trabajo. Estoy mezclando eso con PageNotFound la respuesta para obtener el derecho de la brecha entre los botones. Gracias.
InformationsquelleAutor Jon | 2015-07-03

11 Comentarios

  1. 70

    Es una combinación de diseño de la gravedad y el anclaje de la gravedad, junto con jugar con los márgenes (de la anclado a elemento) que puede hacer el trabajo, tener una mirada en el xml por debajo de la cual he utilizado con éxito:

    <android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    android:layout_margin="@dimen/fab_margin"
    android:src="@android:drawable/ic_dialog_info" />
    <android.support.design.widget.FloatingActionButton
    android:id="@+id/fab2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="top|end"
    android:layout_marginBottom="0dp"
    android:layout_marginEnd="0dp"
    android:layout_marginLeft="0dp"
    android:layout_marginRight="0dp"
    android:layout_marginStart="0dp"
    android:layout_marginTop="0dp"
    android:src="@android:drawable/ic_media_play"
    app:layout_anchor="@id/fab"
    app:layout_anchorGravity="top" />

    • Yo no soy capaz de conseguir cualquier espacio entre los dos botones. Están pegadas
    • pruebe a establecer el margen inferior – por ejemplo, android:layout_marginBottom="85dp"
    • android:layout_marginBottom="85dp" no funciona.
    • Impresionante! Gracias
  2. 19

    Intentar usar esta app:useCompatPadding="true"

    <android.support.design.widget.FloatingActionButton
    android:id="@+id/fabBottom"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:tint="@android:color/white"
    android:src="@mipmap/ic_search"
    app:fabSize="normal"
    android:scaleType="center"
    app:layout_anchor="@+id/bottomSheet"
    app:layout_anchorGravity="top|end"
    app:useCompatPadding="true"/>
    <android.support.design.widget.FloatingActionButton
    android:id="@+id/fabTop"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:tint="@color/accent"
    android:src="@mipmap/ic_location_on"
    app:backgroundTint="@android:color/white"
    app:fabSize="normal"
    android:scaleType="center"
    android:layout_gravity="top|end"
    app:layout_anchor="@+id/fabSearch"
    app:layout_anchorGravity="top|end"
    android:layout_margin="12dp"/>
    • Esta debe ser la respuesta correcta, funciona perfectamente, incluso sin Relación diseños y con animaciones. Gracias Juan
    • Su bienvenida @SebastianCorradi
    • ¿Cuáles son bottomSheet y fabSearch aquí?
    • el post solo habla de dos botones de fab
    • Trabajó para mí. Porque yo estaba usando un DrawerLayout en mi actividad principal, tuve que poner el CoordinatorLayout como un niño de la DrawerLayout. Los botones flotantes serían los niños de la CoordinatorLayout.
  3. 8

    Aquí está mi solución, sólo hay que poner un invisible fab entre las dos fábricas, y funciona bien con CoordinatorLayout.

    <android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    android:layout_margin="@dimen/fab_margin"
    android:src="@drawable/ic_check" />
    <android.support.design.widget.FloatingActionButton
    android:id="@+id/fab_invisible"
    android:layout_width="@dimen/fab_margin"
    android:layout_height="@dimen/fab_margin"
    android:layout_gravity="top|end"
    android:layout_margin="@dimen/fab_margin"
    android:visibility="invisible"
    app:layout_anchor="@id/fab"
    app:layout_anchorGravity="top" />
    <android.support.design.widget.FloatingActionButton
    android:id="@+id/fab_follow"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="top|end"
    android:layout_margin="@dimen/fab_margin"
    android:src="@drawable/ic_gps_fixed_follow"
    app:backgroundTint="@android:color/white"
    app:layout_anchor="@id/fab_invisible"
    app:layout_anchorGravity="top" />

    No Chiringuito

    Con Chiringuito

    • Extraño solución, pero a mí me funcionó `_(ツ)_/
    • Funciona para mí también.. la Adición de los márgenes y todo no funciona cuando la configuración de anclaje..
    • A mi me funciona así. Yo uso un <Espacio> ver para separar la fab y por lo tanto ya no es un extraño solución desde mi punto de vista. Debe ser aceptado respuesta, ya que esto facilita el uso adecuado del concepto de anclaje sin engañar a la distribución mediante márgenes.
    • No funciona en el dispositivo de cambio de orientación (la segunda fab se desvanece)
  4. 6

    Esto funciona para mí – Fab están incrustados en Relación maquetación:

    <?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:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="com.github.openeet.openeet.SaleDetailActivity">
    <android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingTop="@dimen/appbar_padding_top"
    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:layout_scrollFlags="scroll|enterAlways"
    app:popupTheme="@style/AppTheme.PopupOverlay">
    </android.support.v7.widget.Toolbar>
    <android.support.design.widget.TabLayout
    android:id="@+id/tabs"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />
    </android.support.design.widget.AppBarLayout>
    <android.support.v4.view.ViewPager
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />
    <RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_margin="@dimen/fab_margin"
    android:layout_gravity="end|bottom" >
    <android.support.design.widget.FloatingActionButton
    android:id="@+id/fab_share"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="end|bottom"
    android:src="@android:drawable/ic_menu_share"
    android:layout_alignParentBottom="true"
    android:layout_alignLeft="@+id/fab_print"
    android:layout_alignStart="@+id/fab_print" />
    <android.support.design.widget.FloatingActionButton
    android:id="@+id/fab_print"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="end|bottom"
    android:src="@android:drawable/ic_media_next"
    android:layout_above="@+id/fab_share"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"
    android:layout_marginBottom="46dp" />
    </RelativeLayout>
    </android.support.design.widget.CoordinatorLayout>
    • Esta solución funciona (es decir, la separación se conserva), incluso cuando la ventana cambia de tamaño debido a la apertura del panel de entrada. El espacio se pierde con otras soluciones.
  5. 5
    <android.support.design.widget.FloatingActionButton
    android:id="@+id/fab_scrolling"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="@dimen/big_activity_fab_margin"
    android:src="@drawable/ic_share_white_24dp"
    app:layout_anchor="@id/app_bar_scrolling"
    app:layout_anchorGravity="bottom|end" />
    <android.support.design.widget.FloatingActionButton
    android:id="@+id/fab_scrolling2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="65dp"
    android:src="@drawable/ic_share_white_24dp"
    app:layout_anchor="@id/app_bar_scrolling"
    app:layout_anchorGravity="bottom|end" />

    este es un trabajo para mí. el código de la llave es android:layout_margin=»65dp»

  6. 4

    No puedo creer que nadie ha publicado la respuesta correcta.

    Envoltura de los botones en un ViewGroup y aplicar la dodgeInsetEdges diseño
    parámetro de modo que los botones mover hacia arriba con la parte inferior de la hoja. Para la utilización en
    caso, podemos utilizar un LinearLayout con el atributo XML
    app:layout_dodgeInsetEdges="bottom".

    Tenga en cuenta que podemos aplicar esto a cualquier ver en un CoordinatorLayout.

    <android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto" ... >
    <!-- We can use any ViewGroup here. LinearLayout is the
    obvious choice for the questioner's use case. -->
    <LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    android:layout_margin="@dimen/fab_margin"
    android:orientation="vertical"
    app:layout_dodgeInsetEdges="bottom">
    <android.support.design.widget.FloatingActionButton
    android:id="@+id/upperFab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="@dimen/fab_margin"
    android:src="@drawable/upper_fab_icon" />
    <android.support.design.widget.FloatingActionButton
    android:id="@+id/lowerFab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/lower_fab_icon" />
    </LinearLayout>
    </android.support.design.widget.CoordinatorLayout>
    • Funcionó parcialmente. Y cuando he insertado las dos líneas para encapsular esquema lineal funcionó a la perfección. android:layout_alignParentEnd="true" android:layout_alignParentBottom="true"
  7. 2

    Esta respuesta https://stackoverflow.com/a/33900363/401025 tiene un gran problema: no somos capaces de establecer los márgenes entre los dos botones. Peguen.

    Parece que en el estado actual de la asistencia para el diseño de la biblioteca de la v23.3.0 no somos capaces de tener varios float acciones de los botones de un coordinador de diseño que se comportan correctamente. Sin embargo, en la especificación https://www.google.com/design/spec/components/buttons-floating-action-button.html#buttons-floating-action-button-transitions esta característica se describe así que podemos esperar en el futuro.

    Como para saber que he descubierto una solución:

    Cuando usted tiene un vistazo a la aplicación google maps para android, usted notará que la primera (azul) float botón de acción es flotante, con la parte inferior de la hoja, mientras que la segunda (mi ubicación) botón no está. Así que para el segundo botón crear una envoltura relativa diseño que abarca toda la distribución. Poner por encima de su parte inferior de la hoja de diseño:

    <RelativeLayout
    android:id="@+id/wrapper"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <android.support.design.widget.FloatingActionButton
    android:id="@+id/secondButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="15dp"
    android:layout_alignParentBottom="true"
    android:layout_alignParentRight="true"
    android:layout_alignParentEnd="true"/>
    </RelativeLayout>
    <android.support.design.widget.FloatingActionButton
    android:id="@+id/firstButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="15dp"
    app:layout_anchor="@id/bottomSheet"
    app:layout_anchorGravity="top|right|end"/>

    Esto va a imitar exactamente el flotador de acción los botones de google maps. Un inconveniente de esta solución es que usted tiene que fijar el margen inferior de la envoltura a la posición en el botón de arriba el primer botón. Usted puede hacer esto ya sea en el diseño o programación:

    ((CoordinatorLayout.LayoutParams) wrapper.getLayoutParams()).setMargins(0, 0, 0, bottomMargin);
  8. 1
        <android.support.design.widget.FloatingActionButton
    android:id="@+id/fab_camera"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_camera"
    android:layout_gravity="bottom|right"
    android:layout_margin="16dp"
    app:fabSize="normal" />
    <android.support.design.widget.FloatingActionButton
    android:id="@+id/fab_image"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_image"
    app:useCompatPadding="true"
    app:layout_anchor="@id/fab_camera"
    app:layout_anchorGravity="top|center"
    android:layout_gravity="top|center"
    app:fabSize="normal" />
  9. 0

    Dos flotante botones de acción con 100dp espacio entre ellos es la siguiente:

    <android.support.design.widget.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_alignParentEnd="true"
    android:layout_alignParentRight="true"
    android:layout_gravity="top|end"
    android:layout_marginBottom="100dp"
    android:src="@android:drawable/ic_input_add"
    app:layout_anchor="@id/fab"
    app:layout_anchorGravity="top" />
    <android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    android:layout_margin="@dimen/fab_margin"
    android:src="@android:drawable/ic_delete />
  10. 0

    Tres botones uno por encima de los demás:

    <android.support.design.widget.FloatingActionButton
    android:id="@+id/fab_zoom_out"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="end|bottom"
    android:layout_margin="@dimen/fab_margin"
    app:srcCompat="@drawable/ic_fab_zoom_out"
    app:elevation="0dp"
    app:useCompatPadding="true"
    />
    <android.support.design.widget.FloatingActionButton
    android:id="@+id/fab_zoom_in"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="end|top"
    app:srcCompat="@drawable/ic_fab_zoom_in"
    app:elevation="0dp"
    app:useCompatPadding="true"
    app:layout_anchor="@id/fab_zoom_out"
    app:layout_anchorGravity="start"
    />
    <android.support.design.widget.FloatingActionButton
    android:id="@+id/fab_reset_orientation"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="end|top"
    android:visibility="gone"
    app:srcCompat="@drawable/ic_fab_reset_orientation"
    app:elevation="0dp"
    app:useCompatPadding="true"
    app:layout_anchor="@id/fab_zoom_in"
    app:layout_anchorGravity="start"
    />
  11. 0

    La aceptación de la respuesta (en el momento de escribir esto) – https://stackoverflow.com/a/33900363/4414887 trabajado sólo parcialmente, ya que los botones se peguen entre sí.

    Yo era incapaz de usar cualquier otro facilitado respuestas. Así que he encontrado una solución.

    Agregar una vista en entre el 2 Fab como así

    <com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/fab2"
    android:src="@drawable/ic_delete_white_24dp"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="top|end"
    app:layout_anchor="@id/view"/>
    <View
    android:id="@+id/view"
    android:layout_width="10dp"
    android:layout_height="10dp"
    android:layout_gravity="top|end"
    app:layout_anchor="@id/fab"
    />
    <com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/fab"
    android:src="@drawable/ic_done_white_24dp"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:backgroundTint="@color/colorPrimary"
    app:layout_anchor="@id/bar2" />

Dejar respuesta

Please enter your comment!
Please enter your name here