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?

score 21 · Answer 1 · answered May 25 '15 at 18:14

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.

This worked great for me, whereas setElevation, setZ or setTranslationZ only caused the tabs to get darker without actual shadow. — 3c71, Oct 02 '15 at 19:58
This is the simplest and most useful solution out there. Brilliant — rrdev, Nov 11 '15 at 08:05

Jeroen Mols · Answer 2 · 2015-02-15T14:41:08.490

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.

If the framelayout contains some child views, it it probably better to use the shadow drawable as its **foreground**. That way it will be drawn always over them. — Natix, Feb 11 '15 at 01:00
This works, albeit I cant get content to scroll under the shadow. It is not so transparent at the edges. — Skynet, Apr 10 '15 at 05:26

score 1 · Answer 3 · answered Dec 11 '14 at 17:32

1

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

answered Dec 11 '14 at 17:32

Dimitri

8,122
19
71
128

1

My minSdk is 18. Is there a way of using this attribute with support library? – rniski Dec 12 '14 at 09:04
1

elevation is a correct answer but it just supports greater sdk21 – VahidHoseini Sep 06 '16 at 14:22

Jamil Hasnine Tamim · Answer 4 · 2020-02-02T09:41:55.297

Just add elevation to your Tablayout (0dp - 25dp). Read the material design guidelines for more information about elevation.

android:elevation="10dp"

Below example:

<android.support.v7.widget.Toolbar xmlns:local="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:minHeight="?attr/actionBarSize"
    android:background="@color/splashGreenTop"
    local:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    local:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    android:elevation="10dp" />
<android.support.design.widget.TabLayout
    android:id="@+id/tab_layout"
    android:layout_below="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/colorPrimary"
    android:minHeight="?attr/actionBarSize" 
    android:elevation="10dp"/>

Same question: Link

be aware, if you have the following line in the manifest then shadows wont show:

android:hardwareAccelerated="false"

And another link to follow: Link

Adding shadow below TabBar - Material Design

4 Answers4