Add margins to Snackbar view

Question

I'm updating my current app to use snackbars, in the Google spec they show various ways of using them http://www.google.com/design/spec/components/snackbars-toasts.html#snackbars-toasts-specs

Example A:

Example B:

Here's my code atm:

Snackbar snackbar = Snackbar.make(mParentLayout, displayMessage,     
    Snackbar.LENGTH_LONG);
    snackbar.setAction(actionMessage, mClickListener);
    snackbar.show();

I get the result in Example B,

How can i add margins?

Solution 1

In addition to Saeid's answer, you can get the default SnackBar layout params and modify them as you want:

public static void displaySnackBarWithBottomMargin(Snackbar snackbar, int sideMargin, int marginBottom) {
    final View snackBarView = snackbar.getView();
    final CoordinatorLayout.LayoutParams params = (CoordinatorLayout.LayoutParams) snackBarView.getLayoutParams();

    params.setMargins(params.leftMargin + sideMargin,
                params.topMargin,
                params.rightMargin + sideMargin,
                params.bottomMargin + marginBottom);

    snackBarView.setLayoutParams(params);
    snackbar.show();
}

Solution 2

None of the above solutions worked for me.

But, I got one trick that we can use with the help of translation.

Snackbar snackbar = Snackbar.make(mActivity.getWindow().getDecorView().getRootView(), message, Snackbar.LENGTH_SHORT);
View snackBarView = snackbar.getView();
snackBarView.setTranslationY(-(convertDpToPixel(48, mActivity)));
snackbar.show();

you can find convertDpToPixel method here

Solution 3

With the Material Components library you can use the snackbarStyle attribute in your app theme:

<style name="AppTheme" parent="Theme.MaterialComponents.DayNight">
    <item name="snackbarStyle">@style/MySnackbar</item>
</style>

with:

<style name="MySnackbar" parent="Widget.MaterialComponents.Snackbar">
    <item name="android:layout_margin">32dp</item>
</style>

Solution 4

I just add my solution because the @BamsMamx solution's didn't work I need to add getChildAt(0)

  public static void displaySnackBarWithBottomMargin(BaseActivity activity, View main) {
   Snackbar snackbar = Snackbar.make(main, R.string.register_contacts_snackbar, Snackbar.LENGTH_SHORT);
    final FrameLayout snackBarView = (FrameLayout) snackbar.getView();

    FrameLayout.LayoutParams params = (FrameLayout.LayoutParams) snackBarView.getChildAt(0).getLayoutParams();
    params.setMargins(params.leftMargin,
                params.topMargin,
                params.rightMargin,
                params.bottomMargin + 100;
    snackBarView.getChildAt(0).setLayoutParams(params);
    snackbar.show();
}

Solution 5

Adding CoordinatorLayout or Frame Layout and then setting margin didn't work for me

To tackle this problem use Drawable Background where use item to set Margin and shape to set desired Padding

container_snackbar.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!--    Set Margin Here -->
    <item
        android:left="20dp"
        android:right="20dp"
        android:bottom="10dp"
        android:top="10dp">

        <!-- Insert your shape here: -->
        <shape android:shape="rectangle"  >
            <solid android:color="#FE4C4C" />

            <!-- Padding for inner text-->
            <padding android:left="25dp" android:right="10dp" android:bottom="10dp" android:top="10dp" />
            <corners android:radius="5dp" />

        </shape>
    </item>
</layer-list>

And then from Activity set that Drawable

MainActivity.java

Snackbar snack = Snackbar
                 .make(activity,"Hello World 🚀",Snackbar.LENGTH_INDEFINITE);
        snack.getView()
        .setBackground(ContextCompat.getDrawable(getApplicationContext(),R.drawable.contianer_snackbar));
        snack.show();

Result

View more solutions

Comments

[lionscribe]

Thanks. Just a small suggestion is to use instead final ViewGroup.MarginLayoutParams params = (ViewGroup.MarginLayoutParams) snackBarView.getLayoutParams(); which will make the code more versatile, as it will work with most layouts.

[Fereshteh Naji]

this code does not work for me, just add a margin with black color

[M.Usman]

@FereshtehNaji you can check out my answer. it works 100%.

[Daniel Gomez Rico]

This answer looks like its the cleaner one but it does not work. do you have to put something in the snackbar in order to load it?

[Hong]

Unfortunately, snackbar.getView().setTranslationY() does not do anything while snackbar.getView().setTranslationX() works as expected in my case.

[Hong]

Thank you. This is the only one that works in my case. I tried others. The right margin does not seem to work, but the bottom margin and left margin work.

[Umang Kothari]

How can you apply this style programmatically to Snackbar?

[Mitul Varmora]

It will be by default applied on every snackbar as the theme is main AppTheme which is default theme on <Application> tag in menifest.

[Naimul Kabir]

It doesn't work. I have tried this before noticing this answer.

[algrid]

@BamsMamx's solution was working, but currently your version is what's working :) I guess they changed something in the Snackbar implementation.

[Paukdcn]

@UmangKothari yes, with help of ContextThemeWrapper. We can create a context with the needed snack Bar style and provide it to SnackBar.make() function. The SnackBar will automatically configure itself. More info is here: ataulm.com/2019/11/20/using-context-theme-wrapper.html

[lostintranslation]

This has no effect for me either.

[mazend]

layout_marginStart, layout_marginLeft, layout_marginHorizontal and etc not working. It seems only layout_margin working.