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.

[http://www.technotalkative.com/part-3-styling-snackbar/](http://www.technotalkative.com/part-3-styling-snackbar/) — M D, Dec 01 '15 at 12:52
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, Dec 01 '15 at 15:21

score 195 · Accepted Answer · edited Feb 21 '17 at 19:55

195

Try setting background color like this:

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

It will work 100% !

edited Feb 21 '17 at 19:55

Imdad

683
1
9
27

answered Feb 28 '16 at 17:42

Dusan Dimitrijevic

3,169
6
22
46

58

you may need to do `snackBarView.getView().setBackgrondColor(ContextCompat.getColor(getActivity(), R.color.BLACK));` – Jason John May 06 '16 at 14:41
3

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.BLACK))` – Gökhan Mete ERTÜRK Dec 19 '17 at 13:24
@modu Note that `getResources#getColor` has been deprecated since API level 23 (Marshmallow) and `ContextCompat#getColor` should be used instead. – Edric Apr 09 '18 at 01:50

score 94 · Answer 2 · answered Dec 01 '15 at 12:54

94

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();

answered Dec 01 '15 at 12:54

Zubair Akber

2,760
13
30

1

as u can see i did exactly same thing but it not showing in black color – Ajinkya Dec 01 '15 at 13:31
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 – Zubair Akber Dec 01 '15 at 16:24
ya its working on activity but i want it on the dialog fragment. – Ajinkya Dec 01 '15 at 16:49
i think it is because of your view that you are passing to it – Zubair Akber Dec 01 '15 at 17:07

score 37 · Answer 3 · edited May 23 '22 at 18:33

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.

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>

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.
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.

Note that your AppTheme must inherits from Theme.MaterialComponents to compile — A.Mamode, Apr 08 '20 at 19:29
Thanks for `my_snackbar_background`. Without it Snackbar drew with rounder corners. — CoolMind, May 25 '20 at 15:55
I added a bit more styling in https://stackoverflow.com/a/62006413/2914140. — CoolMind, May 26 '20 at 08:35
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. — Cristan, Nov 13 '20 at 09:49

score 25 · Answer 4 · edited Jun 29 '18 at 11:48

25

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()

edited Jun 29 '18 at 11:48

Jemshit

9,501
5
69
106

answered May 02 '18 at 10:41

Phil

4,730
1
41
39

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(android.support.design.R.id.snackbar_text).setTextColor(textColor) return this } – willcwf Aug 27 '18 at 17:06

score 21 · Answer 5 · answered Apr 21 '18 at 14:58

21

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>

answered Apr 21 '18 at 14:58

4emodan

955
1
9
17

This solution is cleanest and nice. Thanks! – AloDev Oct 10 '18 at 08:48
1

Works great, just stick this in colors.xml and you are set! – A P Oct 21 '18 at 17:19
Nope. Didn't work for me. Neither did any of the other solutions. – Johann Jun 28 '19 at 09:15

Gabriele Mariotti · Answer 6 · 2021-08-18T06:17:45.937

With the Material Components Library just use the setBackgroundTint method.

    Snackbar snackbar = Snackbar.make(view, "Snackbar custom style", Snackbar.LENGTH_LONG);
    snackbar.setBackgroundTint(ContextCompat.getColor(this,R.color.secondaryColor));
    snackbar.show();

With Jetpack Compose you can customize the SnackbarHost defining a custom Snackbar

    snackbarHost = {
        // reuse default SnackbarHost to have default animation and timing handling
        SnackbarHost(it) { data ->
            Snackbar(
                snackbarData = data,
                backgroundColor = Color.Red
            )
        }
    },

Then just use it:

scope.launch {scaffoldState.snackbarHostState.showSnackbar("Snackbar text")}

score 16 · Answer 7 · answered Sep 13 '16 at 11:25

Bellow code is useful for change the text color of message.

Snackbar snackbar = Snackbar.make(rootView, "Enter Your Message",Snackbar.LENGTH_SHORT);
View view = snackbar.getView();
TextView tv = (TextView)view.findViewById(android.support.design.R.id.snackbar_text);
tv.setTextColor(Color.RED);
snackbar.show();

Second Way: You can change color by changing theme of activity also.

score 7 · Answer 8 · answered Oct 28 '17 at 23:05

It's too late but In case someone still needs help. Here is the working solution.

      Snackbar snackbar = Snackbar.make(mainView, text, Snackbar.LENGTH_LONG);
    View snackBarView = snackbar.getView();
    snackBarView.setBackgroundColor(context.getResources().getColor(R.color.btn_background_color));
    snackbar.show();

score 4 · Answer 9 · answered Nov 06 '16 at 03:16

I made a little utils class so I can easily make custom colored snackbars thru out the app.

package com.yourapppackage.yourapp;

import android.support.design.widget.Snackbar;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;

