How To Customize Snackbar In Android

Introduction

Every Android Developer knows about the Snackbar, which is an important component introduced in Material Design. It is similar to Toast used for Android Development. But the Snackbar had provided action callback to perform an action like Click-listeners in Button. In this article, we are going to learn How to Customize the Snackbar.

Coding Part

I have split this part into 3 steps as in the following.

Step 1 - Creating a New Project with Empty Activity.
Step 2 - Setting up the Library.
Step 3 - Implementation of Snackbar in Android.

Step 1 - Creating a New Project with Android Studio

Open Android Studio and select Create a new project.
Name the project as you wish and select your activity template.
Click “Finish” button to create a new project in Android Studio.

Step 2 - Setting up the Firebase Library

In this part, we will see how to set up the library for the project.

Open your App level build.gradle file and add the following lines in dependencies to apply required libraries to your project.
1. dependencies {
2. ...
3. implementation 'com.android.support:appcompat-v7:26.1.0'
4. implementation 'com.android.support.constraint:constraint-layout:1.1.2'
5. implementation 'com.android.support:support-annotations:27.1.1'
6. implementation 'com.android.support:design:26.1.0'
7. }

Then click “Sync Now” to setup your project.

Step 3 - Implementation of Snackbar in Android

Implementation of Default Snackbar
Implementation of Snackbar with an action callback
Snackbar with custom gravity for message text
Snackbar with custom color
Snackbar with custom text color for message and action.
Snackbar with custom typeface for message text and action text.
Implementation of Top Snackbar

Implementation of Default Snackbar

Below is the syntax of a simple Snackbar. The make function accepts three parameters. View, display message and duration of the message to be displayed.
1. Snackbar.make(v, "Normal Snackbar", Snackbar.LENGTH_LONG).show();

Implementation of Snackbar with an action callback

Below is the syntax to display snackbar with action callback,
1. Snackbar.make(v, "Snackbar with Action", Snackbar.LENGTH_LONG)
2. .setAction("UNDO", new View.OnClickListener() {
3. @Override
4. public void onClick(View view) {
5. Snackbar.make(view, "Action!", Snackbar.LENGTH_SHORT).show();
6. }
7. }).setActionTextColor(Color.RED).show();

Snackbar with custom gravity for message text

Below is the syntax to display Snackbar with custom gravity,
1. Snackbar mSnackBar = Snackbar.make(v, "Snackbar with Custom Gravity", Snackbar.LENGTH_LONG);
2. TextView mainTextView = (TextView) (mSnackBar.getView()).findViewById(android.support.design.R.id.snackbar_text);
3. if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR1)
4. mainTextView.setTextAlignment(View.TEXT_ALIGNMENT_CENTER);
5. else
6. mainTextView.setGravity(Gravity.CENTER_HORIZONTAL);
7. mainTextView.setGravity(Gravity.CENTER_HORIZONTAL);
8. mSnackBar.show();

Snackbar with custom color

Below is the syntax to display snackbar with custom color,
1. Snackbar mSnackBar = Snackbar.make(v, "Custom Snackbar", Snackbar.LENGTH_LONG);
2. // To Change Snackbar Color
3. mSnackBar.getView().setBackgroundColor(Color.WHITE);
4. mSnackBar.show();

Snackbar with custom text color for message and action

Below is the syntax to display Snackbar with custom text color,
1. Snackbar mSnackBar = Snackbar.make(v, "Custom Snackbar", Snackbar.LENGTH_LONG);
2. TextView mainTextView = (TextView) (mSnackBar.getView()).findViewById(android.support.design.R.id.snackbar_text);
3. TextView actionTextView = (TextView) (mSnackBar.getView()).findViewById(android.support.design.R.id.snackbar_action);
4. // To Change Text Color for Message and Action
5. mainTextView.setTextColor(Color.BLACK);
6. actionTextView.setTextColor(Color.BLACK);
7. mSnackBar.show();

Snackbar with custom typeface for message text and action text

Below is the syntax to display Snackbar with custom Typeface,
1. Snackbar mSnackBar = Snackbar.make(v, "Custom Snackbar", Snackbar.LENGTH_LONG);
2. TextView mainTextView = (TextView) (mSnackBar.getView()).findViewById(android.support.design.R.id.snackbar_text);
3. TextView actionTextView = (TextView) (mSnackBar.getView()).findViewById(android.support.design.R.id.snackbar_action);
4. // To Apply Custom Fonts for Message and Action
5. Typeface font = Typeface.createFromAsset(getAssets(), "Lato-Regular.ttf");
6. mainTextView.setTypeface(font);
7. actionTextView.setTypeface(font);
8. mSnackBar.show();

Implementation of Top Snackbar

Below is the syntax to display Snackbar from the screen top,
1. Snackbar mSnackBar = Snackbar.make(v, "TOP SNACKBAR", Snackbar.LENGTH_LONG);
2. View view = mSnackBar.getView();
3. FrameLayout.LayoutParams params =(FrameLayout.LayoutParams)view.getLayoutParams();
4. params.gravity = Gravity.TOP;
5. view.setLayoutParams(params);
6. view.setBackgroundColor(Color.RED);
7. TextView mainTextView = (TextView) (view).findViewById(android.support.design.R.id.snackbar_text);
8. mainTextView.setTextColor(Color.WHITE);
9. mSnackBar.show();

For full reference, download the whole source code from the GitHub link.

You can read the same on my blog post. Click here to read my blog post.

Download Code

You can download the full source code of the article in GitHub. If you like this article, do star the repo in GitHub.