Theming Material Design Snackbars in Android with Example

In the previous article, it’s been discussed Snackbar Material Design Components in Android. In this article, it’s been discussed how we can theme material design Snackbar and increase the User Experience.

Theming Example 1:

• This method is done using the styles.xml file. Where we need to override the default style of the Snackbar.
• Have a look at the following image to get what all the things can be customized on the Snackbar.

• By implementing this method all the Snackbars get affected by these style attributes.
• In this customization, the background tint and the action button text color is changed.
• This makes the user focus on the action and they can do the desired action according to the message shown on the Snackbar.
• This also prevents user the unnecessary clicking on the action button.

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>

Output: Run on Emulator

Theming Example 2:

• This method of implementation makes changes to only the particular Snackbar and not for all the Snackbars.
• The same can be achieved by setting all the things programmatically.
• Now working with MainActivity.java file.

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

Output: Run on Emulator

Theming Example 3:

• Changing the animation mode of the Snackbar.
• This increases the User Experience too, also by changing the animation of the entering and exit of the Snackbar makes the user focus on the message they got on Snackbar and perform the action according to the message.
• Have a look at the following image to get the difference between the animation modes of the Snackbar.

• The material design offers two types of animation modes for the Snackbar. One is fade animation (which is the default) and the second is the slide animation.
• The following code must be invoked inside the styles.xml file. In this case, the Snackbar animation mode is set as a slide.

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>

        <!--this attribute makes slide animation for the snackbar-->
        <item name="animationMode">slide</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>
        <item name="actionButtonStyle">?attr/buttonStyle</item>
    </style>

    <!--this color inside this child is the background color of the snackbar-->
    <style name="ThemeOverlay.App.Snackbar" parent="">
        <item name="colorOnSurface">@android:color/black</item>
    </style>

</resources>

Output: Run on Emulator