Android:Appcompat 21如何在操作栏上添加阴影

Question

我从新的appcompat中添加了新的材质设计操作栏,并使用了新的工具栏小部件.我在xml的工具栏上设置了自定义背景但我的问题是没有显示操作栏的阴影.你知道怎么做吗？

工具栏代码

<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/my_awesome_toolbar"
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:minHeight="?attr/actionBarSize"
    android:background="@drawable/ab_background_textured"
    app:theme="@style/MyTheme"
    app:popupTheme="@style/MyTheme.Popup"/>

MyTheme风格

<style name="MyTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="android:textColorPrimary">@color/abc_primary_text_material_dark</item>
    <item name="actionMenuTextColor">@color/abc_primary_text_material_dark</item>
    <item name="android:textColorSecondary">#ffff8800</item>
</style>

MyTheme.Popup风格

<style name="MyTheme.Popup" parent="ThemeOverlay.AppCompat.Dark">
    <item name="android:textColor">#ffffff</item>
</style>

更新

就像@Justin鲍威尔建议我添加actionBarStyle我的主题,但仍然没有投影.

MyTheme风格(更新)

<style name="MyTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="android:textColorPrimary">@color/abc_primary_text_material_dark</item>
    <item name="actionMenuTextColor">@color/abc_primary_text_material_dark</item>
    <item name="android:textColorSecondary">#ffff8800</item>
    <item name="android:actionBarStyle">@style/Widget.AppCompat.Light.ActionBar.Solid.Inverse</item>
</style>

Answer 1

我发现Google IO应用中的解决方案对我自己来说是可以接受的,但是没有看到博客或Stackoverflow的帖子完全解释它.你可以做的是从https://github.com/google/iosched/blob/master/android/src/main/res/drawable-xxhdpi/bottom_shadow.9.png获取他们的Apache 2许可抽屉影子资产然后进入您的活动布局:

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

    <FrameLayout android:layout_width="match_parent"
                 android:layout_height="match_parent"
                 android:layout_below="@id/toolbar"
                 android:foreground="@drawable/header_shadow">
    <!-- YOUR STUFF HERE -->
    </FrameLayout>
</RelativeLayout>

而标题阴影是

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <item name="header_shadow" type="drawable">@drawable/bottom_shadow</item>
</resources>

API级别<21.就像https://github.com/google/iosched/blob/master/android/src/main/res/values/refs.xml和https://github.com/google/iosched/blob/master/android/ src/main/res/values-v21/refs.xml.

详细说明,这里是toolbar.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        android:elevation="4dp"
        app:theme="@style/ToolbarTheme"
        app:popupTheme="@style/AppTheme"/>

Answer 2

对于5.0之前的版面,您可以通过添加foreground="?android:windowContentOverlay"到内容的FrameLayout 将阴影添加回工具栏下方的内容.

例如:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>

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

<FrameLayout
    android:id="@+id/fragmentContainer"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:foreground="?android:windowContentOverlay"
    />

</LinearLayout>

Answer 3

这是我显示阴影的方式:

<!-- API level 21 and above then the elevation attribute is enough. For some reason it can't be set directly on the include so I wrap it in a FrameLayout -->
<FrameLayout
    android:id="@+id/topwrapper"
    android:background="@color/theme_primary"
    android:elevation="4dp"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <include layout="@layout/toolbar_actionbar" />
</FrameLayout>

<FrameLayout
    android:layout_below="@id/topwrapper"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <WebView
        android:id="@+id/webview"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
    <!-- This topshadow is hidden in code for API level 21 and above -->
    <include layout="@layout/topshadow" />
</FrameLayout>

然后topshadow布局看起来像这样(调整5dp以获得你想要的阴影高度):

<View xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="5dp"
    android:id="@+id/shadow_prelollipop"
    android:background="@drawable/background_shadow" />

background_shadow.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <gradient
        android:startColor="#02444444"
        android:endColor="#33111111"
        android:angle="90"></gradient>
</shape>

toolbar_actionbar.xml

<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:myapp="http://schemas.android.com/apk/res-auto"
    myapp:theme="@style/ActionBarThemeOverlay"
    myapp:popupTheme="@style/ActionBarPopupThemeOverlay"
    android:id="@+id/toolbar_actionbar"
    android:background="@color/theme_primary"
    myapp:titleTextAppearance="@style/ActionBar.TitleText"
    myapp:contentInsetStart="?actionBarInsetStart"
    android:layout_width="match_parent"
    android:layout_height="?actionBarSize" />