How to add bottom shadow to tab layout or Toolbar in android

Question

Hi i need add shadow under my tab layout (like in skype).

My activity xml:

    <RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <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.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:elevation="0dp"
        android:minHeight="?attr/actionBarSize" />
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_below="@+id/tab_layout"
        android:id="@+id/tabContainer"
        android:layout_height="match_parent" />
</RelativeLayout>

When i add android:elevation="10dp" to Tablayout, shadow was added bottom and top .. I need just bottom. See image...

How can i do this ? Thanks in advance.

http://stackoverflow.com/questions/26572048/elevation-on-android-lollipop-not-working — IntelliJ Amiya, Jan 08 '16 at 11:30
I have a issue like yours.. do you have solve the problem ? Can you read my question ? https://stackoverflow.com/questions/54174641/how-can-i-show-the-shadow-only-on-the-bottom-side-of-the-tablayout — aeroxr1, Jan 15 '19 at 14:58

score 36 · Accepted Answer · edited Jan 10 '20 at 10:06

36

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

android:elevation="10dp"

EDIT:
add it to both your tablayout and toolbar

<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"/>

edited Jan 10 '20 at 10:06

marioosh

27,328
49
143
192

answered Jan 08 '16 at 11:18

Drilon Blakqori

2,796
2
17
25

1

@puko as i said add the elevation to your `ToolBar` too – Drilon Blakqori Jan 08 '16 at 11:27
1

@puko also you can specify the level of the shadow by the elevation value. The value of the skype screenshot elevation is probably 4-8dp. Read the material design guide that i suggested, its very helpful! – Drilon Blakqori Jan 08 '16 at 11:35
why toolbar and tablayout have different background? splashGreenTop & colorPrimary ? – user924 Aug 03 '18 at 09:14
1

this answer doesn't make sense, both toolbar and tablayout will have shadow, there should not be any shadow between toolbar and tablayout – user924 Aug 03 '18 at 09:23
@user924 It does make sense because elevation doesn't add the shadow, it elevates the view (think of it as z-index). The ambient and point lightning make the shadow appear. If both views have the same elevation then there will be no shadow between them. – Drilon Blakqori Aug 06 '18 at 08:37

Quick learner · Answer 2 · 2019-08-01T10:47:58.717

This is a Great option to add shadow below Toolbar

Add a view below the tablayout of your desired layout

 <RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <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.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:elevation="0dp"
        android:minHeight="?attr/actionBarSize" />

       <View
        android:layout_width="match_parent"
        android:layout_height="5dp"
        android:layout_below="@+id/tab_layout"
        android:background="@drawable/toolbar_dropshadow" />
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_below="@+id/tab_layout"
        android:id="@+id/tabContainer"
        android:layout_height="match_parent" />
</RelativeLayout>

then create a xml in drawable like this
@drawable/toolbar_dropshadow:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<gradient
    android:startColor="@android:color/transparent"
    android:endColor="#88333333"
    android:angle="90"/>
</shape>

Change the startcolor and endcolor as u want to apply

score 5 · Answer 3 · answered Jul 24 '17 at 06:52

You can add TabLayout as a child in AppBarLayout which has a shadow by default or you can specify the shadow depth by app:elevation="xdp"

   <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:elevation="xdp">

        <android.support.v7.widget.Toolbar 
        ...
        />

        <android.support.design.widget.TabLayout 
        ...
        />

    </android.support.design.widget.AppBarLayout>

full example with toolbar support then, I don't think it will work — user924, Aug 03 '18 at 10:27

score 2 · Answer 4 · edited Jul 29 '16 at 18:51

2

Try to add a simple View between TabLayout and Toolbar. Set background for that View as gradient which mimics shadow.

Shadow.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
  <gradient
        android:startColor="#20000000"
        android:endColor="@android:color/transparent"
        android:angle="90">
  </gradient>
</shape>

edited Jul 29 '16 at 18:51

Guilherme Torres Castro

15,135
7
59
96

answered Jan 08 '16 at 11:22

Kristo

1,339
12
22

score 2 · Answer 5 · answered Apr 15 '17 at 03:01

There is actually a quite simple solution: Just put the Toolbar and the TabLayout inside of an AppBarLayout. For example:

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ToolbarTheme"
        app:titleTextAppearance="@style/ThemeOverlay.AppCompat.ActionBar"
        android:background="@color/colorPrimary"/>

    <android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
</android.support.design.widget.AppBarLayout>

This works perfectly for me and it's the common way to combine the App-/Toolbar and the TabLayout.

Thanks! I don't know why this answer has many votes when it says to set elevation for both toolbar and tablayout https://stackoverflow.com/a/34675808/7767664 — user924, Aug 03 '18 at 10:46

score 1 · Answer 6 · answered Sep 20 '21 at 04:59

Just add one line and it will work.

   android:elevation="5dp"

See full code:

   <com.google.android.material.tabs.TabLayout
    android:id="@+id/tabLayoutSave"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#fff"
    android:elevation="5dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="parent"
    app:tabIndicatorColor="#1d1d1f"
    app:tabIndicatorHeight="4dp"
    app:tabMode="fixed"
    app:tabSelectedTextColor="#1d1d1f"
    app:tabTextColor="#888888" />

score 0 · Answer 7 · answered Jan 05 '17 at 12:13

0

Add elevation into your Tablayout. Material Design

android:elevation="15dp"

answered Jan 05 '17 at 12:13

Jaydip

592
5
27

score -3 · Answer 8 · edited Nov 02 '18 at 06:13

-3

Use app:elevation="0dp" to remove the shadow.

edited Nov 02 '18 at 06:13

Vikasdeep Singh

20,983
15
78
104

answered Nov 02 '18 at 05:41

Makvin

3,475
27
26

How to add bottom shadow to tab layout or Toolbar in android

8 Answers8

Linked