Tematización de snackbars de diseño de materiales en Android con ejemplo

En el artículo anterior, se discutió sobre los componentes de diseño de materiales de Snackbar en Android . En este artículo, se ha discutido cómo podemos diseñar el material temático Snackbar y aumentar la experiencia del usuario.

Tematización Ejemplo 1:

Este método se realiza utilizando el archivo styles.xml . Donde necesitamos anular el estilo predeterminado de Snackbar.
Eche un vistazo a la siguiente imagen para obtener todo lo que se puede personalizar en el Snackbar.

Theming Material Design Snackbars in Android

Al implementar este método, todos los Snackbars se ven afectados por estos atributos de estilo.
En esta personalización, se cambia el tinte de fondo y el color del texto del botón de acción.
Esto hace que el usuario se concentre en la acción y pueda realizar la acción deseada de acuerdo con el mensaje que se muestra en el Snackbar.
Esto también evita que el usuario haga clic innecesariamente en el botón de acción.

XML

<resources>
 
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
 
        <!--this is makes changes to the entire snackbar-->
        <item name="snackbarStyle">@style/Widget.App.Snackbar</item>
 
        <!--this item is optional as all the snackbar wont contain the action button-->
        <item name="snackbarButtonStyle">@style/Widget.App.SnackbarButton</item>
 
    </style>
 
    <style name="Widget.App.Snackbar" parent="Widget.MaterialComponents.Snackbar">
 
        <!--this child makes changes to the background color of the snackbar-->
        <item name="materialThemeOverlay">@style/ThemeOverlay.App.Snackbar</item>
 
        <!--if this is made 0 then the action button text color will be white-->
        <!--if this is 1 then the custom color can be set to action button text-->
        <item name="actionTextColorAlpha">1</item>
    </style>
 
    <!--this is child is needed only when there is action button in snackbar-->
    <!--otherwise this is not necessary-->
    <!--in this case the action button color inside the snackbar is set to red-->
    <style name="Widget.App.SnackbarButton" parent="Widget.MaterialComponents.Button.TextButton.Snackbar">
        <item name="android:textColor">@android:color/holo_red_dark</item>
    </style>
 
    <!--this color inside this child is the background color of the snackbar-->
    <style name="ThemeOverlay.App.Snackbar" parent="">
        <item name="colorOnSurface">@color/colorPrimaryDark</item>
    </style>
 
</resources>

Salida: ejecutar en el emulador

Tematización Ejemplo 2:

Este método de implementación realiza cambios solo en el Snackbar en particular y no en todos los Snackbars.
Lo mismo se puede lograr configurando todas las cosas programáticamente.
Ahora trabajando con el archivo MainActivity.java .

Java

import androidx.appcompat.app.AppCompatActivity;
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 to show the snackbar
    Button bShowSnackbar;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        // register the show snackbar button with the
        // appropriate ID
        bShowSnackbar = findViewById(R.id.show_snackbar_button);
 
        // button click listener to show the snackbar
        bShowSnackbar.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // pass the mSnackbarLayout as the view
                // to the make function
                Snackbar snackbar = Snackbar.make(v, "You have deleted an item", Snackbar.LENGTH_LONG);
                snackbar.setAction("UNDO", new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        // perform any action when the button on the snackbar is clicked here in this case it
                          // shows a simple toast
                        Toast.makeText(MainActivity.this, "The item has been restored", Toast.LENGTH_SHORT).show();
                    }
                });
                // the duration is in terms of milliseconds
                snackbar.setDuration(3000);
                // set the background tint color for the snackbar
                snackbar.setBackgroundTint(getResources().getColor(R.color.colorPrimary));
                // set the action button text color of the snackbar however this is optional
                // as all the snackbar wont have the action button
                snackbar.setActionTextColor(getResources().getColor(R.color.actionTextColorForSnackbar));
                snackbar.show();
            }
        });
    }
}

Kotlin

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;
import com.google.android.material.snackbar.Snackbar;
 
class MainActivity : AppCompatActivity() {
   
    // Button to show the snackbar
    var bShowSnackbar: Button? = null
    override fun onCreate(savedInstanceState: Bundle?) {
       
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
 
        // register the show snackbar button with the
        // appropriate ID
        bShowSnackbar = findViewById(R.id.show_snackbar_button)
 
        // button click listener to show the snackbar
        bShowSnackbar.setOnClickListener(object : OnClickListener() {
            fun onClick(v: View?) {
               
                // pass the mSnackbarLayout as the view
                // to the make function
                val snackbar = Snackbar.make(v, "You have deleted an item", Snackbar.LENGTH_LONG)
                snackbar.setAction("UNDO", object : OnClickListener() {
                    fun onClick(v: View?) {
                        // perform any action when the button on the snackbar is clicked here in this case it
                        // shows a simple toast
                        Toast.makeText(
                            this@MainActivity,
                            "The item has been restored",
                            Toast.LENGTH_SHORT
                        ).show()
                    }
                })
                // the duration is in terms of milliseconds
                snackbar.duration = 3000
                // set the background tint color for the snackbar
                snackbar.setBackgroundTint(resources.getColor(R.color.colorPrimary))
                // set the action button text color of the snackbar however this is optional
                // as all the snackbar wont have the action button
                snackbar.setActionTextColor(resources.getColor(R.color.actionTextColorForSnackbar))
                snackbar.show()
            }
        })
    }
}
//This code is written by Ujjwal Kumar Bhardwaj

Salida: ejecutar en el emulador

Tematización Ejemplo 3:

Cambiar el modo de animación de la Snackbar.
Esto también aumenta la experiencia del usuario, también al cambiar la animación de entrada y salida de Snackbar, hace que el usuario se concentre en el mensaje que recibió en Snackbar y realice la acción de acuerdo con el mensaje.
Eche un vistazo a la siguiente imagen para obtener la diferencia entre los modos de animación del Snackbar.