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).
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 unLinearLayout
, la forma en que lo envolvió las otras cosas en su propioLinearLayout
? - 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.
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:layout_marginBottom="85dp"
android:layout_marginBottom="85dp"
no funciona.Intentar usar esta
app:useCompatPadding="true"
bottomSheet
yfabSearch
aquí?Aquí está mi solución, sólo hay que poner un invisible fab entre las dos fábricas, y funciona bien con CoordinatorLayout.
No Chiringuito
Con Chiringuito
Esto funciona para mí – Fab están incrustados en Relación maquetación:
este es un trabajo para mí. el código de la llave es android:layout_margin=»65dp»
No puedo creer que nadie ha publicado la respuesta correcta.
Envoltura de los botones en un
ViewGroup
y aplicar ladodgeInsetEdges
diseñopará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 XMLapp:layout_dodgeInsetEdges="bottom"
.Tenga en cuenta que podemos aplicar esto a cualquier ver en un
CoordinatorLayout
.android:layout_alignParentEnd="true" android:layout_alignParentBottom="true"
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:
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:
Dos flotante botones de acción con 100dp espacio entre ellos es la siguiente:
Tres botones uno por encima de los demás:
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í