Botón de acción flotante (FAB) en Android con ejemplo

El botón de acción flotante es un botón un poco diferente de los botones normales. Los botones de acción flotante se implementan en la interfaz de usuario de la aplicación para las acciones principales (acciones promocionadas) para los usuarios y el desarrollador prioriza las acciones debajo del botón de acción flotante. Por ejemplo, las acciones como agregar un elemento en la lista existente. Entonces, en este artículo, se mostró cómo implementar el botón de acción flotante (FAB), y también los botones debajo del FAB se manejan con un mensaje Toast simple. Tenga en cuenta que vamos a implementar este proyecto utilizando el lenguaje Java.

Tipos de botón de acción flotante

Hay principalmente cuatro tipos de botones de acción flotantes disponibles en Android.

• Botón de acción flotante normal/regular
• Mini botón de acción flotante
• Botón de acción flotante extendido
• Botón de acción flotante de tematización

En este artículo, analicemos el botón de acción flotante normal/regular y el botón de acción flotante mini con un ejemplo de ejemplo en Android.

Botón de acción flotante normal/regular

Los FAB regulares son FAB que no están expandidos y son de tamaño regular. El siguiente ejemplo muestra un FAB regular con un ícono más.

Pasos para crear un FAB normal/regular

Paso 1: Crear un nuevo proyecto

Para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio . Tenga en cuenta que seleccione Java como lenguaje de programación.

Paso 2: agregue la dependencia en el archivo Gradle del nivel de la aplicación.

• Aquí estamos usando el botón de acción flotante que está diseñado y desarrollado por el equipo de diseño de materiales de Google.
• Agregue la dependencia en el archivo build.gradle(app) como:

implementación ‘com.google.android.material:material:1.3.0-alpha02’

• Asegúrese de agregar la dependencia al archivo Gradle del nivel de la aplicación. Después de agregar la dependencia, debe hacer clic en el botón » Sincronizar ahora » que aparece en la esquina superior derecha del IDE de Android Studio .
• Cuando el usuario haga clic en el botón Sincronizar ahora, asegúrese de estar conectado a la red para que pueda descargar los archivos necesarios.
• Consulte la imagen a continuación si no puede obtener los pasos mencionados anteriormente:

Paso 3: agregue los íconos FAB al archivo Drawable

• Para fines de demostración, se importarán 3 íconos en la carpeta Drawable, uno puede importar los íconos de su elección. Se puede hacer haciendo clic con el botón derecho en la carpeta dibujable -> Nuevo -> Activo vectorial . Consulte la siguiente imagen para importar el icono de vector.

• Ahora seleccione su icono de vector:

• Ahora abra activity_main.xml y agregue los botones de acción flotantes.

Paso 4: trabajar con el archivo activity_main.xml

• En el archivo activity_main.xml agregue los botones de acción flotantes Ahora invoque el botón FAB normal. Que tiene un radio de 56 dp.
• Hemos enstringdo los botones FAB secundarios al botón FAB principal para que estén en una sola línea clave. Se agregan comentarios dentro del código para comprender el código con más detalle.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
    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"
    tools:context=".MainActivity"
    tools:ignore="HardcodedText">
  
    <!--This will be the parent Floating Action Button-->
    <!--After the implementation the Floating Action Button
         at the bottom right corner-->
    <!--After clicking the above button the following two buttons 
        will pop up. So this button is considered as parent FAB-->
    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/add_fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end"
        android:layout_marginEnd="16dp"
        android:layout_marginBottom="16dp"
        android:src="@drawable/ic_add_black_24dp"
        app:fabSize="normal"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />
  
    <!--Floating action button for add alarm-->
    <!--Make sure that you are constraining this 
        button to the parent button-->
    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/add_alarm_fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="24dp"
        app:fabSize="normal"
        app:layout_constraintBottom_toTopOf="@+id/add_fab"
        app:layout_constraintEnd_toEndOf="@+id/add_fab"
        app:layout_constraintStart_toStartOf="@+id/add_fab"
        app:srcCompat="@drawable/ic_add_alarm_black_24dp" />
  
    <!--Action name text for the add alarm button-->
    <!--Make sure that you are constraining this Text to 
        the add Alarm FAB button-->
    <TextView
        android:id="@+id/add_alarm_action_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:text="Add Alarm"
        app:layout_constraintBottom_toBottomOf="@+id/add_alarm_fab"
        app:layout_constraintEnd_toStartOf="@+id/add_alarm_fab"
        app:layout_constraintTop_toTopOf="@+id/add_alarm_fab" />
  
    <!--Floating action button for add person-->
    <!--Make sure that you are constraining this 
        button to the add Alarm FAB button-->
    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/add_person_fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="24dp"
        app:fabSize="normal"
        app:layout_constraintBottom_toTopOf="@+id/add_alarm_fab"
        app:layout_constraintEnd_toEndOf="@+id/add_alarm_fab"
        app:layout_constraintStart_toStartOf="@+id/add_alarm_fab"
        app:srcCompat="@drawable/ic_person_add_black_24dp" />
  
    <!--Action name text for the add person button-->
    <!--Make sure that you are constraining this Text 
        to the add Person FAB button-->
    <TextView
        android:id="@+id/add_person_action_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:text="Add Person"
        app:layout_constraintBottom_toBottomOf="@+id/add_person_fab"
        app:layout_constraintEnd_toStartOf="@+id/add_person_fab"
        app:layout_constraintTop_toTopOf="@+id/add_person_fab" />
  
