¿Cómo evitar el botón de acción flotante superpuesto de Snackbar en Android?

Requisito previo: 

• Botón de acción flotante (FAB) en Android con ejemplo
• Cómo agregar un Snackbar en Android

Si uno ha implementado el botón de acción flotante (FAB) en su aplicación de Android y también existe una implementación de Snackbar en la misma aplicación, entonces Snackbar definitivamente se superpondrá al botón de acción flotante. Eche un vistazo al siguiente GIF que muestra el problema del Snackbar y el botón de acción flotante:

¿Cómo arreglar este problema?

Entonces, en este artículo, solucionemos este problema tomando un ejemplo simple en Android. Tenga en cuenta que vamos a implementar este ejemplo utilizando el lenguaje Java .

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:

Paso 4: trabajar con el archivo activity_main.xml

• En el archivo activity_main.xml agregue un botón de acción flotante (FAB) y un botón. Entonces, cada vez que el usuario haga clic en el botón , aparecerá un Snackbar.
• Invoque el siguiente código dentro del archivo activity_main.xml. Para una comprensión clara, consulte los comentarios dentro del código que se proporciona a continuación:

<?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">
 
    <Button
        android:id="@+id/show_snackbar_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="SHOW SNACKBAR"
        app:layout_constraintBottom_toTopOf="@+id/add_fab"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:ignore="MissingConstraints" />
 
    <!--Add simple Parent Floating Action Button-->
    <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_baseline_ac_unit_24"
        app:fabSize="normal"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />
 
</androidx.constraintlayout.widget.ConstraintLayout>

Se produce la siguiente interfaz de usuario de salida:

Paso 5: trabajar con el archivo MainActivity.java

• Ahora resuelva el problema mediante programación en el archivo MainActivity.java.
• Uno puede observar debajo del código que el botón MOSTRAR SNACKBAR al hacer clic en el oyente hemos configurado AnchorView en el FAB principal. Para que el FAB principal sea visible, incluso después de que aparezca el Snackbar, y el Snackbar se mostrará en la parte superior del FAB.
• Invoque el siguiente código y 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.Button;
import androidx.appcompat.app.AppCompatActivity;
import com.google.android.material.floatingactionbutton.FloatingActionButton;
import com.google.android.material.snackbar.Snackbar;
 
public class MainActivity extends AppCompatActivity {
 
    Button mSnackBarButton;
    FloatingActionButton mAddFab;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        // Register the show snackbar button with appropriate ID
        mSnackBarButton = findViewById(R.id.show_snackbar_button);
 
        // also register the floating action button with appropriate ID
        mAddFab = findViewById(R.id.add_fab);
 
        // Build and show the simple Snackbar with action button on it
        mSnackBarButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar snackbar = Snackbar.make(view, "This is sample snackbar", Snackbar.LENGTH_SHORT);
                // Set the Anchor View to particular view to display the snackbar to top of it
                snackbar.setAnchorView(mAddFab);
                snackbar.setAction("OKAY", new View.OnClickListener() {
                    @Override
                    public void onClick(View view) {
                        // Do appropriate action on click of snackbar action button
                    }
                });
                snackbar.show();
            }
        });
    }
}

Salida: ejecutar en el emulador