Style SnackBar in theme app

Question

I need help. How can I change the design of the text in snackbar in styles app? The change in the code does not interest me. I found the following code. But it is not working for me. Why is that? My theme is derived from @style/Theme.AppCompat.Light.DarkActionBar". I would be very grateful for the help.

<style name="TextAppearance.Design.Snackbar.Message" parent="android:TextAppearance">
        <item name="android:textSize">10sp</item>
        <item name="android:textColor">#FEFEFE</item>
    </style>
    <style name="TextAppearance.Design.Snackbar.Action" parent="android:TextAppearance">
        <item name="android:textSize">16sp</item>
        <item name="android:textColor">#FEFEFE</item>
    </style>

**using C# xamarin or Java, you can try this** [Answer to change the background color of snackbar in Xamarin C# Or Java](https://stackoverflow.com/a/63366778/7404931) — Sheriff, Aug 11 '20 at 21:43

Gabriele Mariotti · Answer 1 · 2020-06-10T19:36:07.367

With the Material Components Library you can globally change the snackbar style in your app theme:

<style name="AppTheme" parent="Theme.MaterialComponents.*">
    <!-- Style to use for Snackbars in this theme. -->
    <item name="snackbarStyle">@style/Widget.MaterialComponents.Snackbar</item>
    <!-- Style to use for action button within a Snackbar in this theme. -->
    <item name="snackbarButtonStyle">@style/Widget.MaterialComponents.Button.TextButton.Snackbar</item>
    <!-- Style to use for message text within a Snackbar in this theme. -->
    <item name="snackbarTextViewStyle">@style/Widget.MaterialComponents.Snackbar.TextView</item>
    ....
</style>

Note:

snackbarStyle and snackbarButtonStyle require the version 1.1.0
snackbarTextViewStyle requires the version 1.2.0.

For example:

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

  <style name="snackbar_button" parent="@style/Widget.MaterialComponents.Button.TextButton.Snackbar">
      <item name="backgroundTint">@color/secondaryLightColor</item>
      <item name="android:textColor">@color/primaryDarkColor</item>
  </style>

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

It is just an example how to change also the parent style for the action button. You can use for example a standard Widget.MaterialComponents.Button:

  <style name="snackbar_button" parent="@style/Widget.MaterialComponents.Button">
      <item name="backgroundTint">@color/secondaryLightColor</item>
      <item name="android:textColor">@color/primaryDarkColor</item>
  </style>

To change the background color of the SnackBar you can use:

<style name="snackbar_style" parent="@style/Widget.MaterialComponents.Snackbar">
    <!-- using backgroundTint the alpha layer is ignored -->
    <item name="backgroundTint">@color/....</item>
</style>

Or if you prefer:

   <style name="MySnackbar" parent="@style/Widget.MaterialComponents.Snackbar">
        <item name="materialThemeOverlay">@style/snackbar_overlay</item>
        <!-- If you want to avoid the alpha level for the color that is overlaid on top of the background color-->
        <item name="backgroundOverlayColorAlpha">1.0</item>
    </style>
    <style name="snackbar_overlay">
        <item name="colorOnSurface">....</item>
    </style>

Wonderful!!. Finally styling snackbar completly at theme level. Playing around with the above suggestion, I found that we can specify a custom background shape/color in the snack bar style. — pablogeorge, Oct 30 '19 at 22:49
when applying snackbar_button, the color is indeed changed. But the color is slightly more bright, and checking it with a color picker shows that the color is not exactly the chosen color. — Jim Clermonts, Apr 17 '20 at 06:34

score 23 · Answer 2 · answered Sep 23 '16 at 04:49

23

you need this: tools:override="true"

<resources xmlns:tools="http://schemas.android.com/tools">
    <style name="TextAppearance.Design.Snackbar.Message" parent="android:TextAppearance" tools:override="true">
        <item name="android:textColor">@color/text</item>
        <item name="android:textSize">50sp</item>
    </style>
</resources>

answered Sep 23 '16 at 04:49

Amos

2,222
1
26
42

3

This is the only way to style it in XML as of right now. There's a [bug report](https://code.google.com/p/android/issues/detail?id=223344) in to allow styling it properly. – Jarett Millard Nov 02 '16 at 18:49

score 13 · Answer 3 · edited Jun 03 '20 at 04:09

13

Refer to this link for more information:

// create instance

Snackbar snackbar = Snackbar.make(view, text, duration);

// set action button color

snackbar.setActionTextColor(getResources().getColor(R.color.indigo));

// get snackbar view

View snackbarView = snackbar.getView();

// change snackbar text color

int snackbarTextId = android.support.design.R.id.snackbar_text;
TextView textView = (TextView)snackbarView.findViewById(snackbarTextId);
textView.setTextColor(getResources().getColor(R.color.indigo));

// change snackbar background

snackbarView.setBackgroundColor(Color.MAGENTA);

edited Jun 03 '20 at 04:09

Edric

24,639
13
81
91

answered Aug 09 '18 at 15:21

Pierre-Emmanuel Mercier

225
2
10

8

If you are using the new material components use com.google.android.material.R.id.snackbar_text instead of android.support.design.R.id.snackbar_text – Andrew Hossam Mar 02 '19 at 11:54

CoolMind · Answer 4 · 2020-06-05T13:14:21.223

4

