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

时间:2015-01-27 22:17:10

标签: android android-appcompat material-design android-toolbar

我正在使用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:根据Willis的建议,我显示了阴影,但它不在工具栏下方,而是在工具栏的左侧。 enter image description here

更新2:我注意到如果我没有在toolbar.xml和styles.xml中设置windowContentOverlay,阴影实际上位于工具栏的顶部。 enter image description here

3 个答案:

答案 0 :(得分:4)

这两个是完全不同的阴影。 垂直一个是DrawerLayout的。它应该在展开的抽屉旁边展示。 水平一个是windowContentOverlayLOLLIPOP以下API的一部分(LOLLIPOP @null}。

使用Toolbar窗口小部件时,工具栏不再是窗口装饰的一部分,因此阴影从窗口顶部开始 over 工具栏而不是下方(所以你希望windowContentOverlay@null)。此外,您需要在工具栏下方View之前添加一个额外的空LOLLIPOP,其背景设置为垂直阴影可绘制(从#20000000#00000000的8dp高梯度效果最佳)。在LOLLIPOP上,您可以在工具栏上设置8dp高程。

注意:使用相同的渐变但水平作为抽屉阴影以获得最佳效果。

答案 1 :(得分:2)

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

getSupportActionBar().setElevation(25);

增加/减少传递给setElevation的值将因此增加/减少阴影效果的存在。

答案 2 :(得分:0)

要在工具栏下显示阴影,请使用Google Android设计支持库中提供的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'