How To Customize Snackbar In Android

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 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 your wish and select your activity template.

    Customize Snackbar In Android

  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.
    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. }  
  1. 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.
    1. Snackbar.make(v, "Normal Snackbar", Snackbar.LENGTH_LONG).show();  
    Customize Snackbar In Android
  1. 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();  
    Customize Snackbar In Android
  1. 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();  
    Customize Snackbar In Android
  1. 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();  
  1. 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();  
  1. 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();  
    Customize Snackbar In Android
  1. 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();  
    Customize Snackbar In Android

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.