Snackbars personalizados en Android

SnackBars juega un papel muy importante en la experiencia del usuario. La barra de bocadillos que puede o no contener el botón de acción para hacer muestra el mensaje que sucedió debido a la interacción del usuario de inmediato. Entonces, en este artículo, se discutió cómo se pueden implementar los SnackBars usando diseños personalizados. Eche un vistazo a la siguiente imagen para tener una idea de cómo se pueden diferenciar los SnackBars hechos a medida de los SnackBars regulares (normales).

Pasos para implementar las SnackBars personalizadas en Android

Paso 1: crear un proyecto de actividad vacío

• Cree un proyecto de Android Studio de actividad vacío. Y selecciona JAVA como lenguaje de programación.
• Consulte Android | ¿Cómo crear/comenzar un nuevo proyecto en Android Studio? para saber cómo crear un proyecto de estudio de Android de actividad vacía.

Paso 2: trabajar con el archivo activity_main.xml

• El diseño principal aquí incluye solo un botón que, cuando se hace clic, se muestra el SnackBar personalizado.
• Invoque el código siguiente, en el archivo activity_main.xml .

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    tools:ignore="HardcodedText">
  
    <Button
        android:id="@+id/showSnackbarButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:backgroundTint="@color/colorPrimary"
        android:text="SHOW SNACKBAR"
        android:textColor="@android:color/white" />
  
</RelativeLayout>

Interfaz de usuario de salida: Ejecutar en el emulador

Paso 3: Crear un diseño personalizado para Snackbar

• En la carpeta de diseño, cree un diseño para SnackBar que debe inflarse al construir SnackBar en el archivo MainActivity.java .

<?xml version="1.0" encoding="utf-8"?>
<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"
    tools:ignore="HardcodedText">
  
    <androidx.cardview.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        android:elevation="4dp"
        app:cardBackgroundColor="@color/colorPrimaryDark"
        app:cardCornerRadius="4dp"
        app:cardPreventCornerOverlap="true"
        app:cardUseCompatPadding="true">
  
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:padding="8dp">
  
            <ImageView
                android:id="@+id/imageView"
                android:layout_width="45dp"
                android:layout_height="45dp"
                android:layout_alignParentStart="true"
                android:src="@drawable/image_logo" />
  
            <TextView
                android:id="@+id/textView1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="4dp"
                android:layout_toEndOf="@id/imageView"
                android:text="GeeksforGeeks"
                android:textAlignment="center"
                android:textColor="@android:color/white"
                android:textSize="18sp"
                android:textStyle="bold" />
  
            <TextView
                android:id="@+id/textView2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@id/textView1"
                android:layout_marginStart="4dp"
                android:layout_toEndOf="@id/imageView"
                android:text="Computer Science Portal"
                android:textColor="@android:color/white"
                android:textSize="14sp" />
  
            <!--this view separates between button and the message-->
            <View
                android:layout_width="2dp"
                android:layout_height="45dp"
                android:layout_toStartOf="@id/gotoWebsiteButton"
                android:background="@android:color/white" />
  
            <Button
                android:id="@+id/gotoWebsiteButton"
                style="@style/Widget.MaterialComponents.Button.TextButton"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentEnd="true"
                android:text="GOTO WEBSITE"
                android:textColor="@android:color/white"
                android:textSize="14sp" />
  
        </RelativeLayout>
  
    </androidx.cardview.widget.CardView>
</RelativeLayout>

Lo que produce la siguiente vista:

Paso 4: trabajar con el archivo MainActivity.java

import androidx.appcompat.app.AppCompatActivity;
import android.graphics.Color;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;
import com.google.android.material.snackbar.Snackbar;
  
public class MainActivity extends AppCompatActivity {
  
    Button bShowSnackbar;
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
  
        // register the button with appropriate ID
        bShowSnackbar = findViewById(R.id.showSnackbarButton);
  
        bShowSnackbar.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
  
                // create an instance of the snackbar
                final Snackbar snackbar = Snackbar.make(v, "", Snackbar.LENGTH_LONG);
  
                // inflate the custom_snackbar_view created previously
                View customSnackView = getLayoutInflater().inflate(R.layout.custom_snackbar_view, null);
  
                // set the background of the default snackbar as transparent
                snackbar.getView().setBackgroundColor(Color.TRANSPARENT);
  
                // now change the layout of the snackbar
                Snackbar.SnackbarLayout snackbarLayout = (Snackbar.SnackbarLayout) snackbar.getView();
  
                // set padding of the all corners as 0
                snackbarLayout.setPadding(0, 0, 0, 0);
  
                // register the button from the custom_snackbar_view layout file
                Button bGotoWebsite = customSnackView.findViewById(R.id.gotoWebsiteButton);
  
                // now handle the same button with onClickListener
                bGotoWebsite.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        Toast.makeText(getApplicationContext(), "Redirecting to Website", Toast.LENGTH_SHORT).show();
                        snackbar.dismiss();
                    }
                });
  
                // add the custom snack bar layout to snackbar layout
                snackbarLayout.addView(customSnackView, 0);
                  
                snackbar.show();
            }
        });
    }
}

Salida: ejecutar en el emulador