工具栏上默认没有阴影?

MrB*_*ide 157 android material-design android-5.0-lollipop android-toolbar

我正在使用支持库v21中的新工具栏更新我的应用程序.我的问题是,如果我没有设置"高程"属性,工具栏不会投射任何阴影.这是正常行为还是我做错了什么?

我的代码是:

<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">
       .
       .
       .
Run Code Online (Sandbox Code Playgroud)

在我的Activity - OnCreate方法中:

    Toolbar toolbar = (Toolbar) findViewById(R.id.my_awesome_toolbar);
    setSupportActionBar(toolbar);
Run Code Online (Sandbox Code Playgroud)

I'm*_*gon 246

我最终为工具栏设置了自己的投影,认为它可能对寻找它的人有帮助:

<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>
Run Code Online (Sandbox Code Playgroud)

@绘制/ 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>
Run Code Online (Sandbox Code Playgroud)

@色/ color_alizarin

<color name="color_alizarin">#e74c3c</color>
Run Code Online (Sandbox Code Playgroud)

在此输入图像描述

  • 如果您正在运行的设备是> =到Lollipop,请不要忘记隐藏您的视图,如果不是,您将最终得到两个阴影. (3认同)
  • 来自Google有关设计[工具栏材料设计]的信息(http://www.google.com/design/spec/what-is-material/objects-in-3d-space.html#objects-in-3d-space-elevation -android-),你应该设置`android:layout_height ="4dp"`为阴影的高度,而不是`5dp`.实际上,高程与您在"FrameLayout"上设置的阴影高度相同. (3认同)
  • 我在使用此解决方案时遇到问题,因为我将我的活动布局扩展到示例中的框架布局中,您能想到一种方法吗? (2认同)
  • 推荐使用 "android:endColor="#c7c7c7" 而不是 android:endColor="#88333333" (2认同)

Bin*_*abu 200

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

将Design Support库添加为依赖项build.gradle:

compile 'com.android.support:design:22.2.0'
Run Code Online (Sandbox Code Playgroud)

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>
Run Code Online (Sandbox Code Playgroud)

结果如下:

在此输入图像描述

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

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

  • 将`AppBarLayout`设置为`Toolbar`的包装器不会为我设置任何阴影.请注意,我不使用导航抽屉.关于它为什么不起作用的任何想法? (15认同)
  • 请注意,这仅适用于棒棒糖及以上.它不会在棒棒糖前工作,因为它只是使用ViewCompat.setElevation(). (8认同)
  • 你不需要这两行 compile 'com.android.support:support-v4:22.2.0' compile 'com.android.support:appcompat-v7:22.2.0',因为编译 'com.android.support:设计:22.2.0' 取决于他们 (2认同)

Muh*_*Ali 25

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

@布局/工具栏

<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" />
Run Code Online (Sandbox Code Playgroud)

@绘制/ 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>
Run Code Online (Sandbox Code Playgroud)

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

在此输入图像描述

  • 你能用完整的布局文件修复`@ layout/toolbar`示例吗? (2认同)

rad*_*ley 17

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

对于小于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>
Run Code Online (Sandbox Code Playgroud)

然后通过更改主题添加自己的自定义阴影,包括:

<item name="android:windowContentOverlay">@drawable/bottom_shadow</item>
Run Code Online (Sandbox Code Playgroud)

您可以在此处获取Google的IO应用资源资源:https://github.com/google/iosched/blob/master/android/src/main/res/drawable-xxhdpi/bottom_shadow.9.png

对于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>
Run Code Online (Sandbox Code Playgroud)

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

[更新:更改了资源名称并添加了Google阴影.]


Isl*_*san 16

这对我非常有用:

<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>
Run Code Online (Sandbox Code Playgroud)

  • 实际上,您最好使用 AppBarLayout,如本答案 http://stackoverflow.com/a/31026359/1451716 在 AppBarLayout 发布之前,我的答案很旧 (2认同)

Rob*_* B. 12

如果您正在设置ToolBaras ActionBar然后只需致电:

getSupportActionBar().setElevation(YOUR_ELEVATION);
Run Code Online (Sandbox Code Playgroud)

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

  • `setElevation()`仅针对API-21 +定义. (6认同)
  • 在内部使用`ViewCompat.setElevation()`因此只能在API 21及更高版本上运行. (2认同)

cyg*_*ery 7

我的问题是,如果我没有设置"高程"属性,工具栏不会投射任何阴影.这是正常行为还是我做错了什么?

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


Irs*_*shu 7

几个小时玩弄这个,这对我有用.

删除所有elevation从属性appBarLayoutToolbar部件(包括styles.xml如果你申请的任何造型).

现在在里面的活动中,应用elvation你的actionBar:

Toolbar toolbar = (Toolbar)findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setElevation(3.0f);
Run Code Online (Sandbox Code Playgroud)

这应该工作.


小智 6

我加了

<android.support.v7.widget.Toolbar
...
android:translationZ="5dp"/>
Run Code Online (Sandbox Code Playgroud)

在工具栏说明中,它对我有用。使用5.0+


Roh*_*eja 5

您所需要的只是一个android:margin_bottom等于该android:elevation值的值。不AppBarLayoutclipToPadding等需要。

例子:

<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:layout_marginBottom="4dp"
    android:background="@android:color/white"
    android:elevation="4dp">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <!--Inner layout goes here-->

    </androidx.constraintlayout.widget.ConstraintLayout>
</androidx.appcompat.widget.Toolbar>
Run Code Online (Sandbox Code Playgroud)