title: Adding custom shadow in AppBarLayout under TabLayout?
body: <p>I've added a custom shadow below my <code>TabLayout</code> in <code>AppBarLayout</code>, but for some reason, there's a green background underneath the shadow:</p>
  
  <p><a href="https://i.stack.imgur.com/bviS2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bviS2.png" alt="enter image description here"></a></p>
  
  <p>In case that's not clear enough, here it is again with a longer shadow:</p>
  
  <p><a href="https://i.stack.imgur.com/G2CJV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/G2CJV.png" alt="enter image description here"></a></p>
  
  <p>As you can see, there's a green background underneath the shadow and I'm not sure how to get rid of it.</p>
  
  <p>Then I noticed, in the Design tab, that the <code>AppBarLayout</code>'s background was set to green (even though it's not set to any color in the layout's XML):</p>
  
  <p><a href="https://i.stack.imgur.com/2rZip.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2rZip.png" alt="enter image description here"></a></p>
  
  <p>I tried changing the color to <code>@android:color/transparent</code>, but it made the background (behind the shadow like in the above pictures) white, and not transparent. So I'm still not sure what's going on.</p>
  
  <p>Here's my layout:</p>
  
  <pre><code>&lt;android.support.design.widget.CoordinatorLayout
      android:layout_width="match_parent"
      android:layout_height="match_parent"&gt;
  
      &lt;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"&gt;
  
          &lt;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" /&gt;
  
          &lt;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" /&gt;
  
          &lt;View
              android:layout_width="match_parent"
              android:layout_height="8dp"
              android:background="@drawable/toolbar_shadow" /&gt;
  
      &lt;/android.support.design.widget.AppBarLayout&gt;
  
      &lt;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" /&gt;
  
  &lt;/android.support.design.widget.CoordinatorLayout&gt;
  </code></pre>
  
  <p>Here is <code>toolbar_shadow.xml</code> drawable:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;shape
      xmlns:android="http://schemas.android.com/apk/res/android"&gt;
  
      &lt;gradient
          android:startColor="@android:color/transparent"
          android:endColor="@color/shadowColor"
          android:angle="90" /&gt;
  
  &lt;/shape&gt;
  </code></pre>
  
  <p>And here is the color (20% opacity):</p>
  
  <pre><code>&lt;color name="shadowColor"&gt;#33423f3f&lt;/color&gt;
  </code></pre>
  
  <p>What am I doing that's wrong?</p>