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

1. Open Android Studio and select Create a new project.
2. Name the project as you wish and select your activity template.
    
    
3. 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.

1. Open your App level build.gradle file and add the following lines in dependencies to apply required libraries to your project.

   dependencies {
       ...
       implementation 'com.android.support:appcompat-v7:26.1.0'
       implementation 'com.android.support.constraint:constraint-layout:1.1.2'
       implementation 'com.android.support:support-annotations:27.1.1'
       implementation 'com.android.support:design:26.1.0'
   }

2. Then click “Sync Now” to setup your project.

Step 3 - Implementation of Snackbar in Android

1. Implementation of Default Snackbar
2. Implementation of Snackbar with an action callback
3. Snackbar with custom gravity for message text
4. Snackbar with custom color
5. Snackbar with custom text color for message and action.
6. Snackbar with custom typeface for message text and action text.
7. Implementation of Top Snackbar

1. 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.

   Snackbar.make(v, "Normal Snackbar", Snackbar.LENGTH_LONG).show();

2. Implementation of Snackbar with an action callback
    
   Below is the syntax to display snackbar with action callback,

   Snackbar.make(v, "Snackbar with Action", Snackbar.LENGTH_LONG)
   .setAction("UNDO", new View.OnClickListener() {
           @Override
           public void onClick(View view) {
                  Snackbar.make(view, "Action!", Snackbar.LENGTH_SHORT).show();
           }
   }).setActionTextColor(Color.RED).show();

3. Snackbar with custom gravity for message text
    
   Below is the syntax to display Snackbar with custom gravity,

   Snackbar mSnackBar = Snackbar.make(v, "Snackbar with Custom Gravity", Snackbar.LENGTH_LONG);
   TextView mainTextView = (TextView) (mSnackBar.getView()).findViewById(android.support.design.R.id.snackbar_text);
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR1)
       mainTextView.setTextAlignment(View.TEXT_ALIGNMENT_CENTER);
    else
       mainTextView.setGravity(Gravity.CENTER_HORIZONTAL);
   mainTextView.setGravity(Gravity.CENTER_HORIZONTAL);
   mSnackBar.show();

4. Snackbar with custom color
    
   Below is the syntax to display snackbar with custom color,

   Snackbar mSnackBar = Snackbar.make(v, "Custom Snackbar", Snackbar.LENGTH_LONG);
   // To Change Snackbar Color
   mSnackBar.getView().setBackgroundColor(Color.WHITE);
   mSnackBar.show();

5. Snackbar with custom text color for message and action
    
   Below is the syntax to display Snackbar with custom text color,

   Snackbar mSnackBar = Snackbar.make(v, "Custom Snackbar", Snackbar.LENGTH_LONG);
   TextView mainTextView = (TextView) (mSnackBar.getView()).findViewById(android.support.design.R.id.snackbar_text);
   TextView actionTextView = (TextView) (mSnackBar.getView()).findViewById(android.support.design.R.id.snackbar_action);
   // To Change Text Color for Message and Action
   mainTextView.setTextColor(Color.BLACK);
   actionTextView.setTextColor(Color.BLACK);
   mSnackBar.show();

6. Snackbar with custom typeface for message text and action text
    
   Below is the syntax to display Snackbar with custom Typeface,

   Snackbar mSnackBar = Snackbar.make(v, "Custom Snackbar", Snackbar.LENGTH_LONG);
   TextView mainTextView = (TextView) (mSnackBar.getView()).findViewById(android.support.design.R.id.snackbar_text);
   TextView actionTextView = (TextView) (mSnackBar.getView()).findViewById(android.support.design.R.id.snackbar_action);
   // To Apply Custom Fonts for Message and Action
   Typeface font = Typeface.createFromAsset(getAssets(), "Lato-Regular.ttf");
   mainTextView.setTypeface(font);
   actionTextView.setTypeface(font);
   mSnackBar.show();

7. Implementation of Top Snackbar
    
   Below is the syntax to display Snackbar from the screen top,

   Snackbar mSnackBar = Snackbar.make(v, "TOP SNACKBAR", Snackbar.LENGTH_LONG);
   View view = mSnackBar.getView();
   FrameLayout.LayoutParams params =(FrameLayout.LayoutParams)view.getLayoutParams();
   params.gravity = Gravity.TOP;
   view.setLayoutParams(params);
   view.setBackgroundColor(Color.RED);
   TextView mainTextView = (TextView) (view).findViewById(android.support.design.R.id.snackbar_text);
   mainTextView.setTextColor(Color.WHITE);
   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.