En Material Design, un botón de acción flotante (Floating Action Button) representa la acción primaria en una aplicación. Debe su nombre a la forma de icono circular flotando sobre la interfaz de usuario, que cambia de color con el enfoque y se eleva con la selección. Cuando se pulsa, puede contener más acciones relacionadas.
 |
| Floating Action Button |
Los Botones de Acción Flotantes (FAB) son botones estándar circulares que, a diferencia de los botones normales, flotan sobre los otros elementos de la pantalla. Los FABs de Material Design pueden ser de tamaño estándar (56 x 56 dp) o mini (40 x 40 dp) y pueden personalizarse tanto en color como en el icono del botón.
El botón de acción flotante (FAB) no está visible en la vista previa del diseñador. Solo es visible durante las pruebas en vivo y cuando exporta su aplicación.
Ubicando el FAB
La posición más común para un FAB es en la parte inferior derecha con un relleno (padding) de 16 dp desde la parte inferior y derecha. Si deseas ubicar el FAB en otra posición sugerimos consultar las especificaciones de Material Design y seguir esas pautas, ya que los usuarios están familiarizados con esas posiciones y es más probable que se involucren en la acción principal de tu aplicación.
Para un mejor rendimiento al usar un FAB, establezca la orientación de la pantalla en Vertical (Portrait), de lo contrario, el FAB puede desaparecer de la pantalla.
Creando el Menú
En este ejemplo usamos el componente FAB para crear un menú de tres opciones, es decir que usamos cuatros FABs, uno con tamaño por defecto (Default) que será el botón principal y tres con tamaño mini, para cada una de las opciones.
La posición del FAB principal tiene el valor por defecto para el tamaño (default), el relleno inferior y el derecho, es decir, 16 dp. y utilizamos el icono "add"
Para establecer el relleno inferior de cada FAB de opción, debemos considerar lo siguiente: el tamaño del FAB principal es 56 dp, tiene un relleno inferior de 16 dp y deseamos que el primer FAB de opción se encuentre separado 4 dp de él.
- Posición del FAB_Option1 = 56 + 16 + 4 = 76 dp
- Posición del FAB_Option2 = 76 + 40 + 4 = 120 dp
- Posición del FAB_Option3 = 120 + 40 + 4 = 164 dp
- Todos los FABs de opción tendrán un relleno derecho de 24 dp
Suscríbete a nuestro canal en YouTube AQUÍ
Deja tus comentarios aquí o en nuestro canal de YouTube.
Trataremos de responder a todos.