Creating Google’s new Snackbar

Tiago Araujo
2 min readMay 23, 2018

--

The new Snackbar

I was taking a look at the material.io to find out some new components from the so called “Material Design 2" and found out that the Snackbar changed, as it no longer takes the entire screen length, but now has a margin around it.

As a lot of others components, I was unable to find the new Snackbar in the alpha version of the Support Library, so I decided I would make it myself.

After struggling a bit, I found out it was very simple.

First, we need to make our round corner background, so let’s add this to our /res/drawable folder:

Great! Now that we have our background, we will need to make some changes in the default snackbar, so it looks exactly as we want it to. I made an helper class to configure all we need. Take a look:

Tip: if you’re using Kotlin, you can create an extension instead of the helper class, like this:

And that’s it! We are ready to use your new Snackbar. Just call it like this in your Activity:

This is what you’ll get:

You can even add an action!

That’s it. Hope this article be a little useful about customizing your snackbar.

--

--