Thanks to shadowsheep I wrote these styles with Material Components. I also removed margins. You can compile his app to research Snackbar.

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>

    <!-- Snackbar -->
    <item name="snackbarStyle">@style/MaterialSnackbarTheme</item>
    <item name="snackbarButtonStyle">@style/MaterialSnackbarTextButtonTheme</item>
    <item name="snackbarTextViewStyle">@style/MaterialSnackbarTextViewTheme</item>
</style>

<style name="MaterialSnackbarTheme" parent="@style/Widget.MaterialComponents.Snackbar">
    <!-- <item name="backgroundTint">#00cc77</item>-->
    <!-- <item name="android:background">@drawable/snackbar_background</item>-->
    <item name="android:background">#00cc77</item>
    <item name="cornerRadius">0dp</item>
    <item name="android:layout_margin">0dp</item>
    <item name="actionTextColorAlpha">1.0</item>
</style>

<style name="MaterialSnackbarTextButtonTheme" parent="@style/Widget.MaterialComponents.Button.TextButton.Snackbar">
    <item name="backgroundTint">#7777ff</item>
    <item name="android:textColor">#ffffff</item>
</style>

<style name="MaterialSnackbarTextViewTheme" parent="@style/Widget.MaterialComponents.Snackbar.TextView">
    <item name="android:textColor">#ffffff</item>
    <item name="android:alpha">1.0</item>
</style>

Where drawable/snackbar_background.xml is:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    >
    <solid android:color="#00cc77" />
</shape>

Don't forget to remove from Snackbar.make(), if you have added:

view.setBackgroundColor(ContextCompat.getColor(context, R.color.bg_color))
setActionTextColor(ContextCompat.getColor(context, R.color.button_color))

Unlike AlertDialog, Snackbar holds snackbarButtonStyle and snackbarTextViewStyle settings inside AppTheme (that's strange because yesterday they worked well inside MaterialSnackbarTheme).

As @StayCool said in comments, Snackbar currently uses transparency for background and text color (alpha = 0.5 - 0.6). Also they added round corners and margins. To remove background transparency, use either <item name="actionTextColorAlpha">1.0</item> or drawable/snackbar_background.xml. You can see his variant.

edited Jun 05 '20 at 13:14

answered May 25 '20 at 16:12

CoolMind

26,736
15
188
224

How can I override primary/accent colors for snackbar only? I trie your solution but @color/white just don't work for button textColor. Maybe ThemeOverlay? – StayCool Jun 04 '20 at 16:49
@StayCool, I have just checked my example, these two colors don't affect SnackBar. I changed them and nothing has changed. Can you ask a question in SO? – CoolMind Jun 04 '20 at 16:57
@StayCool, that's strange. I changed button color in and it applied. – CoolMind Jun 04 '20 at 17:12
@StayCool, did you set `@style/MaterialSnackbarTextButtonTheme` in the `AppTheme`? – CoolMind Jun 04 '20 at 17:13
yes, I did. [my snackbar styles](https://pastebin.com/xVc2PrAi) now contain a lot of attributes, because their parent styles contained selectors that used alpha 0.6 and some other things that was not obvious. i.e. when I set snackbar's button textColor to solid red, i ended up with 0.6 red. It was so confusing. Now I have succesfully changed background of snackbar with that: android:background, I set it to drawable gradient =) Also, I user material theme overlay to override colorPrimary user for button Stroke color. – StayCool Jun 05 '20 at 11:19
@StayCool, yes, MDC Snackbar's background is partially transparent, so I set drawable/snackbar_background.xml. Good that you figured out all those bugs and features of MDC. :) – CoolMind Jun 05 '20 at 11:37
hmmm... if that was planned by material design maybe we don't wanna change that transparency? ^^ I was just confused because button's text was opaque, and snackbar's text wasn't – StayCool Jun 05 '20 at 11:39
@StayCool, you are right! Transparency is often not needed, at least, if we didn't want. They changed this behaviour. I will test your solution. Thanks! – CoolMind Jun 05 '20 at 12:31
1

@StayCool About the background color it is not correct. The background color is based on the `colorOnSurface` You can override the color using `@style/...` in your style (you can check my answer above). Using the `backgroundTint` the alpha layer is ignored. In any case you can override it using the attr `backgroundOverlayColorAlpha`. Finally you should avoid to use `android:background`. – Gabriele Mariotti Jun 10 '20 at 19:40
@GabrieleMariotti but I can't use gradient background for snackbar with backgroundOverlayColorAlpha or overriding colorOnSurface for my snackBarStyle? – StayCool Jun 11 '20 at 09:49
1

@StayCool With backgroundOverlayColorAlpha and backgroundTint you can't use gradient (as all the other components in material components library). – Gabriele Mariotti Jun 11 '20 at 09:54
@GabrieleMariotti yes, and as I see, there is no other way to set drawable gradient for a snackbar, except android:background – StayCool Jun 11 '20 at 09:55
1

@StayCool currently it is the only way. – Gabriele Mariotti Jun 11 '20 at 09:58

score 0 · Answer 5 · answered May 22 '19 at 13:11

I digged into Snackbar sources and here's what I found Snackbar background consists of 2 layers: base and overlay, which colors are mixing.

In order to specify these colors, just add to your Theme 2 parameters:

colorSurface - background color, default = 0xFFFFFFFF

colorOnSurface - overlay, default = 0xFF000000

So in a default case, with applied 0.8 alpha by default, a color we get is 0xFF333333, which is in a middle between white and black.

Have fun mixing and styling your Snackbar :)

can you show what you mean? Do you add these to the snackbar themes. Please show some code. — JPM, Oct 18 '22 at 19:13

Style SnackBar in theme app

5 Answers5

Linked

Related