public class SnackbarUtils {

    private int BACKGROUND_COLOR;
    private int TEXT_COLOR;
    private int BUTTON_COLOR;
    private String TEXT;


    public SnackbarUtils(String aText, int aBgColor, int aTextColor, int aButtonColor){
        this.TEXT = aText;
        this.BACKGROUND_COLOR = aBgColor;
        this.TEXT_COLOR = aTextColor;
        this.BUTTON_COLOR = aButtonColor;
    }

    public Snackbar snackieBar(){
        Snackbar snackie = Snackbar.make(MainActivity.getInstance().findViewById(android.R.id.content), TEXT, Snackbar.LENGTH_LONG);
        View snackView = snackie.getView();
        TextView snackViewText = (TextView) snackView.findViewById(android.support.design.R.id.snackbar_text);
        Button snackViewButton = (Button) snackView.findViewById(android.support.design.R.id.snackbar_action);
        snackView.setBackgroundColor(BACKGROUND_COLOR);
        snackViewText.setTextColor(TEXT_COLOR);
        snackViewButton.setTextColor(BUTTON_COLOR);
        return snackie;
    }
}

then to use it, like this any where in the app:

new SnackbarUtils("This is the text displayed", Color.RED, Color.BLACK, Color.YELLOW).snackieBar().setAction("OTAY", v -> { 
     //donothing
     }).show();

score 4 · Answer 10 · answered Nov 17 '18 at 03:58

4

While Working with xamarin android I found out that ContextCompat.GetColor() returns Int but the setBackgroundColor() expects a Parameter of type Color. So here is how I got it working in my xamarin android project.

Snackbar snackbarview =  Snackbar.Make(toolbar, message, Snackbar.LengthLong);
View snckView = snackbarview.View;                
snckView.SetBackgroundColor(Color.ParseColor(GetString(Resource.Color.colorPrimary)));
snackbarview.Show();

answered Nov 17 '18 at 03:58

SATYAJEET RANJAN

141
3
7

+1 for Xamarin `View snckView = snackbarview.View;` instead of `snackbar.getView();` which is not available but `ParseColor` is not working. – Cfun Aug 15 '20 at 18:33
@Cfun Can you explain your problem a bit more, so that i can help you with it. – SATYAJEET RANJAN Aug 16 '20 at 12:02
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" – Cfun Aug 16 '20 at 13:21
@Cfun Are you getting this error in an activity or a fragment or you are calling the getString() in some other class? – SATYAJEET RANJAN Aug 16 '20 at 15:26
I am calling it in some other Class. – Cfun Aug 16 '20 at 16:08
@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 Aug 16 '20 at 16:44
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/219914/discussion-between-satyajeet-ranjan-and-cfun). – SATYAJEET RANJAN Aug 16 '20 at 16:53

score 2 · Answer 11 · answered Nov 21 '16 at 02:53

Put it in an Utility class:

public class Utility {
    public static void showSnackBar(Context context, View view, String text) {
        Snackbar sb = Snackbar.make(view, text, Snackbar.LENGTH_SHORT);
        sb.getView().setBackgroundColor(ContextCompat.getColor(context, R.color.colorAccent));
        sb.show();
    }
}

Using like this:

Utility.showSnackBar(getApplicationContext(), findViewById(android.R.id.content), "Add success!!!");

score 2 · Answer 12 · answered Oct 18 '22 at 17:48

2

Old format using Java

mySnackbar.setBackgroundColor(ContextCompat.getColor(getActivity(), android.R.color.black));

Actualy format using kt

mySnackbar.setBackgroundTint(ContextCompat.getColor(applicationContext, android.R.color.black));

answered Oct 18 '22 at 17:48

Yahyr Paredes Arteaga

21
3

score 1 · Answer 13 · answered Dec 19 '18 at 13:05

None of other solutions really worked for me. If I only set Snackbar's background color, the layout under TextView and Button was in default color. If I set TextView's background it did a little blink after SnackBar was shown. And layout around button was still in default color.

At the end I found out that the best way for me is to change background color of TextView's parent (SnackbarContentLayout). Now whole Snackbar is colored properly and it doesn't blink when it shows up.

snack = Snackbar.make(view, text, duration)
View view = snack.getView();
view.setBackgroundColor(BACKGROUND_COLOR);
TextView tv = view.findViewById(android.support.design.R.id.snackbar_text);
tv.setTextColor(TEXT_COLOR);
((SnackbarContentLayout) tv.getParent()).setBackgroundColor(BACKGROUND_COLOR);

score 1 · Answer 14 · answered Apr 04 '19 at 07:44

1

setBackgroundResource() works just as well.

Snackbar snackbar = Snackbar.make(view, text, Snackbar.LENGTH_LONG);
View sbView = snackbar.getView();
sbView.setBackgroundResource(R.color.background);
snackbar.show();

