Material Design - 不显示阴影的AppCompat工具栏

Question

我正在使用来自AppCompat V7的工具栏来替换以前的操作栏，并希望使工具栏的阴影像以前的操作栏一样。但是默认情况下，工具栏没有阴影，并且我已经尝试了reddit中提到的修复方法，但没有成功。

设置阴影的代码：

mDrawerLayout.setDrawerShadow(R.drawable.drawer_shadow, GravityCompat.START);

工具栏布局：

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    android:minHeight="?attr/actionBarSize"
    android:background="#F1F1F1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="0dp"
    android:layout_margin="0dp"
    foreground="?android:windowContentOverlay">

活动布局：

<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"     
    tools:context=".MainActivity"
    android:layout_width="match_parent"
    android:id="@+id/drawer_layout"
    android:layout_height="match_parent">

    <!-- activity view -->
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <include 
            android:id="@+id/toolbar" 
            layout="@layout/toolbar" />
        <FrameLayout android:id="@+id/fragment_container"
            android:layout_below="@id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            />

    </RelativeLayout>

    <!-- navigation drawer -->
    <RelativeLayout
        android:id="@+id/left_drawer"
        android:layout_gravity="start"
        android:layout_width="match_parent"
        android:background="#fff"
        android:layout_height="match_parent">

        <RelativeLayout 
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingLeft="16dp"
            android:paddingRight="16dp"
            android:paddingTop="8dp"
            android:paddingBottom="8dp"
            android:divider="#eee"
            android:background="#EEE"
            android:id="@+id/drawer_header">
            <ImageView
                android:id="@+id/user_icon"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="top"
                android:layout_alignParentTop="true"
                android:layout_alignParentLeft="true"
                android:contentDescription="@string/user_icon"
                android:src="@drawable/ic_action_person"
                android:paddingTop="0dp"
                android:paddingLeft="0dp"/>
            <TextView
                    android:id="@+id/userName"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_toRightOf="@+id/user_icon"
                    android:gravity="center"
                    android:layout_gravity="center_vertical"
                    android:layout_centerVertical="true"
                    android:textSize="14sp"
                    android:text="@string/not_logged_in"
                    android:paddingTop="0dp"
                    android:paddingBottom="0dp"/>
        </RelativeLayout>
        <ListView
            android:id="@+id/drawer_list"
            android:layout_below="@+id/drawer_header"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:divider="#eee"
            android:background="#fff"
            android:dividerHeight="0dp" />
    </RelativeLayout>

</android.support.v4.widget.DrawerLayout>

在 style.xml 中进行设置：

<style name="myAppTheme" parent="Theme.AppCompat.Light">
    <item name="colorPrimary">@color/primaryColor</item>
    <item name="colorPrimaryDark">@color/primaryColorDark</item>
    <item name="android:windowNoTitle">true</item>
    <item name="windowActionBar">false</item>
    <item name="drawerArrowStyle">@style/DrawerArrowStyle</item>
    <item name="android:windowContentOverlay">@drawable/drawer_shadow</item>
</style>

<style name="DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">
    <item name="spinBars">true</item>
    <item name="color">@android:color/black</item>
</style>

有人可以帮忙吗？

谢谢！

更新1：根据威利斯的建议，我得到了阴影显示，但它不在工具栏下面，而是在工具栏左侧。

更新2：我注意到如果我不在toolbar.xml和styles.xml中设置windowContentOverlay，阴影实际上在工具栏顶部。

- Martin Lau

---

这两个阴影完全不同。垂直的那一个是DrawerLayout的阴影，应该显示在展开的抽屉旁边。水平的那一个是在LOLLIPOP以下API中的windowContentOverlay的一部分。当您使用Toolbar小部件时，工具栏不是窗口装饰的一部分，因此阴影从窗口顶部开始覆盖工具栏而不是下面。在LOLLIPOP上，您可以在工具栏上设置8dp高度的海拔高度。在LOLLIPOP之前，您需要在Toolbar下方添加一个额外的空View，其背景设置为垂直阴影可绘制（8dp高的#20000000到#00000000）。 - Eugen Pechanec

嗨Eugen，你救了我的一天。这正是我所需要的，并且在Lollipop之前运行得非常好。这应该是正确的答案。你能把它发布为答案，我可以接受这个。非常感谢！ - Martin Lau

刚刚完成了，很高兴能为您服务。 - Eugen Pechanec

Answer 1

那两个影子完全不同。 竖直 的影子是DrawerLayout的影子。它应该显示在展开的抽屉旁边。 水平 的影子是windowContentOverlay在LOLLIPOP以下的API中的一部分（在LOLLIPOP上是@null）。

当您使用Toolbar小部件时，工具栏不再是窗口装饰的一部分，因此阴影从窗口顶部开始而不是在其下方（因此要将windowContentOverlay设为@null）。此外，您需要在工具栏前LOLLIPOP添加额外的空View，并将其背景设置为垂直阴影可绘制物（8dp高从#20000000到#00000000的渐变效果最佳）。在LOLLIPOP上，可以在工具栏上设置8dp高度。

注意：对于最佳效果，请使用与抽屉阴影相同的水平渐变。

- Eugen Pechanec

Answer 2

您可以使用setElevation方法设置阴影的数量。例如：

getSupportActionBar().setElevation(25);

增加/减少传递给setElevation的值将相应地增加/减少阴影效果的存在感。

- Willis

---

谢谢Willis，我的问题有些混淆，实际上我需要显示阴影，但我没有找到使其工作的解决方案。是否可以设置其他高度值来显示阴影？ - Martin Lau

嗨，威利斯，非常感谢！我还为应用程序设置了主题。现在我已经显示了阴影，但它不在工具栏下面。有什么进一步的建议吗？ - Martin Lau

嗯，看看在“工具栏”属性中指定高度是否有所不同。将以下内容添加到“工具栏”布局中：android:elevation="20dp"。然后删除 getSupportActionBar().setElevation(25);。 - Willis

再次感谢您，威利斯！我这边有些混淆，我应该提到模拟器是安卓4.0版本的。您所建议的适用于5.0，而我的问题出在4.0上。 - Martin Lau

Answer 3

要在工具栏下显示阴影，请使用Google Android Design Support Library中提供的AppBarLayout。以下是如何使用它的示例。

<android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
   <android.support.v7.widget.Toolbar
            android:layout_height="?attr/actionBarSize"
            android:layout_width="match_parent"/>
     </android.support.design.widget.AppBarLayout>

使用 Google Android 设计支持库，请将以下内容输入您的 build.gradle 文件中：

 compile 'com.android.support:design:22.2.0'

- Michal