¿Cómo puedo agregar el nuevo “Botón de acción flotante” entre dos widgets / diseños?

Supongo que ya has visto las nuevas pautas de diseño de Android, con el nuevo “Botón de acción flotante”, también conocido como “FAB”.

Por ejemplo, este botón rosa:

enter image description here

Mi pregunta suena estúpida, y ya he probado muchas cosas, pero ¿cuál es la mejor manera de poner este botón en la intersección de dos diseños?

En el ejemplo anterior, este botón está perfectamente ubicado entre lo que podemos imaginar que es un ImageView y un relativo Layout.

Ya he probado muchos ajustes, pero estoy convencido de que hay una forma adecuada de hacerlo.

Mejores prácticas:

  • Agregue compile 'com.android.support:design:25.0.1' al archivo gradle
  • Use CoordinatorLayout como vista raíz.
  • Agregue layout_anchor al FAB y layout_anchor en la vista superior
  • Agregue layout_anchorGravity al FAB y layout_anchorGravity en: bottom|right|end

enter image description here

        

Parece que la forma más limpia en este ejemplo es:

  • Use un Relative Layout
  • Coloque las 2 vistas adyacentes una debajo de la otra
  • Alinee el FAB con el margen derecho / final y agregue un margen derecho / final
  • Alinee el FAB con la parte inferior de la vista del encabezado y agregue un margen negativo , la mitad del tamaño del FAB incluyendo la sombra

Ejemplo adaptado de la implementación de shamanland, use cualquier FAB que desee. Supongamos que FAB tiene 64dp de alto incluyendo shadow:

       

Ejemplo de diseño FAB

Puede importar el proyecto de muestra de Google en Android Studio haciendo clic en Archivo> Importar muestra …

Importación de muestra

Esta muestra contiene una vista FloatingActionButton que hereda de FrameLayout.

Editar Con la nueva biblioteca de diseño de soporte puede implementarla como en este ejemplo: https://github.com/chrisbanes/cheesesquare

Con AppCompat 22, el FAB es compatible con dispositivos más antiguos.

Agregue la nueva biblioteca de soporte en su build.gradle (aplicación):

 compile 'com.android.support:design:22.2.0' 

Entonces puedes usarlo en tu xml:

  

Para usar las propiedades elevation y pressedTranslationZ , se necesita la app espacio de nombres, así que agrega este espacio de nombres a tu diseño: xmlns:app="http://schemas.android.com/apk/res-auto"

Ahora es parte de la Biblioteca oficial de soporte de diseño.

En tu gradle:

 compile 'com.android.support:design:22.2.0' 

http://developer.android.com/reference/android/support/design/widget/FloatingActionButton.html

Pruebe esta biblioteca ( javadoc está aquí ), el nivel mínimo de API es 7:

 dependencies { compile 'com.shamanland:fab:0.0.8' } 

Proporciona un único widget con la capacidad de personalizarlo a través de Theme, xml o java-code.

ligeroEntre

Es muy simple de usar. Hay implementación normal y mini disponible según el patrón de acciones promocionadas .

  

Intenta comstackr la aplicación de demostración . Hay un ejemplo exhaustivo: temas claros y oscuros, que se usan con ListView , alinean dos vistas .

Aquí hay una biblioteca de botón de acción flotante gratuita adicional para Android . Tiene muchas personalizaciones y requiere SDK versión 9 y superior

enter image description here

Video de demostración completo

 dependencies { compile 'com.scalified:fab:1.1.2' } 

Mantenlo simple Añadiendo el botón de acción flotante usando TextView dando un fondo redondeado xml. – Agregar comstackción com.android.support:design:23.1.1 al archivo gradle

  • Use CoordinatorLayout como vista raíz.
  • Antes de finalizar el CoordinatorLayout, introduzca un textView.
  • Dentro de Drawable dibuja un círculo.

Circle Xml es

      

Layout xml es

                             

Haga clic aquí para ver cómo se verá

Agregue esto a su archivo gradle

 dependencies { compile fileTree(dir: 'libs', include: ['*.jar']) compile 'com.android.support:appcompat-v7:23.0.0' compile 'com.android.support:design:23.0.1' } 

Esto a tu activity_main.xml

        

Puede encontrar el ejemplo completo con el proyecto de estudio de Android para descargar en http://www.ahotbrew.com/android-floating-action-button/

aquí está el código de trabajo.

Yo uso appBarLayout para anclar mi floatingActionButton. Espero que esto pueda ser útil.

CÓDIGO XML

                                       

Ahora si pegas el código arriba. Verás el siguiente resultado en tu dispositivo. Imagen de resultado