工具栏上默认没有阴影?
我正在使用支持库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"> . . .
在我的Activity – OnCreate方法中:
Toolbar toolbar = (Toolbar) findViewById(R.id.my_awesome_toolbar); setSupportActionBar(toolbar);
我最终设置了自己的阴影工具栏,认为这可能有助于任何人寻找它:
<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>
@绘制/ 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_alizarin
<color name="color_alizarin">#e74c3c</color>
Google几周前发布了devise支持库,在这个库中有一个很好的解决scheme。
将devise支持库添加为build.gradle
的依赖build.gradle
:
compile 'com.android.support:design:22.2.0'
将AppBarLayout
提供的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>
结果如下:
devise支持库还有很多其他的技巧。
在API 21(Android棒棒糖)之前,您不能使用高度属性。 但是,您可以以编程方式添加阴影,例如使用放置在工具栏下方的自定义视图。
@布局/工具栏
<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" />
@绘制/ 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>
在你的活动布局中<include layout="@layout/toolbar" />
使用/值文件夹根据操作系统版本应用正确的阴影样式。
对于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>
然后通过更改您的主题添加您自己的自定义阴影,包括:
<item name="android:windowContentOverlay">@drawable/bottom_shadow</item>
您可以在此处获取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>
请注意,在第二种情况下,我不得不创build一个空的MyViewArea样式,所以windowContentOverlay也不会显示出来。
[更新:更改资源名称并添加Google影子。]
这对我很有帮助:
<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>
如果您将ToolBar
作为ActionBar
则只需调用:
getSupportActionBar().setElevation(YOUR_ELEVATION);
注意:这必须在setSupportActionBar(toolbar);
之后setSupportActionBar(toolbar);
我的问题是,如果我不设置“高度”属性,工具栏不会投射任何阴影。 这是正常的行为还是我做错了什么?
这是正常的行为。 另请参阅本文最后的FAQ。
你也可以使它与RelativeLayout
工作。 这减less了嵌套的一点点;)
<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>
几个小时,这是什么对我有用。
删除appBarLayout
和Toolbar
小部件的所有elevation
属性(如果您正在应用任何样式,则包括styles.xml
)。
现在去你的活动,并在你的elvation
像这样应用elvation
:
Toolbar toolbar = (Toolbar)findViewById(R.id.toolbar); setSupportActionBar(toolbar); getSupportActionBar().setElevation(3.0f);
这应该工作。
actionbar_background.xml
<item> <shape> <solid android:color="@color/black" /> <corners android:radius="2dp" /> <gradient android:startColor="@color/black" android:centerColor="@color/black" android:endColor="@color/white" android:angle="270" /> </shape> </item> <item android:bottom="3dp" > <shape> <solid android:color="#ffffff" /> <corners android:radius="1dp" /> </shape> </item> </layer-list>
添加到actionbar_style背景
<style name="Theme.ActionBar" parent="style/Widget.AppCompat.Light.ActionBar.Solid"> <item name="background">@drawable/actionbar_background</item> <item name="android:elevation">0dp</item> <item name="android:windowContentOverlay">@null</item> <item name="android:layout_marginBottom">5dp</item>
NAME = “displayOptions”> useLogo | showHome | showTitle | showCustom
添加到Basetheme
<style name="BaseTheme" parent="Theme.AppCompat.Light"> <item name="android:homeAsUpIndicator">@drawable/home_back</item> <item name="actionBarStyle">@style/Theme.ActionBar</item> </style>
对于5.0 +:您可以使用工具栏AppBarLayout。 AppBarLayout具有“提升”属性。
<android.support.design.widget.AppBarLayout android:id="@+id/appbar" android:layout_width="match_parent" android:elevation="4dp" android:layout_height="wrap_content" android:orientation="vertical"> <include layout="@layout/toolbar" /> </android.support.design.widget.AppBarLayout>