El Floating Action Button (FAB) es un componente clave en el diseño de la interfaz de usuario para aplicaciones Android. Es un botón de gran énfasis que permite al usuario realizar una acción principal en una aplicación y se utiliza para representar la acción principal o más común en una pantalla.
Si tu aplicación tiene una acción que el usuario debe realizar, debes usar un FAB para esta acción. Forma parte de las directrices de Material Design desarrolladas por Google, que ofrecen un diseño simple pero atractivo para la interacción del usuario.
¿Qué es un Floating Action Button?
Básicamente, es un tipo de botón, pero un poco "más rico" que los anteriores. Podemos cambiar el tamaño, añadir texto (en el caso del botón extendido) y, por supuesto, siempre tiene un icono. El FAB suele colocarse en una posición fija en la pantalla y puede animarse para realizar acciones relacionadas al interactuar con él.
Para crear un botón de acción flotante general, usa el elemento FloatingActionButton básico que admite composición. Puedes crear botones de acción flotante más complejos con el elemento ExtendedFloatingActionButton componible. La diferencia clave entre este y FloatingActionButton es que tiene parámetros de icono y texto dedicados.
Los botones de acción flotante pueden ser de dos tamaños:
- El predeterminado (56dp)
- Mini (40dp)
Implementación del FAB
Existen dos enfoques principales para implementar un FAB en Android: el moderno Jetpack Compose y el tradicional sistema de vistas basado en XML.
Floating Action Button con Jetpack Compose (el enfoque moderno)
Jetpack Compose es el kit de herramientas moderno recomendado por Google para construir interfaces de usuario nativas en Android. Su naturaleza declarativa simplifica enormemente el desarrollo de la interfaz de usuario.
En Jetpack Compose, la implementación del FAB es concisa, declarativa y mucho más intuitiva que el enfoque basado en XML.
Scaffold( floatingActionButton = { FloatingActionButton(onClick = { /* acción al hacer clic */ }) { Icon(Icons.Default.Add, contentDescription = "Añadir") } }) { // Contenido de la pantalla}En este ejemplo:
- Scaffold organiza la pantalla y nos da un espacio dedicado para el FAB (floatingActionButton).
- FloatingActionButton es el elemento componible que crea el botón. Su lambda onClick define la acción a ejecutar.
- Icon se utiliza para mostrar un icono dentro del FAB, utilizando los iconos de Material predefinidos (Icons.Default.Add).
Para crear un botón de acción flotante pequeño, usa el elemento SmallFloatingActionButton componible. Para crear un botón de acción flotante grande, usa el elemento LargeFloatingActionButton componible.
Floating Action Button con XML (enfoque heredado)
Aunque Jetpack Compose es el futuro, muchas aplicaciones existentes aún utilizan el sistema de vistas basado en XML.
Primero, asegúrate de tener la dependencia de Material Design en tu archivo build.gradle (módulo):
implementation("com.google.android.material:material:1.12.0")Una vez modificada, Android Studio se sincronizará para descargar la biblioteca.
Instanciar el botón flotante en XML
Con la dependencia configurada, puedes añadir el FloatingActionButton a tu diseño XML.
<com.google.android.material.floatingactionbutton.FloatingActionButton android:id="@+id/fab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="end|bottom" android:src="@drawable/ic_add" android:contentDescription="Añadir nueva acción" />
Manejo de clics en el FAB con XML
Puedes manejar los clics del FAB configurando un OnClickListener para el FAB. En el método onClick(), puedes realizar la acción deseada o iniciar una animación. Si el FAB tiene múltiples acciones, puedes usar una declaración switch o condiciones if-else para manejar diferentes acciones.
En el archivo de actividad Java o Kotlin, puedes obtener una referencia al FAB y configurar un OnClickListener:
FloatingActionButton fab = findViewById(R.id.fab);fab.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { // Realizar acción o iniciar animación }});Este enfoque elimina la necesidad de findViewById, evitando errores de puntero nulo y de conversión de tipo.
Android Studio App Móvil Tutorial 11 Float action Button
Animaciones en el Floating Action Button
Las animaciones siguen siendo una parte importante de la experiencia del usuario. Al interactuar con las aplicaciones en nuestros dispositivos, las animaciones añaden placer a la experiencia del usuario y crean una sensación de conexión entre los destinos vibrantes.
Una de las animaciones en Android que mejora la experiencia del usuario es la animación de explosión del FAB (Floating Action Button). Aquí, el usuario hace clic en el FAB y este explota para llenar toda la pantalla, cargándose la siguiente pantalla. Antes de la explosión, el FAB se encoge ligeramente para tener en cuenta la pulsación del usuario; esto, junto con la explosión, crea un viaje agradable a la siguiente pantalla.
Puedes animar un FAB en Android utilizando las API de animación de Android. Puedes usar ObjectAnimator para animaciones simples o AnimatorSet para animaciones complejas que involucren múltiples propiedades. También puedes usar el método animate() de la clase View para animaciones simples. La animación se puede activar por la interacción del usuario, como hacer clic en el FAB.
fab.animate() .scaleX(0f) .scaleY(0f) .alpha(0f) .setDuration(300) .withEndAction(() -> { // Acción al finalizar la animación fab.setScaleX(1f); fab.setScaleY(1f); fab.setAlpha(1f); });Este código Kotlin es más limpio y utiliza withEndAction para encadenar la animación a su estado original.
Animación de revelación circular
Para versiones de Android LOLLIPOP (API 21) y posteriores, se puede usar la animación de revelación circular. Esta animación puede ser muy atractiva visualmente.
Para un ejemplo más detallado, puedes crear una nueva actividad llamada RevealActivity. Asegúrate de que el archivo de diseño de esta actividad tenga un Floating Action Button. En el método onCreate() de RevealActivity, busca las referencias de vista del FAB y añade un listener de clic. La función toggleFabMenu() se utiliza para crear e iniciar la animación de revelación.
public void toggleFabMenu() { if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.LOLLIPOP) { int centerX = fab.getMeasuredWidth() / 2; int centerY = fab.getMeasuredHeight() / 2; float startRadius = 0; float endRadius = (float) Math.hypot(rootLayout.getWidth(), rootLayout.getHeight()); if (revealView.getVisibility() == View.VISIBLE) { Animator animator = ViewAnimationUtils.createCircularReveal(revealView, centerX, centerY, endRadius, startRadius); animator.setInterpolator(new AccelerateDecelerateInterpolator()); animator.setDuration(400); animator.addListener(new AnimatorListenerAdapter() { @Override public void onAnimationEnd(Animator animation) { super.onAnimationEnd(animation); revealView.setVisibility(View.GONE); } }); animator.start(); } else { Animator animator = ViewAnimationUtils.createCircularReveal(revealView, centerX, centerY, startRadius, endRadius); animator.setInterpolator(new AccelerateDecelerateInterpolator()); animator.setDuration(400); revealView.setVisibility(View.VISIBLE); animator.start(); } } else { // Manejar versiones anteriores a LOLLIPOP }}El método createCircularReveal() se utiliza para configurar la animación. Los siguientes dos parámetros son las coordenadas X e Y de la pantalla donde comenzará la animación. La animación comenzará en el centro de la vista con un radio inicial de "0" y el radio final se calcula con el método Math.hypot().
Comportamiento del FAB con el desplazamiento
En la mayoría de las aplicaciones de Android recientes, el FAB reacciona al desplazamiento de una lista de elementos y, en mi opinión, debería ocultarse mientras se desplaza. Puedes usar la clase FloatingActionButton.Behavior(), cuya función principal es mover las vistas de FloatingActionButton para que cualquier Snackbar que se muestre no las cubra.
Para usar este comportamiento, añade el atributo layout_behavior al Floating Action Button. El atributo contiene el nombre del paquete, más el nombre de la clase al final, o dicho de otra manera, la ubicación exacta de esta clase en el proyecto.
Personalización del FAB
Puedes personalizar la apariencia de un FAB configurando su color de fondo, icono y tamaño. También puedes añadir una sombra al FAB para un efecto 3D. El FAB debe ser fácilmente visible, pero también debe integrarse bien con el diseño general de tu aplicación.
FAB en un Fragment
Sí, puedes usar un FAB en un Fragment. Puedes añadir el FAB en el archivo XML del diseño del Fragment y manejar sus clics en el archivo Java o Kotlin del Fragment. El FAB solo será visible cuando el Fragment sea visible.
FAB para múltiples acciones (menú FAB)
Un FAB puede animarse en una serie de botones más pequeños, cada uno representando una acción diferente. Esto se conoce como menú FAB o menú de marcación rápida. Cada botón más pequeño puede tener su propio icono y etiqueta, y puede animarse de nuevo al FAB principal cuando se hace clic.
Al crear estas animaciones, se puede encontrar el problema de los eventos táctiles y los FAB pequeños. Cuando la animación termina, la posición real de los FAB pequeños no cambia, solo la vista aparece en la nueva posición, por lo que no se pueden realizar eventos táctiles en la posición correcta. Esto requiere un manejo cuidadoso de los eventos táctiles durante la animación.
Efecto de onda (Ripple Effect)
Puedes añadir un efecto de onda a un FAB configurando su fondo en un RippleDrawable. El efecto de onda se activará cuando se haga clic en el FAB, proporcionando una retroalimentación visual al usuario.