Android 工具栏上默认没有阴影？

No shadow by default on Toolbar?

提问by MrBrightside

I'm updating my app with the new Toolbar from the support library v21. My problem is that the toolbar does not cast any shadow if I don't set the "elevation" attribute. Is that the normal behavior or I'm doing something wrong?

我正在使用支持库 v21 中的新工具栏更新我的应用程序。我的问题是，如果我不设置“海拔”属性，工具栏不会投射任何阴影。这是正常行为还是我做错了什么？

My code is:

我的代码是：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="fill_parent"
   android:layout_height="fill_parent"
   android:orientation="vertical">

   <android.support.v7.widget.Toolbar
       xmlns:app="http://schemas.android.com/apk/res-auto"
       android:id="@+id/my_awesome_toolbar"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:background="?attr/colorPrimary"
       android:elevation="4dp"
       android:minHeight="?attr/actionBarSize"
       app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
       app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

   <FrameLayout
       android:id="@+id/FrameLayout1"
       android:layout_width="match_parent"
       android:layout_height="match_parent">
       .
       .
       .

And in my Activity - OnCreate method:

在我的 Activity - OnCreate 方法中：

    Toolbar toolbar = (Toolbar) findViewById(R.id.my_awesome_toolbar);
    setSupportActionBar(toolbar);

回答by I'm a frog dragon

I ended up setting my own drop shadow for the toolbar, thought it might helpful for anyone looking for it:

我最终为工具栏设置了自己的阴影，认为这对任何寻找它的人都有帮助：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              xmlns:app="http://schemas.android.com/apk/res-auto"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_gravity="top"
              android:orientation="vertical">

    <android.support.v7.widget.Toolbar android:id="@+id/toolbar"
                                       android:layout_width="match_parent"
                                       android:layout_height="wrap_content"
                                       android:background="@color/color_alizarin"
                                       android:titleTextAppearance="@color/White"
                                       app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>

    <FrameLayout android:layout_width="match_parent"
                 android:layout_height="match_parent">

        <!-- **** Place Your Content Here **** -->

        <View android:layout_width="match_parent"
              android:layout_height="5dp"
              android:background="@drawable/toolbar_dropshadow"/>

    </FrameLayout>

</LinearLayout>

@drawable/toolbar_dropshadow:

@drawable/toolbar_dropshadow：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
       android:shape="rectangle">

    <gradient android:startColor="@android:color/transparent"
              android:endColor="#88333333"
              android:angle="90"/>

</shape>

@color/color_alizarin

@color/color_alizarin

<color name="color_alizarin">#e74c3c</color>

回答by Binoy Babu

Google released the Design Support library a few weeks ago and there is a nifty solution for this problem in this library.

谷歌几周前发布了设计支持库，这个库中有一个很好的解决方案。

Add the Design Support library as a dependency in build.gradle:

添加设计支持库作为依赖项build.gradle：

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

Add AppBarLayoutsupplied by the library as a wrapper around your Toolbarlayout to generate a drop shadow.

添加AppBarLayout由库提供的作为Toolbar布局的包装器以生成投影。

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

Here is the result :

结果如下：

There are lots of other tricks with the design support library.

设计支持库还有很多其他技巧。

1. http://inthecheesefactory.com/blog/android-design-support-library-codelab/en
2. http://android-developers.blogspot.in/2015/05/android-design-support-library.html

1. http://inthecheesefactory.com/blog/android-design-support-library-codelab/en
2. http://android-developers.blogspot.in/2015/05/android-design-support-library.html

AndroidX

安卓X

As above but with dependency:

如上所述，但具有依赖性：

implementation 'com.google.android.material:material:1.0.0'

and com.google.android.material.appbar.AppBarLayout

和 com.google.android.material.appbar.AppBarLayout

回答by Muhammad Aamir Ali

You can't use the elevation attribute before API 21 (Android Lollipop). You can however add the shadow programmatically, for example using a custom view placed below the Toolbar.

在 API 21 (Android Lollipop) 之前不能使用高程属性。但是，您可以通过编程方式添加阴影，例如使用放置在工具栏下方的自定义视图。

@layout/toolbar

@布局/工具栏

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/blue"
    android:minHeight="?attr/actionBarSize"
    app:theme="@style/ThemeOverlay.AppCompat.ActionBar" />

<View
    android:id="@+id/toolbar_shadow"
    android:layout_width="match_parent"
    android:layout_height="3dp"
    android:background="@drawable/toolbar_dropshadow" />

@drawable/toolbar_dropshadow

