如何自定义 Snackbar 中动作按钮的样式

Question

我正在使用 Snackbar provided by the Material Components Library。
我正在寻找一种方法来自定义 ACTION 按钮的样式。

我知道 Snackbar 使用此布局 (layout.mtrl_layout_snackbar_include) 和 Button:

  <Button
    android:id="@+id/snackbar_action"

但我试图避免使用一些可能会停止使用下一版本的解决方法。
特别是我想使用 OutlinedButton style 和 自定义形状 作为 arrow.

Answer 1

使用 Material Components Library 的 1.1.0 版本，您可以在应用程序主题中定义 Snackbar 中操作按钮使用的样式，使用snackbarButtonStyle 属性。

<style name="AppTheme" parent="Theme.MaterialComponents.*">

    <!-- Style to use for action button within a Snackbar in this theme. -->
    <item name="snackbarButtonStyle">@style/Widget.MaterialComponents.Button.TextButton.Snackbar</item>
    ....
</style>

您可以使用以下方式自定义样式：

  <style name="Custom.MaterialComponents.Button.TextButton.Snackbar" parent="@style/Widget.MaterialComponents.Button.TextButton.Snackbar">
    <item name="strokeColor">@color/...</item>
    <item name="strokeWidth">1dp</item>
    ....
    <item name="shapeAppearanceOverlay">@style/Snackbar.ShapeAppearanceOverlay.Arrow</item>
  </style>

使用shapeAppearanceOverlay可以自定义形状：

  <style name="Snackbar.ShapeAppearanceOverlay.Button.Arrow" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerFamilyTopRight">cut</item>
    <item name="cornerFamilyBottomRight">cut</item>

    <item name="cornerSizeTopLeft">0dp</item>
    <item name="cornerSizeBottomLeft">0dp</item>
    <item name="cornerSizeTopRight">50%</item>
    <item name="cornerSizeBottomRight">50%</item>
  </style>

你可以用同样的方法获得一个OutlinedButton样式。只需定义一个自定义样式：

  <style name="Outlined.MaterialComponents.Button.TextButton.Snackbar" parent="@style/Widget.MaterialComponents.Button.OutlinedButton">
    <item name="strokeColor">@color/...</item>
    <item name="strokeWidth">1dp</item>
    <item name="android:textColor">@color/...</item>
  </style>

如何自定义 Snackbar 中动作按钮的样式

How to customize the style of the action button in the Snackbar

android

android-styles

material-components

android-snackbar

material-components-android