Ejemplo de Tutorial de Botón de Acción Flotante en Android

Hoy aprenderemos sobre el Botón de Acción Flotante de Android. Discutiremos el `FloatingActionButton`, que es un nuevo componente incluido en las Directrices de Material Design y SnackBar, que es un reemplazo de Material Design de un Toast.

Botón de Acción Flotante de Android

El Botón de Acción Flotante de Android se utiliza para enfatizar la función más importante en la pantalla. Es una forma genial y elegante de llamar la atención del usuario sobre ella.

Resumen del Botón de Acción Flotante de Android

Para usar widgets de Material Design en nuestro proyecto, necesitamos compilar la siguiente dependencia en nuestro archivo build.gradle como se muestra a continuación.

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

El widget FloatingActionButton se define en el diseño xml de la siguiente manera:

<android.support.design.widget.FloatingActionButton
      android:id="@+id/fab"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:src="@android:drawable/ic_dialog_email"
      android:layout_gravity="bottom|end"
      app:elevation="6dp"
      app:pressedTranslationZ="12dp"/>

Algunas observaciones hechas a partir del diseño xml anteriormente definido son:

1. El FloatingActionButton extiende la clase ImageView. Esto es evidente a partir del atributo android:src definido.
2. En el diseño XML anterior, el atributo de elevación se utiliza para proyectar una sombra sobre el botón y pressedTranslationZ hace que la sombra crezca cuando se presiona.

A FloatingActionButton is placed within a CoordinatorLayout. A CoordinatorLayout helps facilitate interactions between views contained within it, which will be useful later to describe how to animate the button depending on scroll changes. SnackBar is a more enhanced widget when compared to a Toast. A SnackBar is invoked as follows:

Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
                        .setAction("Action", null).show();

Hemos discutido SnackBar en detalle en otro tutorial. Nota importante: Si has estado siguiendo bien estos Tutoriales de Android, habrás notado que con la nueva actualización de las herramientas de compilación a la versión 23.1.1, la estructura del proyecto de un nuevo proyecto vacío ha cambiado y los widgets mencionados anteriormente están presentes por defecto en un nuevo proyecto de Android Studio. Así que en lugar de implementar los widgets mencionados anteriormente, hagamos un recorrido rápido por la nueva estructura del proyecto.

Ejemplo de Estructura de Proyecto de Botón de Acción Flotante de Android

Como puedes ver, se ha añadido un nuevo archivo de diseño XML llamado content_main.xml. Es lo mismo que el anterior activity_main.xml.

Ejemplo de Botón de Acción Flotante de Android

El nuevo activity_main.xml se muestra a continuación:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="com.journaldev.floatingactionbutton.MainActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

    </android.support.design.widget.AppBarLayout>

    <include layout="@layout/content_main" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        android:src="@android:drawable/ic_dialog_email" />

</android.support.design.widget.CoordinatorLayout>

A toolbar is added by default as a replacement of an ActionBar. It’s added inside an AppBarLayout which is a direct child of CoordinatorLayout The AppBarLayout is used to achieve various scrolling behaviours such as collapse, flex space, and quick return. The MainActivity.java is defined as given below:

package com.journaldev.floatingactionbutton;

import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.view.Menu;
import android.view.MenuItem;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
                        .setAction("Action", null).show();
            }
        });
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflar el menú; esto agrega elementos a la barra de acciones si está presente.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Manejar clics en elementos de la barra de acciones aquí. La barra de acciones
        // manejará automáticamente los clics en el botón de inicio/arriba, siempre y
        // cuando especifiques una actividad padre en AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }
}

A new attribute is added to the application tag inside the AndroidManifest.xml named android:supportsRtl="true". This enables right to left layouts in the application. Running this default application produces an output like below: As you can see, on clicking the floating action button, a SnackBar is displayed. This brings an end to this tutorial. You can create a new project in Android Studio and run it to see these features. Note: Make sure that you’re using the latest build tools. Reference: Android Reference Doc