How to change background color of the snackbar?

Question

I am showing snackbar in a DialogFragment within the positive touch of the alert dialog. Here is my code snippet:

Snackbar snackbar = Snackbar.make(view, "Please enter customer name", Snackbar.LENGTH_LONG)
                .setAction("Action", null);
View sbView = snackbar.getView();
sbView.setBackgroundColor(Color.BLACK);
snackbar.show();

I am passing the view of the DialogFragment to the snackbar. I want the background color to be black. How can I do this? I am returning the alertDialog in the DialogFragment. And the theme I am setting to the dialog as follow's:

<style name="MyAlertDialogStyle" parent="Theme.AppCompat.Light.Dialog.Alert">

    <!-- Used for the buttons -->
    <item name="colorAccent">@color/accent</item>
    <!-- Used for the title and text -->
    <item name="android:textColorPrimary">@color/primary</item>
    <!-- Used for the background -->
    <item name="android:background">@color/white</item>
</style>

Although I am setting the background color to white for the dialog, it should override by setting the background color to the snackbar.

Solution 1

Try setting background color like this:

sbView.setBackgroundColor(ContextCompat.getColor(getActivity(), R.color.BLACK));

It will work 100% !

Solution 2

you can do it like this

Snackbar snackbar;
snackbar = Snackbar.make(view, "Message", Snackbar.LENGTH_SHORT);
View snackBarView = snackbar.getView();
snackBarView.setBackgroundColor(yourColor);
TextView textView = (TextView) snackBarView.findViewById(android.support.design.R.id.snackbar_text);
textView.setTextColor(textColor);
snackbar.show();

Solution 3

As none of the other answers provided a custom style override (that I consider one of the safest update way to do that) I post here my solution.

I post a solution that already address the new AndroidX (support design 28) theme.

Provided that your application use a custom them called MyAppTheme in your AndroidManifest.xml:

<application
        android:name=".MyApplicationName"
        android:allowBackup="true"
        android:icon="@mipmap/icon"
        android:roundIcon="@mipmap/icon_round"
        android:label="@string/app_name"
        android:theme="@style/MyAppTheme">

