icono - menu overflow android studio

Dos botones de acción flotantes uno al lado del otro

Question

La documentación de diseño del material tiene un ejemplo de Google Maps que muestra dos botones de acción flotante uno al lado del otro (en realidad, uno encima del otro).

¿Cómo se hace esto? Tengo dos FAB en un diseño de coordinador, pero terminan uno encima del otro, por lo que solo verá 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>

Answer 1

Aquí está mi solución, simplemente coloque un fab invisible entre las dos fábricas, y trabaje 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" />

Sin Snackbar

Con Snackbar

Answer 2

Dos botones de acción flotantes con espacio de 100 pd entre ellos son los siguientes:

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

Answer 3

Es una combinación de gravedad de disposición y gravedad de anclaje junto con jugar con los márgenes (del elemento anclado) que pueden hacer que funcione, eche un vistazo al xml debajo del cual he usado 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" />

Answer 4

Esta respuesta https://.com/a/33900363/401025 tiene un problema importante: no podemos establecer ningún margen entre los dos botones. Se mantienen unidos.

Parece que en el estado actual de la biblioteca de soporte de diseño v23.3.0 no podemos tener múltiples botones de acciones flotantes en un diseño de coordinador que se comporte 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 función se describe para que podamos esperarla en el futuro.

En cuanto a saber, descubrí una solución alternativa:

Cuando eche un vistazo a la aplicación de Google Maps para Android, notará que el primer botón de acción flotante (azul) está flotando con la hoja inferior, mientras que el segundo botón (mi ubicación) no. Por lo tanto, para el segundo botón, cree un diseño relativo de envoltura que abarque todo el diseño. Ponlo encima de tu diseño de hoja inferior:

<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 exactamente imitará los botones de acción flotante de Google Maps. Una desventaja de esta solución es que debe establecer el margen inferior del contenedor para colocar el botón sobre el primer botón. Puede hacer esto en el diseño o programáticamente:

((CoordinatorLayout.LayoutParams) wrapper.getLayoutParams()).setMargins(0, 0, 0, bottomMargin);

Answer 5

Esto funciona para mí: los FAB están incrustados en el diseño relativo:

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

Answer 6

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

Answer 7

Tres botones uno encima del otro:

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

Answer 8

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

Answer 9

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

esto es trabajo para mi el código de la llave es android: layout_margin = "65dp"