Custom SnackBar a cool feature in the android

Glitch
2 min readJun 24, 2021

What is Snackbar?

A Snackbar is a widget that looks like a small banner that pops up at the bottom of the user’s phone screen. … Android Snackbar is just like a Toast in Android except that it can provide the user with the action button to interact with. You may call the Snackbar a toast widget with an optional action button.

How do I use a snack bar?

This will define the button and add an on-click listener to the button. In the on-click listener, a Snackbar is created and is called. So whenever the button is clicked, the on-click listener creates a snack bar and calls it and the user sees the message. This snack bar contains action and if clicked will show a toast.

Difference between Toast and Snackbar

  1. A Toast message can be customized and printed anywhere on the screen, but a Snackbar can be only shown at the bottom of the screen
  2. A Toast message doesn’t have an action button, but Snackbar may have an action button optionally. Though, A Snackbar shouldn’t have more than one action button
  3. Toast message cannot be off until the time limit finish, but Snackbar can be swiped off before the time limit.

Using Normal Snackbar

To use a Snackbar in your app, all you need to do is have the Material Design dependency in your app. So, add the below dependency in you build.gradle file:

implementation "com.google.android.material:$latest_version"

And then you can use the Snackbar just like a Toast. For example:

Snackbar.make(view, "Show some message here", Snackbar.LENGTH_SHORT).show()

The above code will show a simple message in the Snackbar. Some functions are available with Snackbar. For example:

  • setAction(): This can be used to have some action on the Snackbar. For example, you can use a Snackbar to display a network error message and have an action called Retry.
  • setBackgroundColor(): This can be used to change the background color of the Snackbar.
  • setAnchorView(): By default, the Snackbar appears at the bottom of the screen. But you can change its position with the help of setAnchorView function.

Creating a custom snack bar

/ Create the Snackbar
Snackbar snackbar = Snackbar.make(containerLayout, "", Snackbar.LENGTH_LONG);
// Get the Snackbar's layout view
Snackbar.SnackbarLayout layout = (Snackbar.SnackbarLayout) snackbar.getView();
// Hide the text
TextView textView = (TextView) layout.findViewById(android.support.design.R.id.snackbar_text);
textView.setVisibility(View.INVISIBLE);

// Inflate our custom view
View snackView = mInflater.inflate(R.layout.my_snackbar, null);
// Configure the view
ImageView imageView = (ImageView) snackView.findViewById(R.id.image);
imageView.setImageBitmap(image);
TextView textViewTop = (TextView) snackView.findViewById(R.id.text);
textViewTop.setText(text);
textViewTop.setTextColor(Color.WHITE);

//If the view is not covering the whole snackbar layout, add this line
layout.setPadding(0,0,0,0);

// Add the view to the Snackbar's layout
layout.addView(snackView, 0);
// Show the Snackbar
snackbar.show();

Ta-da!! that’s all. Keep coding!!

--

--