Ejemplo de FloatingActionButton con Biblioteca de soporte

Recientemente, leí estas publicaciones:

Biblioteca de soporte de diseño de Android

Biblioteca de soporte de Android, revisión 22.2.0

FloatingActionButton

Pero ninguno de ellos me da un ejemplo detallado sobre cómo crear un nuevo FloatingActionButton . Tan difícil de entender, hago esta pregunta.

¿Alguien puede darme un ejemplo al respecto?

Cualquier ayuda será apreciada. Gracias por adelantado.

EDITAR

Acabo de encontrar algunos problemas en FloatingActionButton (FAB), y quiero mejorar otra respuesta. Ver mi respuesta a continuación.

Entonces, en su archivo build.gradle , agregue esto:

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

Nota de AndroidX: Google está presentando nuevas bibliotecas de extensión de AndroidX para reemplazar las bibliotecas de soporte anteriores. Para usar AndroidX, primero asegúrese de haber actualizado su archivo gradle.properties , editado build.gradle para establecer compileSdkVersion en 28 (o superior), y use la siguiente línea en lugar de la compile anterior.

 implementation 'com.google.android.material:material:1.0.0-rc01' 

A continuación, en su themes.xml o styles.xml o lo que sea, asegúrese de configurar esto, es el color de acento de su aplicación, y el color de su FAB, a menos que lo anule (vea a continuación):

  @color/floating_action_button_color 

En el XML del diseño:

    

Puede ver más opciones en los documentos ( setRippleColor , etc.), pero una de las notas es:

  app:fabSize="mini" 

Otra interesante: para cambiar el color de fondo de solo un FAB, agregue:

  app:backgroundTint="#FF0000" 

(por ejemplo para cambiarlo a rojo) al XML anterior.

De todos modos, en código, después de que la vista Actividad / Fragmento esté inflada ….

  FloatingActionButton myFab = (FloatingActionButton) myView.findViewById(R.id.myFAB); myFab.setOnClickListener(new View.OnClickListener() { public void onClick(View v) { doMyThing(); } }); 

Observaciones:

  • Si tiene uno de esos botones que está en una “costura” dividiendo dos vistas (usando un RelativeLayout, por ejemplo) con, por ejemplo, un margen negativo de diseño inferior para superponerse al borde, notará un problema: el tamaño del FAB es en realidad muy diferente en lollipop vs. pre-lollipop. En realidad, puedes ver esto en el editor de diseño visual de AS cuando pasas de una API a otra: de repente se “infla” cuando cambias a pre-lollipop. La razón para el tamaño extra parece ser que la sombra expande el tamaño de la vista en todas las direcciones. Así que tienes que dar cuenta de esto cuando estás ajustando los márgenes de la FAB si está cerca de otras cosas.
  • Aquí hay una manera de eliminar o cambiar el relleno si hay demasiado:

     if (Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP) { RelativeLayout.LayoutParams p = (RelativeLayout.LayoutParams) myFab.getLayoutParams(); p.setMargins(0, 0, 0, 0); // get rid of margins since shadow area is now the margin myFab.setLayoutParams(p); } 
  • Además, iba a colocar programáticamente el FAB en la "costura" entre dos áreas en un RelativeLayout al tomar la altura del FAB, dividir por dos, y usar eso como el margen de compensación. Pero myFab.getHeight () devolvió cero, incluso después de que se infló la vista, parecía. En su lugar, utilicé ViewTreeObserver para obtener la altura solo después de que se diseña y luego establezco la posición. Vea este consejo aquí . Se veía así:

      ViewTreeObserver viewTreeObserver = closeButton.getViewTreeObserver(); if (viewTreeObserver.isAlive()) { viewTreeObserver.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() { @Override public void onGlobalLayout() { if (Build.VERSION.SDK_INT < Build.VERSION_CODES.JELLY_BEAN) { closeButton.getViewTreeObserver().removeGlobalOnLayoutListener(this); } else { closeButton.getViewTreeObserver().removeOnGlobalLayoutListener(this); } // not sure the above is equivalent, but that's beside the point for this example... RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) closeButton.getLayoutParams(); params.setMargins(0, 0, 16, -closeButton.getHeight() / 2); // (int left, int top, int right, int bottom) closeButton.setLayoutParams(params); } }); } 

    No estoy seguro de si esta es la manera correcta de hacerlo, pero parece funcionar.

  • Parece que puedes reducir el espacio de sombra del botón al disminuir la elevación.
  • Si quiere el FAB en una "costura" puede usar layout_anchor y layout_anchorGravity aquí hay un ejemplo:

      

Recuerde que puede hacer que el botón salte automáticamente cuando aparece una barra de refrigerio envolviéndolo en un CoordinatorLayout .

Más:

  • Página de la biblioteca de soporte de diseño de Google
  • los documentos FloatingActionButton
  • Charla "Material ahora" de Google I / O 2015 - Biblioteca de diseño de soporte presentada en 17m22s
  • Biblioteca de soporte de diseño sample / showcase

Acabo de encontrar algunos problemas en FAB y quiero mejorar otra respuesta.


problema setRippleColor

Entonces, el problema vendrá una vez que establezca el color de ondulación (color FAB al presionar) programáticamente a través de setRippleColor . Pero, todavía tenemos una manera alternativa de establecerlo, es decir, llamando:

 FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab); ColorStateList rippleColor = ContextCompat.getColorStateList(context, R.color.fab_ripple_color); fab.setBackgroundTintList(rippleColor); 

Tu proyecto necesita tener esta estructura:

 /res/color/fab_ripple_color.xml 

enter image description here

Y el código de fab_ripple_color.xml es:

      

Finalmente, modifique su FAB ligeramente:

   

Para API nivel 21 y superior, configure el margen derecho e inferior a 24dp:

 ... android:layout_marginRight="24dp" android:layout_marginBottom="24dp" /> 

Guías de diseño FloatingActionButton

Como puede ver en mi código FAB xml anterior, establecí:

  ... android:layout_alignParentBottom="true" android:layout_alignParentRight="true" app:elevation="6dp" app:pressedTranslationZ="12dp" ... 
  • Al configurar estos atributos, no necesita establecer layout_marginTop y layout_marginRight nuevamente (solo en pre-Lollipop). Android lo colocará automáticamente en el lado derecho de la pantalla, que es lo mismo que FAB normal en Android Lollipop.

      android:layout_alignParentBottom="true" android:layout_alignParentRight="true" 

O bien, puede usar esto en CoordinatorLayout :

  android:layout_gravity="end|bottom" 
  • Necesita tener 6dp de elevation y 12dp pressedTranslationZ , según esta guía de Google.

Reglas FAB

FloatingActionButton extiende ImageView . Por lo tanto, es tan simple como introducir un ImageView en su diseño. Aquí hay una muestra XML.

  

app:borderWidth="0dp" se agrega como una solución para problemas de elevación.

    Intereting Posts