在主题应用程序中样式化SnackBar

Question

我需要帮助。我该如何在styles应用程序中更改Snackbar文本的设计？对于代码的更改并不重要。我找到了以下代码。但是对我没有效果。为什么呢？我的主题派生自@style/Theme.AppCompat.Light.DarkActionBar"。非常感谢您的帮助。

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

- Konstantin Veretelnikov

---

使用C# Xamarin或Java，您可以尝试以下方法：更改Xamarin C#或Java中Snackbar的背景颜色的答案。 - Sheriff

Answer 1

使用Material Components Library，您可以在应用程序主题中全局更改 Snackbar 样式:

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

注意:

• snackbarStyle和snackbarButtonStyle需要版本1.1.0
• snackbarTextViewStyle需要版本1.2.0.

例如:

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

这只是一个示例，演示如何同时更改操作按钮的父样式。您可以使用标准的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>

要更改 SnackBar 的< strong>背景颜色，您可以使用：

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

或者如果您更喜欢：

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

- Gabriele Mariotti

---

太棒了！！终于在主题级别上完全设置了Snackbar的样式。通过尝试上述建议，我发现我们可以在Snackbar样式中指定自定义背景形状/颜色。<style name="snackbar_style" parent="@style/Widget.MaterialComponents.Snackbar”><item name="android:layout_margin">32dp</item><item name="android:background">@drawable/bg_snackbar</item><item name="backgroundTint”>@color/snackbarBackgroundColor</item><item name="animationMode">slide</item></style> - pablogeorge

应用 snackbar_button 后，颜色确实发生了变化。但是颜色稍微更亮一些，使用取色器检查后发现颜色并不完全是所选的颜色。 - Jim Clermonts

感谢您提供如此详细的帖子，太棒了，真是救命恩人。 - Charly Lafon

Answer 2

你需要这个：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>

- Amos

---

目前这是在XML中样式化的唯一方法。已经有一个错误报告提出来了，以允许适当地为其设置样式。 - Jarett Millard

Answer 3

请参考此链接获取更多信息:

// 创建实例

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

// 设置操作按钮颜色

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

// 获取 snackbar 视图

View snackbarView = snackbar.getView();

// 更改 snackbar 文本颜色

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

// 更改 snackbar 背景

snackbarView.setBackgroundColor(Color.MAGENTA);

- Pierre-Emmanuel Mercier

---

如果您正在使用新的材质组件，请改用com.google.android.material.R.id.snackbar_text而不是android.support.design.R.id.snackbar_text。 - Andrew Hossam

Answer 4

感谢shadowsheep，我使用Material Components编写了这些样式。同时我也移除了边距。你可以编译他的应用来研究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>

在这里，drawable/snackbar_background.xml 是:

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

如果你已经添加了，请别忘了从 Snackbar.make() 中移除：

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

与 AlertDialog 不同的是，Snackbar 将 snackbarButtonStyle 和 snackbarTextViewStyle 设置放在了 AppTheme 中（这很奇怪，因为昨天他们还能在 MaterialSnackbarTheme 中正常工作）。

如 @StayCool 在评论中所说，Snackbar 目前使用透明度来控制背景和文字颜色（alpha = 0.5-0.6）。此外，他们还添加了圆角和边距。若要取消背景透明度，请使用 <item name="actionTextColorAlpha">1.0</item> 或 drawable/snackbar_background.xml。您可以查看他的变体。

- CoolMind

---

@StayCool，你说得对！透明度通常是不必要的，至少如果我们不想要的话。他们改变了这种行为。我会测试你的解决方案。谢谢！ - CoolMind

@StayCool 关于背景颜色，它不正确。背景颜色基于 colorOnSurface。您可以在样式中使用 <item name="materialThemeOverlay">@style/...</item> 覆盖颜色（您可以查看我上面的答案）。使用 backgroundTint 会忽略 alpha 层。无论如何，您都可以使用属性 backgroundOverlayColorAlpha 进行覆盖。最后，应避免使用 android:background。 - Gabriele Mariotti

通过使用backgroundOverlayColorAlpha和backgroundTint，您无法像材料组件库中的所有其他组件一样使用渐变。 - Gabriele Mariotti

@GabrieleMariotti 是的，而且据我所见，除了使用android:background之外，没有其他方法来为snackbar设置可绘制渐变。 - StayCool

@StayCool 目前这是唯一的方法。 - Gabriele Mariotti

Answer 5

我深入研究了Snackbar的源代码，发现Snackbar的背景包括两个层：基础层和覆盖层，颜色会混合。

要指定这些颜色，只需在您的主题中添加2个参数:

colorSurface-背景颜色，默认值= 0xFFFFFFFF

colorOnSurface - 覆盖层， 默认值= 0xFF000000

因此，在默认情况下，应用了默认的0.8 alpha时，我们得到的颜色为0xFF333333，它位于白色和黑色之间的中间色。

尽情地混合和设计您的Snackbar吧:)

- Artur Matsehor

---

你能展示一下你的意思吗？你将它们添加到 snackbar 主题中吗？请展示一些代码。 - JPM