@drawable/toolbar_dropshadow

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <gradient
        android:startColor="@android:color/transparent"
        android:endColor="#88333333"
        android:angle="90"/> </shape>

in your activity layout <include layout="@layout/toolbar" />

在您的活动布局中 <include layout="@layout/toolbar" />

回答by radley

Use /valuesfolders to apply the correct shadow style based on OS version.

使用/values文件夹根据操作系统版本应用正确的阴影样式。

For under 5.0 devices, use /values/styles.xmlto add windowContentOverlayto the body of your activity:

对于小于5.0的设备，使用/values/styles.xml添加windowContentOverlay到您的活动的主体：

<style name="MyViewArea">
    <item name="android:foreground">?android:windowContentOverlay</item>
</style>

<style name="MyToolbar">
    <item name="android:background">?attr/colorPrimary</item>
</style>

Then add your own custom shadow by changing your Theme to include:

然后通过将您的主题更改为包括以下内容来添加您自己的自定义阴影：

<item name="android:windowContentOverlay">@drawable/bottom_shadow</item>

You can grab Google's IO app shadow resource here: https://github.com/google/iosched/blob/master/android/src/main/res/drawable-xxhdpi/bottom_shadow.9.png

你可以在这里获取谷歌的 IO 应用影子资源：https: //github.com/google/iosched/blob/master/android/src/main/res/drawable-xxhdpi/bottom_shadow.9.png

For 5.0 devices & later, use /values-v21/styles.xmlto add elevationto your toolbar using a custom header style:

对于 5.0 设备及更高版本，使用/values-v21/styles.xml使用自定义标题样式将高度添加到您的工具栏：

<style name="MyViewArea">
</style>

<style name="MyToolbar">
    <item name="android:background">?attr/colorPrimary</item>
    <item name="android:elevation">4dp</item>
</style>

Note that in the second case, I had to create an empty MyViewAreastyle so the windowContentOverlaywouldn't show up too.

请注意，在第二种情况下，我不得不创建一个空的MyViewArea风格所以windowContentOverlay就不会出现了。

[Update: changed resource names and added Google shadow.]

[更新：更改了资源名称并添加了 Google 影子。]

回答by Islam A. Hassan

This worked for me very well:

这对我很有效：

<android.support.v7.widget.CardView
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/primary"
    card_view:cardElevation="4dp"
    card_view:cardCornerRadius="0dp">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/primary"
        android:minHeight="?attr/actionBarSize" />

</android.support.v7.widget.CardView>

回答by Roberto B.

If you are seting the ToolBaras ActionBarthen just call:

如果您要设置ToolBar为，ActionBar则只需调用：

getSupportActionBar().setElevation(YOUR_ELEVATION);

Note: This must be called after setSupportActionBar(toolbar);

注意：这必须在之后调用 setSupportActionBar(toolbar);

回答by cygery

My problem is that the toolbar does not cast any shadow if I don't set the "elevation" attribute. Is that the normal behavior or I'm doing something wrong?

我的问题是，如果我不设置“海拔”属性，工具栏不会投射任何阴影。这是正常行为还是我做错了什么？

That's the normal behavior. Also see the FAQ at the end of this post.

这是正常的行为。另请参见常见问题解答结束这篇文章。

回答by Irshu

Was toying with this for hours, here's what worked for me.

玩了几个小时，这对我有用。

Remove all the elevationattributes from the appBarLayoutand Toolbarwidgets (including styles.xmlif you are applying any styling).

elevation从appBarLayout和Toolbar小部件中删除所有属性（包括styles.xml是否应用任何样式）。

Now inside activity,apply the elvationon your actionBar:

现在在活动中，elvation在您的actionBar：

Toolbar toolbar = (Toolbar)findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setElevation(3.0f);

This should work.

这应该有效。

回答by Alex Mazur

i added

我补充说

<android.support.v7.widget.Toolbar
...
android:translationZ="5dp"/>

in toolbar description and it works for me. Using 5.0+

在工具栏描述中，它对我有用。使用 5.0+

回答by iluu

You can also make it work with RelativeLayout. This reduces layout nesting a little bit ;)

您还可以使其与RelativeLayout. 这会稍微减少布局嵌套；)

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <include
        android:id="@+id/toolbar"
        layout="@layout/toolbar" />

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

    <View
        android:layout_width="match_parent"
        android:layout_height="5dp"
        android:layout_below="@id/toolbar"
        android:background="@drawable/toolbar_shadow" />
</RelativeLayout>