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

Question

我已经添加了我的下面自定义阴影TabLayout中AppBarLayout,但由于某些原因,还有的阴影之下的绿色背景:

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

正如你所看到的,阴影下方有一个绿色背景,我不知道如何摆脱它.

然后我注意到,在"设计"选项卡中,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".

这带给我们明天你要问的问题:

为什么内容不会在我的自定义阴影下绘制？

我说的是使用它的力量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")