How to change background color of the snackbar?
AndroidMaterial DesignAndroid DialogfragmentAndroid SnackbarAndroid Problem Overview
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.
Android Solutions
Solution 1 - Android
Try setting background color like this:
sbView.setBackgroundColor(ContextCompat.getColor(getActivity(), R.color.BLACK));
It will work 100% !
Solution 2 - Android
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 - Android
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>
Here is a playground repo.
Solution 4 - Android
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 - Android
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>
Solution 6 - Android
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.
Solution 7 - Android
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")}
Solution 8 - Android
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();
Solution 9 - Android
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();
Solution 10 - Android
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();
Solution 11 - Android
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!!!");
Solution 12 - Android
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);
Solution 13 - Android
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();
Solution 14 - Android
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)
Solution 15 - Android
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")
Solution 16 - Android
For Kotlin:
Snackbar.make(view,"simple text",Snackbar.LENGTH_SHORT).setBackgroundTint(Color.RED).show()
Solution 17 - Android
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();
}
}
Solution 18 - Android
> ## 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();