android - Material Design 3 顶部应用栏没有阴影。如何启用它？

Question

新的“Material Design 3 top app bar”文档说他们摆脱了阴影。 我怎样才能启用它？在 Toolbar 或 AppBar 上设置高度根本不起作用。

Answer 1

我遇到了同样的情况。我发现:

1. 阴影从 API 28 开始应用，低于 API 28 - 阴影效果与 MaterialComponents 主题相同。
2. 颜色填充低于 API 28(在 API 26 上测试)。

Top app bar specs 的文档表示 TopAppBar 的容器具有“Surface” 和Elevation (on scroll) Level 2。

在页面上Color system - Color roles我发现信息:

At elevation +2 components with surface color containers receive a primary color overlay with 8% opacity.

因此，TopAppBarLayout 的默认样式使用 ?attr/colorSurface 作为背景颜色，并使用 ?attr/colorPrimary 和 8% 的不透明度作为覆盖层(一种稀松布效果)。

我的解决方案:

• 案例 1 - 仅启用阴影效果。

为 AppBarLayout 创建样式并将 android:outlineAmbientShadowColor 和 android:outlineSpotShadowColor 设置为黑色(因为它是创建阴影的默认颜色)。这些属性在 Widget.Material3.AppBarLayout 中设置为透明。

<style name="Widget.App.AppBarLayout" parent="Widget.Material3.AppBarLayout">
      <item name="android:outlineAmbientShadowColor" ns1:ignore="NewApi">@android:color/black</item>
      <item name="android:outlineSpotShadowColor" ns1:ignore="NewApi">@android:color/black</item>
</style>

• 案例 2 - 启用阴影效果并去除叠加层。

除了上述之外，您还可以添加带有颜色的 android:background 属性或将 colorSurface 设置为您的颜色(背景)和 colorPrimary 的 materialThemeOverlay 属性到@android:transparent(覆盖)。我更喜欢直接添加 android:background，因为添加 materialThemeOverlay 会对 AppBarLayout 的 subview 产生影响。

   <style name="Widget.App.AppBarLayout" parent="Widget.Material3.AppBarLayout">
        <item name="android:outlineAmbientShadowColor" ns1:ignore="NewApi">@android:color/black</item>
        <item name="android:outlineSpotShadowColor" ns1:ignore="NewApi">@android:color/black</item>
        <item name="android:background">@color/white</item>
    </style>

或

<style name="Widget.App.AppBarLayout" parent="Widget.Material3.AppBarLayout">
        <item name="android:outlineAmbientShadowColor" ns1:ignore="NewApi">@android:color/black</item>
        <item name="android:outlineSpotShadowColor" ns1:ignore="NewApi">@android:color/black</item>
        <item name="materialThemeOverlay">@style/ThemeOverlay.App.DayNight.NoActionBar</item>
    </style>

    <style name="ThemeOverlay.App.DayNight.NoActionBar" parent="Theme.Material3.DayNight.NoActionBar">
        <item name="colorPrimary">@android:color/transparent</item>
        <item name="colorSurface">@android:color/white</item>
    </style>

不要忘记将样式应用于 AppBarLayout 或主题。

顺便说一句，liftOnScroll 属性在 Widget.Material3.AppBarLayout 中设置为 true，因此无需设置它。只需为 ScrollView 设置 layout_behavior 一切正常。