Coding Tutorials

Android Snackbar Example Tutorial

Aditya Singh•
Android Snackbar Example Tutorial

The Android Snackbar is a unique, lightweight feature that provides feedback about an operation. Like a toast message, it presents a brief notification to users. However, unlike a toast, it incorporates an interactive action, thereby enhancing user engagement. This tutorial delves into the various facets of the Android Snackbar, from its core principles to practical implementation in your Android applications.

Understanding the Snackbar Widget

Introduced with the Material Design library, the Snackbar widget has revolutionized the way applications communicate with users. It’s a superior alternative to the traditional Android Toast, offering improved interactivity and placement at the bottom of the application screen.

Some distinguishing factors between a Snackbar and a Toast include:

  1. A Toast can be displayed anywhere on the screen, while a Snackbar is designed to appear at the bottom.
  2. A Toast doesn’t incorporate an action button, whereas a Snackbar can optionally include one.
  3. Toast messages persist until their time limit expires, but the Snackbar can be swiped away before its time limit.

The Snackbar and Toast share one common feature: the display length property. This determines how long the message will be visible on the screen.

Implementing a Basic Android Snackbar

The implementation of a Snackbar in your Android application involves a few straightforward steps. The following code snippet illustrates a basic Snackbar in action:

Snackbar snackbar = Snackbar
        .make(coordinatorLayout, "www.androidhire.com", Snackbar.LENGTH_LONG);
snackbar.show();

In this snippet, the make() method accepts three parameters:

  1. coordinatorLayout: The root layout of the activity.
  2. www.androidhire.com: This is the message to be displayed on the Snackbar. You can customize it with your own message.
  3. Snackbar.LENGTH_LONG: This sets the time limit for how long the Snackbar is displayed.

The show() method is utilized to display the Snackbar on the screen.

Snackbar with Action Callback

One of the key advantages of the Snackbar widget is its ability to incorporate an interactive action. This is achieved using the setAction() method, which allows users to interact with the Snackbar. Here’s an example of how to implement a Snackbar with an action callback:

Snackbar snackbar = Snackbar
        .make(coordinatorLayout, "Message is deleted", Snackbar.LENGTH_LONG)
        .setAction("UNDO", new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar snackbar1 = Snackbar.make(coordinatorLayout, "Message is restored!", Snackbar.LENGTH_SHORT);
                snackbar1.show();
            }
        });

snackbar.show();

In this example, a new OnClickListener method is invoked when the action button is clicked, displaying a new Snackbar.

Customizing the Android Snackbar

Customization is a significant aspect of the Android Snackbar. By default, Snackbar comes with white color text and a #323232 background color. However, these colors can be overridden to align with your application’s design. Here’s an example of a customized Snackbar:

Snackbar snackbar = Snackbar
        .make(coordinatorLayout, "Try again!", Snackbar.LENGTH_LONG)
        .setAction("RETRY", new View.OnClickListener() {
            @Override
            public void onClick(View view) {
            }
        });
snackbar.setActionTextColor(Color.RED);
View sbView = snackbar.getView();
TextView textView = (TextView) sbView.findViewById(android.support.design.R.id.snackbar_text);
textView.setTextColor(Color.YELLOW);
snackbar.show();

This example customizes the Snackbar’s action text color to red and the message text color to yellow.

Integrating Snackbar Theming

The Snackbar widget supports Material Theming, allowing you to customize its color and typography. This can be implemented using theme attributes in res/values/styles.xml or by adjusting the Snackbar’s properties directly in the code.

Snackbar.make(contextView, "Text label", Snackbar.LENGTH_LONG)  
    .setAction("Action") {  
        // Responds to click on the action  
    }  
    .setBackgroundTint(resources.getColor(R.color.backgroundTint))  
    .setActionTextColor(resources.getColor(R.color.actionTextColor))  
    .show()

Implementing Snackbar in Android Studio

To implement an Android Snackbar in your project, start by creating a new project in Android Studio. Next, open the build.gradle file and add the Material Design dependency to enable the use of the Snackbar widget.

dependencies {  
    implementation 'com.google.android.material:material:1.3.0-alpha01'  
}

After setting up the project, you can start implementing the Snackbar in your application. The following are the primary steps involved in creating a simple Snackbar, a Snackbar with action callback, and a customized Snackbar.

Creating a Simple Snackbar

Here is the syntax for a simple Snackbar:

Snackbar snackbar = Snackbar.make(coordinatorLayout,"This is Simple Snackbar",Snackbar.LENGTH_SHORT);  
snackbar.show();

Creating a Snackbar with Action Callback

To create a Snackbar with an action button, use the setAction() method as shown below:

Snackbar snackbar = Snackbar.make(coordinatorLayout,"Snackbar With Action",Snackbar.LENGTH_SHORT);  
snackbar.setAction("UNDO", new View.OnClickListener() {  
    @Override  
    public void onClick(View view) {  
        Toast.makeText(getApplicationContext(),"Undo action",Toast.LENGTH_SHORT).show();  
    }  
});  
snackbar.show();

Customizing the Snackbar

The Snackbar’s text color and background color can be changed to match your application’s theme. Here’s an example:

Snackbar snackbar = Snackbar.make(coordinatorLayout,"Custom Snackbar",Toast.LENGTH_SHORT);  
snackbar.setAction("UNDO", new View.OnClickListener() {  
    @Override  
    public void onClick(View view) {  
        Toast.makeText(getApplicationContext(),"Undo action",Toast.LENGTH_SHORT).show();  
    }  
});  

snackbar.setActionTextColor(Color.BLUE);  

View snackbarView = snackbar.getView();  
TextView snackbarText = (TextView) snackbarView.findViewById(android.support.design.R.id.snackbar_text);  
snackbarText.setTextColor(Color.YELLOW);  
snackbar.show();

Conclusion

The Android Snackbar provides a versatile way to deliver feedback to users. Its lightweight nature and ability to host interactive actions make it a superior alternative to traditional Toast messages. By understanding the Snackbar’s core principles and learning how to integrate it into your apps, you can significantly improve your application’s user experience.

This guide has covered everything from the basics of the Snackbar widget to its practical implementation in Android applications. However, the Snackbar is just the tip of the iceberg when it comes to Android development. Keep exploring other components and features to continue enhancing your Android development skills.