Material TabLayout elevation not working

Question

For some reason the elevation attribute does not seem to be working on the new TabLayout in the material design support library. Any ideas? XML:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<android.support.design.widget.TabLayout
    android:id="@+id/tab_layout"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:elevation="6dp" />

<android.support.v4.view.ViewPager
    android:id="@+id/view_pager"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1" />
</LinearLayout>

hooked up like this in a parent fragment:

ViewPager viewPager = (ViewPager) view.findViewById(R.id.view_pager);
TabLayout tabLayout = (TabLayout) view.findViewById(R.id.tab_layout);
AppPagerAdapter appPagerAdapter = new AppPagerAdapter(getChildFragmentManager());
viewPager.setAdapter(appPagerAdapter);
tabLayout.setupWithViewPager(viewPager);

image: relevant image

The activity has a toolbar but this is outside of the fragment and should not affect the tablayout's ability to have a shadow:

relevant activity xml:

<LinearLayout 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"
android:orientation="vertical"
tools:context="com.bluckapps.appinfomanager.ui.MainActivity">

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/colorPrimary"
    android:elevation="6dp"
    android:minHeight="?attr/actionBarSize"
    tools:ignore="UnusedAttribute" />

<FrameLayout
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1" />

</LinearLayout>

Are you using a `Toolbar` (I know it doesn't say in your layout but I'm just wondering)? Also note that the `android:elevation` attribute would only work with API levels 21 and higher (i.e. Android Lollipop (5.0) and higher). — Farbod Salamat-Zadeh, Jul 06 '15 at 15:59
the look should have the shadow below the tabs, rather than above them. the toolbar is in the activity outside of the fragment. I can expand the question a bit to elaborate — dabluck, Jul 06 '15 at 16:03
Have you tried: _false false_ in your style? This should remove the shadow under the ActionBar. Then you could add a View in your xml just on top of the layout that shows a darker color. — Rick, Jul 12 '15 at 19:25
You may look this https://code.google.com/p/android/issues/detail?id=179408 — sachithkn, Jul 13 '15 at 11:59

score 78 · Accepted Answer · answered Aug 02 '15 at 22:01

78

To make the shadow show, you have to set a background on your TabLayout. It can be the same color as your window background (as long as it's a solid color with no alpha).

<android.support.design.widget.TabLayout
    android:id="@+id/tab_layout"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:elevation="6dp"
    android:background="@color/white" />

answered Aug 02 '15 at 22:01

sorianiv

4,605
1
21
27

7

careful, only v21+ – lostintranslation Feb 01 '17 at 02:59
This didn't work for me without adding a bottom margin. For an elevation of 4dp, ```android:layout_marginBottom="10dp"``` did the job. – Ivan Jul 17 '18 at 20:33

score 7 · Answer 2 · answered Jul 06 '15 at 15:57

7

You are supposed to use ToolBar with TabLayout. Then you can put them both inside an AppBarLayout and get a shadow. This only works on Lollipop+.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:orientation="vertical">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.v7.widget.Toolbar
            style="@style/ToolBarStyle"
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="?attr/colorPrimary"
            android:minHeight="@dimen/abc_action_bar_default_height_material"/>

        <android.support.design.widget.TabLayout
            android:id="@+id/tab_layout"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize" />
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />
</LinearLayout>

See http://inthecheesefactory.com/blog/android-design-support-library-codelab/en

answered Jul 06 '15 at 15:57

Binoy Babu

15,749
17
87
127

this doesn't actually answer the question. does the elevation work on the tablayout by itself or not? – dabluck Jul 06 '15 at 16:04
This is just a workaround and possibly the best practice for the issue. I don't know the exact reason as to why it doesn't work. – Binoy Babu Jul 06 '15 at 16:09
well thanks for that but is there a relevant bug or reason it isn't working? I guess what I'm asking is am I using it incorrectly or is there actually a google bug somewhere? – dabluck Jul 06 '15 at 16:10
2

I'm pretty confident that this is the best practice for TabLayout. Wrapping it with AppBar. In future releases of design library, google may add shadow support to prte lollipop. – Binoy Babu Jul 06 '15 at 16:12
It's not about prelollipop the entire question is only about 5.0+. And that still doesn't answer what is actually going wrong – dabluck Jul 06 '15 at 16:15
I think Binoy's solution is the best practice for this situation. Is there any reason why you need the `TabLayout` in the separate layout - it could just be part of the same layout wrapped in an `AppBarLayout`. – Farbod Salamat-Zadeh Jul 06 '15 at 16:16
It would change the architecture of the app. If you nest it with the toolbar it makes it less modular and more difficult to support different screen sizes. Plus it's just one more level of view hierarchy. In general it should be possible to use tablayout without toolbar correct? – dabluck Jul 06 '15 at 16:24

score 2 · Answer 3 · answered Jul 12 '15 at 19:06

2

You'll need to use CoordinatorLayout as a container layout for your activity and then place your TabLayout right below AppBarLayout. According to Material Design specs you should use

android:elevation="4dp"

elevation and make your TabLayout be a part of AppBarLayout. Also note that elevation will only be visible on v21 (5.0) or higher.

answered Jul 12 '15 at 19:06

Ivan V

2,934
3
23
36

You should probably use `app:elevation` – AllDayAmazing Sep 29 '16 at 23:22

SilentKnight · Answer 4 · 2015-07-13T09:15:58.547

No need to use a Fragment. An Activity layout is enough. Like:

<android.support.design.widget.CoordinatorLayout
    android:id="@+id/home_coordinator_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/home_appbar_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:elevation="2dp"
        app:paddingEnd="0dp"
        app:paddingStart="0dp">

        <include layout="@layout/toolbar_appcompat"></include>

        <android.support.design.widget.TabLayout
            android:id="@+id/home_tab_layout"
            style="@style/TabLayoutStyle"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabContentStart="2dp"
            app:tabGravity="fill"
            app:tabIndicatorColor="@android:color/white"
            app:tabIndicatorHeight="2dp"
            app:tabMinWidth="24dp"
            app:tabMode="fixed"
            app:tabPadding="1dp"
            app:tabSelectedTextColor="@android:color/tab_indicator_text"
            app:tabTextColor="@android:color/darker_gray" />
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/home_view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        app:paddingEnd="0dp"
        app:paddingStart="0dp" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab_home"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="20dp"
        android:src="@drawable/arrow_toggle"
        app:borderWidth="1dp"
        app:elevation="3dp"
        app:fabSize="normal"
        app:layout_anchor="@+id/home_coordinator_layout"
        app:layout_anchorGravity="bottom|right|end"
        app:pressedTranslationZ="2dp"
        app:rippleColor="@color/swipe_refresh_color_scheme_green" />

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

Meanwhile, elevation is useful on Lollipop. If you want to be compatible backwards, you'd better use app:elevation. If app:elevation doesn't work, you'd better add a shadow below TabLayout manually, just like android:background="@drawable/myrect":

<!-- res/drawable/myrect.xml -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">
    <solid android:color="#42000000" />
    <corners android:radius="5dp" />
</shape>

score -5 · Answer 5 · edited Apr 19 '16 at 08:14

-5

All answers above didn't work for me ,so i found out this:

app:tabIndicatorHeight="4dp"
app:tabIndicatorColor="@color/colorAccent"

then allright!

edited Apr 19 '16 at 08:14

Dovydas Šopa

2,242
8
24
31

answered Apr 19 '16 at 07:27

bibisi

1
1

Material TabLayout elevation not working

5 Answers5

Linked