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

Generador de launcher para Android sin padding

Generador de launcher para Android sin padding

Librería oficial de PayPal para Android

Librería oficial de PayPal  para Android

Templates para Android y iOS

Templates para Android y iOS

Algunos artículos que te pueden interesar

Cómo crear un lector de códigos QR en Android con Android Studio

Cómo crear un lector de códigos QR en Android con Android Studio

Se explica que es un QR, como generar un QR y como configurar y reconocer un código QR con Android empleando Android Studio

Andrés Cruz 29-09-2017

Transformando un botón de un estado a otro con CSS

Transformando un botón de un estado a otro con CSS

Se explica cómo transformar un botón con CSS y JavaScript.

Andrés Cruz 02-08-2016

Persistencia en Android Developer

Persistencia en Android Developer

Aparte de la Base de Datos SQLite en Android existen otros medios para almacenar información de la aplicación e inclusive información de preferencias del usuario; en esta primera entrega, veremos algunas de ellas.

Andrés Cruz 14-07-2014