answered Apr 04 '19 at 07:44

Maksim Ivanov

3,991
31
25

Vaios · Answer 15 · 2021-02-09T09:20:53.053

1

Basically, the solutions that were provided have one disadvantage. They change the shape of snackbar and remove the radius.

Personally, prefer something like that

val snackbar = Snackbar.make(view, text, Snackbar.LENGTH_LONG);
val view = snackbar.getView();
val color = view.resources.getColor(colorId)
view.background.colorFilter = PorterDuffColorFilter(color, PorterDuff.Mode.SRC_ATOP)

edited Feb 09 '21 at 09:20

answered Jun 28 '19 at 20:20

Vaios

517
6
14

@KishanSolanki You can use the [this](https://developer.android.com/reference/android/graphics/drawable/Drawable#setColorFilter(android.graphics.ColorFilter)) instead – Vaios Feb 09 '21 at 09:24

score 1 · Answer 16 · answered Jul 06 '20 at 05:29

I don't know why setBackgroundColor() didn't find in my project. That's why I created an extension function and it's fine now.

fun View.showSnackBar(message: String) {
    val snackBar = Snackbar.make(this, message, Snackbar.LENGTH_LONG)
    snackBar.setBackgroundTint(ContextCompat.getColor(this.context, R.color.colorAccent))
    snackBar.show()
}

and call it like bellow

activity_login.xml

<?xml version="1.0" encoding="utf-8"?>

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/login_holder_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

   // your UI

</FrameLayout>

LoginActivity.kt

login_holder_layout.showSnackBar("Invalid Email")

score 1 · Answer 17 · edited Sep 08 '21 at 09:59

1

For Kotlin:

Snackbar.make(view,"simple text",Snackbar.LENGTH_SHORT).setBackgroundTint(Color.RED).show()

edited Sep 08 '21 at 09:59

Riccardo

1,083
2
15
25

answered Sep 07 '21 at 16:36

Hasan Sürer

11
2

score 1 · Answer 18 · answered Jul 13 '23 at 16:00

July 2023 : Kotin Working Code Example

private fun showSnackBar(message: String) {
    rootView?.let {
        val snackBar = Snackbar.make(it, message, Snackbar.LENGTH_INDEFINITE).apply {
            setAction("Reload") {}
            view.setBackgroundColor(ContextCompat.getColor(it.context, R.color.yellow))
            show()
        }
    }
}

score 0 · Answer 19 · answered Mar 15 '17 at 02:43

public class CustomBar {

public static void show(View view, String message, boolean isLong) {
    Snackbar s = Snackbar.make(view, message, isLong ? Snackbar.LENGTH_LONG : Snackbar.LENGTH_SHORT);
    s.getView().setBackgroundColor(ContextCompat.getColor(view.getContext(), R.color.red_900));
    s.show();
}

public static void show(View view, @StringRes int message, boolean isLong) {
    Snackbar s = Snackbar.make(view, message, isLong ? Snackbar.LENGTH_LONG : Snackbar.LENGTH_SHORT);
    s.getView().setBackgroundColor(ContextCompat.getColor(view.getContext(), R.color.red_900));
    s.show();
}

}

score 0 · Answer 20 · answered Mar 23 '23 at 14:59

If you use Material 3 Theme

<style name="ApplicationTheme" parent="Theme.Material3.Dark.NoActionBar">
    <item name="snackbarStyle">@style/SnackbarStyle</item>
    <item name="snackbarTextViewStyle">@style/SnackbarTextViewStyle</item>
</style>

<style name="SnackbarStyle" parent="Widget.MaterialComponents.Snackbar">
    <item name="backgroundTint">@android:color/black</item>
</style>

<style name="SnackbarTextViewStyle" parent="Widget.MaterialComponents.Snackbar.TextView">
    <item name="android:textColor">@android:color/white</item>
</style>

score -1 · Answer 21 · answered Feb 03 '21 at 17:47

you can use this code on the material design library

you can use the way

create color code

open the res/values/colors.xml and add this line

<resources>
    <color name="custom_color_name">CustomCode</color>
</resources>

create Snackbar and change Background

open your activity or fragment and create Snackber

Snackbar snackbar= Snackbar.make(root,R.string.imageUploadTitle_error, BaseTransientBottomBar.LENGTH_LONG);

get Snackbar View

now you should get the SnackbarView and Change custom background in it

View snackview = snackbar.getView();

change background color

set the snackbar background color with this function

snackview.setBackgroundColor(ContextCompat.getColor(getActivity() , R.color.error));

showing this snackbar

now should show the Snackbar

snackbar.show();

so you can see changed background to custom color

what's new in your answer other than the given solutions? – Kishan Solanki Feb 07 '21 at 08:02 — Kishan Solanki, Feb 07 '21 at 08:02