在TabLayout下的AppBarLayout中添加自定义阴影？

Question

我在 AppBarLayout 中的 TabLayout 下方添加了一个自定义阴影，但由于某种原因，阴影下方有一个绿色背景：

如果不够清楚，这里又是一个更长的阴影：

如您所见，阴影下方有一个绿色背景，我不确定如何去除它。

然后我注意到，在“设计”选项卡中，AppBarLayout 的背景设置为绿色（即使它在布局的 XML 中未设置为任何颜色）：

我尝试将颜色更改为 @android:color/transparent，但它使背景（如上图所示的阴影后面）变白，并且不透明。所以我仍然不确定发生了什么。

这是我的布局：

<android.support.design.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay"
        app:elevation="0dp">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

        <android.support.design.widget.TabLayout
            android:id="@+id/tablayout"
            android:layout_width="match_parent"
            android:layout_height="48dp"
            app:layout_scrollFlags="scroll|enterAlways"
            app:tabBackground="@color/colorPrimary"
            app:tabIndicatorColor="@android:color/white"
            app:tabSelectedTextColor="@android:color/white"
            app:tabTextAppearance="@style/TabTextAppearance"
            app:tabTextColor="@color/colorTabText" />

        <View
            android:layout_width="match_parent"
            android:layout_height="8dp"
            android:background="@drawable/toolbar_shadow" />

    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</android.support.design.widget.CoordinatorLayout>

这是 toolbar_shadow.xml 可绘制对象：

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

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

</shape>

这里是颜色（20% 不透明度）：

<color name="shadowColor">#33423f3f</color>

我做错了什么？

Answer 1

AppBarLayout 具有默认背景 ?colorPrimary。通过设置 android:background="@null".

清除它

这让我们想到了您明天要问的问题：

Why content does not draw underneath my custom shadow?

我说的是使用 CoordinatorLayout 的力量并将阴影放在 AppBarLayout 之外。

styles.xml

<style name="Widget.Shadow.AppBar" parent="">
    <item name="android:background">@drawable/toolbar_shadow</item>
    <item name="android:layout_height">4dp</item>
    <item name="android:layout_width">match_parent</item>
    <item name="layout_anchorGravity">bottom</item>
    <item name="android:layout_gravity">bottom</item>
</style>

layout.xml

<CoordinatorLayout>
    <AppBarLayout android:id="@+id/appbar">
        <Toolbar/>
        <TabLayout/>
    </AppBarLayout>
    <ViewPager/>
    <View 
        style="@style/Widget.Shadow.AppBar"
        app:layout_anchor="@id/appbar"/>
</CoordinatorLayout>

将自定义阴影视图放在末尾，以便它绘制下面的内容。

说明：通过使用此代码，您声明希望阴影视图

在下面画(android:layout_gravity="bottom")
底边(app:layout_anchorGravity="bottom")
应用栏 (app:layout_anchor="@id/appbar")

在TabLayout下的AppBarLayout中添加自定义阴影？

Adding custom shadow in AppBarLayout under TabLayout?

android

android-layout

android-toolbar

android-styles

android-appbarlayout

styles.xml

layout.xml