带有工具栏的 AppBarLayout 没有阴影/高度

Posted

技术标签:

【中文标题】带有工具栏的 AppBarLayout 没有阴影/高度【英文标题】:AppBarLayout with a Toolbar has no shadow/ elevation 【发布时间】:2020-05-04 11:51:37 【问题描述】:

我正在尝试使用 AppBarLayout 将工具栏添加到我的活动中,但我无法在其上获得任何高度或阴影。

我正在使用以下布局和样式;

<!-- activity -->
<androidx.coordinatorlayout.widget.CoordinatorLayout
    android:layout_
    android:layout_
    android:fitsSystemWindows="true">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appbar"
        style="@style/Widget.App.AppBar"
        android:layout_
        android:layout_
        android:fitsSystemWindows="true">

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_
            android:layout_  />

    </com.google.android.material.appbar.AppBarLayout>

    <fragment
        android:id="@+id/nav_host_fragment"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_
        android:layout_
        android:layout_weight="1"
        app:defaultNavHost="true"
        app:navGraph="@navigation/main_graph"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

</androidx.coordinatorlayout.widget.CoordinatorLayout>
<!-- styles -->
<style name="App" parent="Theme.MaterialComponents.DayNight.NoActionBar">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
    <item name="colorSecondary">@color/colorAccent</item>
    <item name="colorSurface">@color/background</item>

    <item name="toolbarStyle">@style/Widget.App.Toolbar</item>
    <item name="android:statusBarColor">@color/background</item>
    <item name="android:windowLightStatusBar">true</item>
    <item name="android:navigationBarColor">@android:color/white</item>
    <item name="android:windowLightNavigationBar" tools:targetApi="o_mr1">true</item>
</style>

<style name="App.PopupTheme" parent="ThemeOverlay.MaterialComponents.Light">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
    <item name="colorSecondary">@color/colorAccent</item>
</style>

<style name="Widget.App" parent="@android:style/Widget.Material" />

<style name="Widget.App.AppBar" parent="@style/Widget.Design.AppBarLayout">
    <item name="android:background">@color/white</item>
    <item name="android:elevation">12dp</item>
    <item name="elevation">12dp</item>
</style>

<style name="Widget.App.Toolbar" parent="Widget.MaterialComponents.Toolbar">
    <item name="android:paddingEnd">8dp</item>
    <item name="contentInsetStartWithNavigation">64dp</item>
    <item name="popupTheme">@style/App.PopupTheme</item>
</style>

即使没有任何样式,工具栏也不会显示任何阴影。

使用上面的代码我得到

但它应该是这样的

我已经尝试过从开源的 Google IO 应用程序(第二个屏幕截图来自)复制样式,但这也没有用。

我正在使用

'com.google.android.material:material:1.2.0-alpha03'(也试过最新的稳定版)

提前致谢

【问题讨论】:

可能是主题问题..我通常使用&lt;style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" /&gt; APP Bar主题.. @Edric 你找到解决方案了吗? 【参考方案1】:

您可以将 android:clipChildren="false" 添加到父视图。

<androidx.coordinatorlayout.widget.CoordinatorLayout 
    android:clipChildren="false">

    <com.google.android.material.appbar.AppBarLayout>

        <androidx.appcompat.widget.Toolbar
           app:elevation="12dp"
        />

    </com.google.android.material.appbar.AppBarLayout>

此外,appcompat 库默认情况下仅对 api28+ 的阴影应用 alpha 通道。 您可以更改此行为,在您的应用主题中添加 android:spotShadowAlpha 属性(仅适用于 api28+):

<!--Alpha value of the spot shadow projected by elevated views, between 0 and 1.-->
<item name="android:spotShadowAlpha">0.x</item>

【讨论】:

以上是关于带有工具栏的 AppBarLayout 没有阴影/高度的主要内容,如果未能解决你的问题,请参考以下文章

单个活动:带有 AppBarLayout 的片段

如何在appbarlayout中制作带有圆角和高程的工具栏?喜欢这张照片

37Android去除AppBarLayout阴影

将 appbarLayout 放在屏幕底部

CoordinatorLayout + AppBarLayout + NavigationDrawer

使用 AppBarLayout.Behavior.DragCallback 控制折叠工具栏布局的滚动