Adding shadow below TabBar - Material Design

Question

I have an actionbar and tab bar. I removed shadow below actionbar with

<item name="android:windowContentOverlay">@null</item>

Though, I want to add shadow under tab bar. I'm using SlidingTabLayout. My tab TextView:

<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/tabText"
android:layout_width="wrap_content"
android:layout_height="@dimen/actionbar_height"
android:textColor="@color/tab_color"
android:gravity="center"
android:textAllCaps="true"
android:singleLine="true" />

How to do that?

Solution 1

jmols answer results in a different shadow than what Google apps (e.g. Play Newsstand) use. This is my method, which results in the shadow looking exactly the same as Play Newsstand:

Create a drawable called 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="#33000000"
        android:angle="90">
    </gradient>
</shape>

Then, set that shadow to your content layout, for example:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <!-- Your views here -->
    <View
        android:layout_width="match_parent"
        android:layout_height="8dp"
        android:background="@drawable/shadow" />
</RelativeLayout>

Placed underneath your toolbar/action bar, this will look exactly the same as the implementation in Play Newsstand and Play Store.

Solution 2

Shadows are currently only supported on Api level 21 (as they are rendered in real time) and are not provided by the support library unfortunately.

Hence you will have to mimic the shadows yourself using a custom drawable on api levels < 21. The easiest way to do this is:

• take the shadow 9-patch from the Google IO app.

• set that shadow to your main content layout, for example:

  <RelativeLayout
      xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:tools="http://schemas.android.com/tools"
      android:layout_width="match_parent"
      android:layout_height="match_parent">
  
      <Toolbar
          android:id="@+id/tb_toolbar"
          android:layout_width="match_parent"
          android:layout_height="@dimen/abc_action_bar_default_height_material"
          android:title="@string/toolbar_title"
          android:elevation="@dimen/toolbar_elevation"/>
  
      <FrameLayout
          android:id="@+id/fl_fragment_container"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:layout_below="@id/tb_toolbar"
          android:foreground="@drawable/bottom_shadow"/>
  </RelativeLayout>
  

Note: the only notable exception to this is CardView, this one does cast its own shadow on older api levels.

Have a look at this post for more information.

Solution 3

If you are using Android Material Design, to add a shadow to a view you need to specify the android:elevation attribute in your layout or call myView.setElevation() method in your code. You can have more on defining shadows with material design in the android documentation