How do you implement the snackbar that has the button at the bottom?

Question

On the material design specs there is a snackbar that has the button at the bottom. How do you implement that?

Here is the image from the spec. I'm talking about the last one.

Balm

You can't with the default Snackbar. However you can create your own with a custom layout: https://mcmap.net/q/183568/-how-to-customize-snackbar-39-s-layout – Pentheus

Answer 1

Android resizes the text of description automatically but it can not resize the text of ActionButton, so, if the text of button increases, Android will make that type of layout itself.

Here is the simple example ->

Snackbar snackbar = Snackbar
        .make(mainLayout, "Confirm delete?", Snackbar.LENGTH_LONG)
        .setAction("YES", new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar mSnackbar = Snackbar.make(mainLayout, "Message successfully deleted.", Snackbar.LENGTH_SHORT);
                mSnackbar.show();
            }
        });
 
snackbar.show();

Aristotle

If I add a really long message and a button about as long as yours, I get the third example on the image I added, not the fourth. – Balm

Helpful answer!! – Apeman

Answer 2

I've written a library that do just that. It also includes queue system. Try it out https://github.com/tingyik90/snackprogressbar.

It puts the action into next line if the button width is more than 25% of total width of the screen. You can modify my code by yourself if you need to. It is under SnackProgressBarLayout.java.

Stephaniestephannie

Answer 3

The answer on this link helped me to solve the issue.

https://mcmap.net/q/744477/-how-to-make-that-the-snackbar-action-button-be-shown-in-a-different-line-if-the-text-is-long

I'm going to copy the solution here in case the link is gone:

        <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
            <item name="colorPrimary">@color/colorPrimary</item>
            <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
            <item name="colorAccent">@color/colorAccent</item>
            <!-- Add this line -->
            <item name="maxActionInlineWidth">@dimen/design_snackbar_action_inline_max_width</item>
        </style>

Rattlebox