DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
24-08-2015

El Botón Acción Flotante (o en inglés FloatingActionButton) cuya imagen puedes ver en el inicio de esta entrada, a mi parecer es uno de los elementos más vistosos del Material Desing y hace unas cuantas versiones de librerías de soporte, Google lo ha incorporado junto con múltiples elementos del Material Design.

Si no saber qué es el Material Design vea el siguiente link: Material Design.

Si quieres saber cuales son los cambios que incorporan las nuevas y anteriores revisiones de las librerías de soporte consulte el siguiente enlace: Support Library.

¿Para qué emplear el FloatingActionButton?

El FloatingActionButton se emplea para todo tipo de acciones principales en una aplicación Android y en esta entrada veremos cómo emplear este botón desde la librería de soporte empleando como IDE a Android Studio.

Incorporando las dependencias en nuestro Gradle

Cómo les había comentado en la entrada anterior sobre Android Studio, para vincular las distintas librerías o módulos de otros desarrolladores (en este caso la librería de soporte creada por Google en sus múltiples versiones) en nuestros proyectos es necesario colocar en nuestro archivo /app/build.gradle la siguiente dependencia:

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

Una vez modificado es necesario que Android Studio se sincronice para descargar los distintos módulos incorporados; aunque la sincronización la realiza de manera automática:

Sincronización del gradle

Gracias a las dependencias anteriores, podremos incorporar distintas características del Material Design; como son las siguientes:

Creando nuestro FloatingActionButton desde el layout (XML)

Una vez colocada la dependencia necesaria, podemos empezar a trabajar con el Material Design, específicamente nuestro caso de interés el Botón Acción Flotante (FloatingActionButton); coloquemos el siguiente código XML dentro de algún layout; por ejemplo el activity_main.xml para que quede de la siguiente manera:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity">

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/record_fab"
        style="@style/FloatingActionButtonStyle"
        android:src="@mipmap/device_access_mic"
        app:backgroundTint="@color/color_primary" />

</RelativeLayout>

El atributo app:backgroundTint especifica el color del FloatingActionButton definido en el values/color.xml de la siguiente manera:

<?xml version="1.0" encoding="utf-8"?>
<resources>
   <color name="color_primary">#FF5722</color>
</resources>

Ahora, si nos damos una vuelta por el modo Design o el modo Text que también incorpora una vista de detalle, veremos nuestro FloatingActionButton:

floatingActionButton en android Studio

Hasta el momento tenemos nuestro fantástico FloatingActionButton en nuestra interfaz Android y hasta aquí llevamos la mitad del trabajo ya que por sí solo y al igual que cualquier otro elemento el FloatingActionButton no hará nada salvo si le referenciamos desde una Activity o Fragment y le indicamos las tareas a realizar.

Referenciar y evento OnClick del FloatingActionButton

Para referenciar el FloatingActionButton se emplea el método findViewById al igual que cualquier otro elemento:

FloatingActionButton recordFab = (FloatingActionButton) findViewById(R.id.record_fab);

Ahora podemos atarlo al evento OnClick mediante la interfaz OnClickListener quedando de la siguiente manera:

recordFab.setOnClickListener(new View.OnClickListener() {
   public void onClick(View v) {
       Log.i("TAG", "Hacer algo");
   }
});

Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Templates para Android y iOS

Templates para Android y iOS

Paleta de colores para el Material Design

Paleta de colores para el Material Design

Librería oficial de PayPal para Android

Librería oficial de PayPal  para Android

Algunos artículos que te pueden interesar

¿Qué es el ADT de Android?

¿Qué es el ADT de Android?

El ADT por sus siglas en inglés Herramientas de Desarrollo Android en inglés Android Development Tools; es un plugin para Eclipse que permite construir aplicaciones para Android.

Andrés Cruz 02-09-2013

Lo nuevo del Material Design: el Snackbar

Lo nuevo del Material Design: el Snackbar

En esta entrada veremos cómo emplear el Snackbar el cual da la posibilidad de revertir algunas de las operaciones críticas que se han realizado, como borrar un correo en el caso de Gmail.

Andrés Cruz 14-09-2015

Cómo crear un menú de opciones tipo rueda con CSS y HTML

Cómo crear un menú de opciones tipo rueda con CSS y HTML

Veremos algunos botones cuyo menú será desplegado al pulsar (evento clic) o posicionarnos encima de los mismos (evento hover) sobre el mismo en forma de una rueda; los mismos fueron inspirados del Material Design.

Andrés Cruz 01-08-2017