How to make customizable Snackbar in android

In this blog,

We ‘ll discuss the UX concept which is introduced in Android 5.0 material design called Snackbar. Which is inspired from the Toast widget of android.

You can call it as a toast message with an action button. SnackBar will be displayed at the bottom or bottom left for a larger device It can be swiped off in order to dismiss them if passing CoordinatorLayout as view param of SnackBar.

How to make simple Snackbar

Below is the syntax of a simple snackbar.

Snackbar.make(coordinatorLayout, "This is my Snackbar", Snackbar.LENGTH_LONG).show();

1	Snackbar.make(coordinatorLayout, "This is my Snackbar", Snackbar.LENGTH_LONG).show();

The make function accepts three parameters. View, display message and duration of the message to be displayed.

View: Find a parent view to hold Snackbar’s view from the value given to view(in this case our coordinatorLayout).

The duration should be LENGTH_SHORT, LENGTH_LONG or LENGTH_INDEFINITE. When LENGTH_INDEFINITE is used, the snackbar will be displayed indefinite time and can be dismissed with swipe off.

And you can set the duration of your snackbar by setDuration(int) method.

Snackbar.make(coordinatorLayout, "This is my Snackbar", Snackbar.LENGTH_LONG).setDuration(30000)
.show();

1 2	Snackbar.make(coordinatorLayout, "This is my Snackbar", Snackbar.LENGTH_LONG).setDuration(30000) .show();

How to make Snackbar with Action Callback

We can also set a callback interaction method using setAction() method.

Snackbar mySnackbar = Snackbar.make(coordinatorLayout, "Check your connection", Snackbar.LENGTH_LONG)
.setAction("Retry", new View.OnClickListener() {
            @Override
            public void onClick(View view) {

                //do what ever you want

            }
        });
 
mySnackbar.show();

Snackbar mySnackbar = Snackbar.make(coordinatorLayout, "Check your connection", Snackbar.LENGTH_LONG)

.setAction("Retry", new View.OnClickListener() {

@Override

public void onClick(View view) {

//do what ever you want

}

});

mySnackbar.show();

In above example, There is a snackbar with retry action callback method.

How to make our custom Snackbar

Snackbar’s default text color is white and in android 5.0 or above it takes the primary color automaticlly. And #323232 background color. But we can customize that things.

Snackbar snackbar = Snackbar
        .make(coordinatorLayout, "Check your connection", Snackbar.LENGTH_LONG)
        .setAction("Retry", new View.OnClickListener() {
            @Override
            public void onClick(View view) {

            }
        });

// Change the action button text color 
snackbar.setActionTextColor(Color.GREEN);
 
// Change the text message color
View mySbView = snackbar.getView();
TextView textView = (TextView) mySbView.findViewById(android.support.design.R.id.snackbar_text);

// We can apply the property of TextView
textView.setTextColor(Color.BLUE);

snackbar.show();

Snackbar snackbar = Snackbar

.make(coordinatorLayout, "Check your connection", Snackbar.LENGTH_LONG)

.setAction("Retry", new View.OnClickListener() {

@Override

public void onClick(View view) {

}

});

// Change the action button text color

snackbar.setActionTextColor(Color.GREEN);

// Change the text message color

View mySbView = snackbar.getView();

TextView textView = (TextView) mySbView.findViewById(android.support.design.R.id.snackbar_text);

// We can apply the property of TextView

textView.setTextColor(Color.BLUE);

snackbar.show();

In above example, We set the actionbar color to GREEN and text color to BLUE.

Aman Gupta 29 October 2021

. . .

How to make customizable Snackbar in android

How to make simple Snackbar

How to make Snackbar with Action Callback

How to make our custom Snackbar

Leave a Comment Cancel Reply

Message Sent!