Create (if you haven't already) values/style.xml file overriding the theme used by your application:

<style name="MyAppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
    <item name="colorPrimary">@color/myColorPrimary</item>
    <item name="colorPrimaryDark">@color/myColorPrimaryDark</item>
    <item name="colorAccent">@color/myColorAccent</item>
    <item name="snackbarStyle">@style/MySnackBarStyle</item>
</style>

<!-- snackbar style in res/values -->
<style name="MySnackBarStyle" parent="Widget.MaterialComponents.Snackbar">
    <item name="android:background">@color/mySnackbarBackgroundColor</item>
</style>

and provide your colors in your values/colors.xml file

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="myColorPrimary">#008577</color>
    <color name="myColorPrimaryDark">#00574B</color>
    <color name="myColorAccent">#D81B60</color>
    <color name="mySnackbarBackgroundColor">#D81B60</color>
</resources>

UPDATE 2020

As the above solution removes the round corner of the snacker bacause setting the background this way uses the legacy snackbar design, if you want to preserve the material design you can.

1. If you are targeting API 21+

replace android:background with android:backgroundTint

<!-- snackbar style in res/values-21/ -->
<style name="MySnackBarStyle" parent="Widget.MaterialComponents.Snackbar">
    <item name="android:backgroundTint">@color/mySnackbarBackgroundColor</item>
</style>

2. If you are targeting API < 21 then if you decide to use legacy snackbar for API < 21 you could set your abouve MySnackbarStyle in res/values-21/ folder and leave the previous — legacy — style in your res/values folder.

3. If you are targeting API < 21 and you want to have the material style of the snackbar also in this lower API levels you can change your snackbar style in your res/values/ this way:

<!-- snackbar style in res/values/ -->
<style name="MySnackBarStyle" parent="Widget.MaterialComponents.Snackbar">
    <item name="android:background">@drawable/my_snackbar_background</item>
</style>

and borrow your my_snackbar_background from the official repo, this way:

<!-- in res/drawable/ -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="4dp"/>
    <solid android:color="@color/mySnackbarBackgroundColor"/>
</shape>

EDIT 2022:

If you only want to change a single snackbar, and not across the app, then you can use a ContextThemeWrapper as following;

ContextThemeWrapper ctw = new ContextThemeWrapper(this, R.style.CustomSnackbarTheme);
customSnackBar = Snackbar.make(ctw, view, "", Snackbar.LENGTH_LONG);

and in your style file

<style name="CustomSnackbarTheme">
    <item name="snackbarStyle">@style/MySnackBarStyle</item>
</style>

<style name="MySnackBarStyle" parent="Widget.MaterialComponents.Snackbar">
    <item name="android:background">@android:color/red</item>
</style>

Here is a playground repo.

Solution 4

Kotlin version (with an extension) :

Create in a file (for exemple SnackbarExtension.kt) an extension :

fun Snackbar.withColor(@ColorInt colorInt: Int): Snackbar{
   this.view.setBackgroundColor(colorInt)
   return this
}

Next, in your Activity/Fragment, you'll be able to do this :

Snackbar
  .make(coordinatorLayout, message, Snackbar.LENGTH_LONG)
  .withColor(YOUR_COLOR)
  .show()

Solution 5

If you want to define a background color for all your Snackbars, just override the design_snackbar_background_color value somewhere in your resources. For example:

<color name="design_snackbar_background_color" tools:override="true">@color/colorPrimaryLight</color>

View more solutions

Comments

[M D]

http://www.technotalkative.com/part-3-styling-snackbar/

[Ajinkya]

tried that already not helping me...i am calling snack bar from the dialog fragment + alertDialog in it and i am passing positive button click view to the snackbar

[Ajinkya]

as u can see i did exactly same thing but it not showing in black color

[Zubair Akber]

i have use the same in one of my project, try to display it in activity for testing, may be it is not working due to dialog

[Ajinkya]

ya its working on activity but i want it on the dialog fragment.

[Zubair Akber]

i think it is because of your view that you are passing to it

[Jason John]

you may need to do snackBarView.getView().setBackgrondColor(ContextCompat.getCo‌​lor(getActivity(), R.color.BLACK));

[Gökhan Mete ERTÜRK]

If you found this page from Google and above solution didn't work for you, you may need to try this one instead: sbView.setBackgroundColor(getResources().getColor(R.color.BL‌​ACK))

[Edric]

@modu Note that getResources#getColor has been deprecated since API level 23 (Marshmallow) and ContextCompat#getColor should be used instead.

[willcwf]

Really like this answer, I added the text colouring as well: fun Snackbar.withColor(@ColorInt backgroundColor: Int, @ColorInt textColor: Int) : Snackbar { this.view.setBackgroundColor(backgroundColor) this.view.findViewById<TextView>(android.support.design.R.id‌​.snackbar_text).setT‌​extColor(textColor) return this }

[AloDev]

This solution is cleanest and nice. Thanks!

[A P]

Works great, just stick this in colors.xml and you are set!

[Johann]

Nope. Didn't work for me. Neither did any of the other solutions.

[TrackDave]

This is the cleanest and best solution

[William]

It's change the size of the snakbar

[A.Mamode]

Note that your AppTheme must inherits from Theme.MaterialComponents to compile

[CoolMind]

Thanks for my_snackbar_background. Without it Snackbar drew with rounder corners.

[CoolMind]

I added a bit more styling in stackoverflow.com/a/62006413/2914140.

[Cfun]

+1 for Xamarin View snckView = snackbarview.View; instead of snackbar.getView(); which is not available but ParseColor is not working.

[SATYAJEET RANJAN]

@Cfun Can you explain your problem a bit more, so that i can help you with it.

[Cfun]

My bad I used System.Drawing.Color.ParseColor instead of Android.Graphics.Color.ParseColor. now I have: "the name 'getstring' does not exist in the current context"

[SATYAJEET RANJAN]

@Cfun Are you getting this error in an activity or a fragment or you are calling the getString() in some other class?

[Cfun]

I am calling it in some other Class.

[SATYAJEET RANJAN]

@Cfun then make sure you are also passing the fragment's context or activity context or you can also try application context to to your other class and then do context.getString() it should work!

[SATYAJEET RANJAN]

Let us continue this discussion in chat.

[Cristan]

Note that the action button text has an alpha by default. If you don't want this, you can set actionTextColorAlpha in MySnackBarStyle to 1.

[Abu Nayem]

this is the best solution

[Kishan Solanki]

what's new in your answer other than the given solutions?

[Vaios]

@KishanSolanki You can use the this instead