android - 在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 之外。

样式.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>

布局.xml

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

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

说明:通过使用此代码，您声明您希望阴影 View

• 在下方绘制 (android:layout_gravity="bottom")
• 底部边缘 (app:layout_anchorGravity="bottom")
• 应用栏的 (app:layout_anchor="@id/appbar")