</androidx.constraintlayout.widget.ConstraintLayout>

La interfaz de usuario de salida se produce como:

Paso 5: trabajar con el archivo MainActivity.java

• Ahora maneje todos estos botones FAB usando el método setOnClickListener() que puede consultar Manejo de eventos de clic en Botón | Android.
• Ahora, en MainActivity.java, invoque el siguiente código para manejarlos. Lea los comentarios debajo del código para una mejor comprensión. En este código se ha demostrado que cuando los FAB secundarios deben ser visibles con onClickListener. Se agregan comentarios dentro del código para comprender el código con más detalle.

import android.os.Bundle;
import android.view.View;
import android.widget.TextView;
import android.widget.Toast;
import androidx.appcompat.app.AppCompatActivity;
import com.google.android.material.floatingactionbutton.FloatingActionButton;
  
public class MainActivity extends AppCompatActivity {
  
    // Make sure to use the FloatingActionButton
    // for all the FABs
    FloatingActionButton mAddFab, mAddAlarmFab, mAddPersonFab;
  
    // These are taken to make visible and invisible along
    // with FABs
    TextView addAlarmActionText, addPersonActionText;
  
    // to check whether sub FAB buttons are visible or not.
    Boolean isAllFabsVisible;
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
  
        // Register all the FABs with their IDs
        // This FAB button is the Parent
        mAddFab = findViewById(R.id.add_fab);
        // FAB button
        mAddAlarmFab = findViewById(R.id.add_alarm_fab);
        mAddPersonFab = findViewById(R.id.add_person_fab);
  
        // Also register the action name text, of all the FABs.
        addAlarmActionText = findViewById(R.id.add_alarm_action_text);
        addPersonActionText = findViewById(R.id.add_person_action_text);
  
        // Now set all the FABs and all the action name
        // texts as GONE
        mAddAlarmFab.setVisibility(View.GONE);
        mAddPersonFab.setVisibility(View.GONE);
        addAlarmActionText.setVisibility(View.GONE);
        addPersonActionText.setVisibility(View.GONE);
  
        // make the boolean variable as false, as all the
        // action name texts and all the sub FABs are invisible
        isAllFabsVisible = false;
  
        // We will make all the FABs and action name texts
        // visible only when Parent FAB button is clicked So
        // we have to handle the Parent FAB button first, by
        // using setOnClickListener you can see below
        mAddFab.setOnClickListener(
                new View.OnClickListener() {
                    @Override
                    public void onClick(View view) {
                        if (!isAllFabsVisible) {
  
                            // when isAllFabsVisible becomes
                            // true make all the action name
                            // texts and FABs VISIBLE.
                            mAddAlarmFab.show();
                            mAddPersonFab.show();
                            addAlarmActionText.setVisibility(View.VISIBLE);
                            addPersonActionText.setVisibility(View.VISIBLE);
  
                            // make the boolean variable true as
                            // we have set the sub FABs
                            // visibility to GONE
                            isAllFabsVisible = true;
                        } else {
  
                            // when isAllFabsVisible becomes
                            // true make all the action name
                            // texts and FABs GONE.
                            mAddAlarmFab.hide();
                            mAddPersonFab.hide();
                            addAlarmActionText.setVisibility(View.GONE);
                            addPersonActionText.setVisibility(View.GONE);
  
                            // make the boolean variable false
                            // as we have set the sub FABs
                            // visibility to GONE
                            isAllFabsVisible = false;
                        }
                    }
                });
  
        // below is the sample action to handle add person
        // FAB. Here it shows simple Toast msg. The Toast
        // will be shown only when they are visible and only
        // when user clicks on them
        mAddPersonFab.setOnClickListener(
                new View.OnClickListener() {
                    @Override
                    public void onClick(View view) {
                        Toast.makeText(MainActivity.this, "Person Added", Toast.LENGTH_SHORT).show();
                    }
                });
  
        // below is the sample action to handle add alarm
        // FAB. Here it shows simple Toast msg The Toast
        // will be shown only when they are visible and only
        // when user clicks on them
        mAddAlarmFab.setOnClickListener(
                new View.OnClickListener() {
                    @Override
                    public void onClick(View view) {
                        Toast.makeText(MainActivity.this, "Alarm Added", Toast.LENGTH_SHORT).show();
                    }
                });
    }
}

Salida: ejecutar en el emulador

Mini botón de acción flotante

Los mini FAB se utilizan en pantallas más pequeñas. Los Mini FAB también se pueden usar para crear una continuidad visual con otros elementos de la pantalla.

Creando un Mini FAB

Ahora invoque el botón mini FAB. Que tiene un radio de 40 dp. Todas las otras cosas se renombran igual. Solo se necesita cambiar un atributo que es:

aplicación: tamaño fab = «mini»

Después de hacer los cambios, la interfaz de usuario de salida se ve así:

Nota: El botón FAB también se puede cambiar de tamaño automáticamente cambiando el atributo fabSize a automático. Esto hará que el tamaño FAB sea automáticamente mini y normal de acuerdo con el tamaño de la ventana.

aplicación: fabsize = «automático»