Crear un Floating Action Button en Android

Un Floating Action Button es un botón circular flotante que aparece en la parte inferior derecha de la pantalla que nos permite ejecutar una acción habitual dentro de una aplicación. Comúnmente se abrevia como FAB y es un elemento de interfaz bastante utilizado junto con elementos ListView. Veamos cómo utilizarlo en nuestra aplicación.

Abre tu archivo activity_main.xml (el que tiene el diseño de la app).

En el archivo activity_main.xml vamos a colocar un componente ListView.   

<ListView
    android:id="@+id/listView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginBottom="8dp"
    android:layout_marginTop="8dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    tools:layout_editor_absoluteX="2dp" />

Para utilizar el Floating Action Button debemos agregar una nueva librería.

Agregar librería a gradle

En el archivo gradle (/app/build.gradle), en la sección de dependencias (dependencies) añadimos esta linea:

compile ‘com.android.support:design:26.+’

Mi archivo gradle lleva esta apariencia (no debe ser idéntico en tu caso). 

Librería necesaria para el Floating Action Button

Estoy usando ..design:26+ considerando que tengo compileSdkVersion 26 (puedes verlo en la imagen anterior).

Sincronizamos dando clic en Sync Now.

Agregar un Floating Action Button

Volvemos a activity_main.xml y ya podemos colocar un Floating Action Button

 <android.support.design.widget.FloatingActionButton
        android:id="@+id/fabAddBoard"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_fab_add"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        app:layout_constraintBottom_toBottomOf="@+id/listView"
        app:layout_constraintEnd_toEndOf="@+id/listView" />

Eso es todo para agregar un Floating Action Button, lo puedes utilizar como un botón normal dentro de tu proyecto Android.

Agregar una imagen al Floating Action Button

Ésta línea:  android:src=“@drawable/ic_fab_add” indica la imagen que tendrá nuestro botón, en éste caso un signo de más (+). Los pasos que se siguen para agregar esa imagen a nuestro proyecto son los siguientes: (en caso de que aún no sepas hacerlo).

Ve a File -> New -> Image Asset

En Icon Type seleccionamos Action Bar…

En Name escribimos el nombre que daremos a la imagen. En mi caso utilicé id_fab_add

En asset type elijo Image

En Path, eligo la imagen png con el signo de mas (+). Si no cuentas con iconos puedes utilizar https://materialdesignicons.com, buscando el que más te guste y se adapte al proyecto.

Algunos iconos disponibles en materialdesignicons.com

Pulsa Next.

Pulsa Finish.

Tu comentario

opiniones