How To create Beautiful Material Design Custom snackbar in Android

Before we start building great custom snackbars let's first talk about what is snackbars and when we should use them.

What Is Snackbars? 

Snackbar is an Android widget. snackbar was added in android API level 7. 

snackbars provide feedback about an operation. they show at the bottom of the screen on mobile and bottom left on large devices. snackbars display above all other elements and can display one at a time. 

When to use snackbars?

Most commonly we used Toast in android to display feedback to users. but in the android Toast widget, we cannot add any clickable action button so that time Snackbars help us a lot. Most Commonly we add UNDO and REDO Buttons in snackbar. we can also create sncakbars without an action button.

 

If You Need Our Free Firebase Based android e-commerce app source code, click here. Note Admin panel for this app is paid.

CUSTOM SNCAKBAR IN ANDROID

have a look at the below image and get an idea of how custom snackbar are different from regular snackbar. you will see huge differences in regular and custom snackbar.  so without wasting any time let's start building Material design custom snackbars. 

   

Step 1  Create a Custom Layout file for Snackbar.

The first step is to create a custom layout file for our custom snackbar. below you can see I provide you XML layout file code. we have used two textview , one image view, and one action button you can customize it as per your own requirements. our custom snackbar design will look like the below image.

custom_snackbar_layout.xml

 

Step 2: create a void type method for custom snackbar 

In this step, you just need to create a separate method for snackbar in which we will write all code related to the snackbar, and then we will just call that method wherever we want to show that custom snackbar. the best practice is to create a separate class for snackbar and write code there related to snackbar. and in snackbar class, you can create multiple methods for different designs of snackbars. you know in one android project we need different design of snackbars for example if we want to show just a success message in snackbar then we will just use a check icon and one text view and that snackbar. The second scenario can be where we want to show the user that the product has added to the cart so that time we can add undo button in snackbar.

CustomSnackBar Method Code

 private void customSnackBar() {
      View parent_view = findViewById(android.R.id.content);
    //optional can use android.R.id.content as parent view
     View parent_view_2 = findViewById(R.id.parent_view_activity_or_fragment);
     // root view of activity or fragment

        final Snackbar snackbar = Snackbar.make(parent_view, "", Snackbar.LENGTH_LONG);
        //inflate view
        View custom_view = getLayoutInflater().inflate(R.layout.custom_snackbar_layout, null);

        snackbar.getView().setBackgroundColor(Color.TRANSPARENT);
        Snackbar.SnackbarLayout snackBarView = (Snackbar.SnackbarLayout) snackbar.getView();
        snackBarView.setPadding(0, 0, 0, 0);
        (custom_view.findViewById(R.id.tv_undo)).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                snackbar.dismiss();
                Toast.makeText(getApplicationContext(), "UNDO clicked!", Toast.LENGTH_SHORT).show();
            }
        });

        snackBarView.addView(custom_view, 0);
        snackbar.show();
    }

CustomSnackBar Method Details.

To create snackbar object we need to pass parent/root view to snackbar so as you can see in the above method we passed the activity root view to this snackbar and created an object of snack bar without any text.

next, we have used layout inflater to inflate our custom snackbar XML layout view.  we are creating a custom snackbar so we have removed the original background of snackbar by setting snackbar background as transparent. 

next, we set click listener on undo button of snackbar, and at the end, we have added snackbar custom view to snackBarView object and we called show method.

this way you can create different style of custom android snackbar. 

Different Design of Custom Snackbars Sample Code.

now I am going to share with you the source code of most commonly used custom snackbars.

1-Example: Snackbar with the action button and custom background.

java code.

 Snackbar snackbar = Snackbar.make(parent_view, "Custom Snackbar Text", Snackbar.LENGTH_LONG)
                .setAction("UNDO", new View.OnClickListener() {
                    @Override
                    public void onClick(View view) {
                        Snackbar sb = Snackbar.make(parent_view, "UNDO Clicked", Snackbar.LENGTH_SHORT);
                        sb.getView().setBackgroundColor(ContextCompat.getColor(getApplicationContext(), R.color.colorAccent));
                        sb.setActionTextColor(Color.WHITE);
                        sb.show();
                    }
                });
        snackbar.getView().setBackgroundColor(ContextCompat.getColor(getApplicationContext(), R.color.colorAccent));
        snackbar.setActionTextColor(Color.WHITE);
        snackbar.show();

2-Example: Snackbar text in the center.

        Snackbar mSnackBar = Snackbar.make(parent_view, "Snackbar Text In Center", Snackbar.LENGTH_LONG);
                TextView mainTextView = (TextView) (mSnackBar.getView()).findViewById(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();
        

3-Example: Snackbar with left icon and text

This is the most commonly used snackbar design. we create a warning , success, or info type snackbar by using the below code just we need to change the background color of the snackbar and icon.

custom layout XML file code.

java code.

    final Snackbar snackbar = Snackbar.make(parent_view, "", Snackbar.LENGTH_SHORT);
        //inflate view
        View custom_view = getLayoutInflater().inflate(R.layout.snackbar_icon_plus_text, null);

        snackbar.getView().setBackgroundColor(Color.TRANSPARENT);
        Snackbar.SnackbarLayout snackBarView = (Snackbar.SnackbarLayout) snackbar.getView();
        snackBarView.setPadding(0, 0, 0, 0);

        ((TextView) custom_view.findViewById(R.id.text)).setText("Success");
        ((ImageView) custom_view.findViewById(R.id.icon)).setImageResource(R.drawable.checked);
        (custom_view.findViewById(R.id.parent_view)).setBackgroundColor(getResources().getColor(R.color.green));
        snackBarView.addView(custom_view, 0);
        snackbar.show();

I hope now you understand how we can create custom snackbars in android if you still have any questions you can ask me in the comment below I will be happy to help you. thank you!

B2B