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:

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>

Counterclaim

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). – Roshelle

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 – Counterclaim

Have you tried: <item name="android:windowActionBar">false</item> <item name="windowActionBar">false</item> 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. – Hemiplegia

You may look this code.google.com/p/android/issues/detail?id=179408 – Sovereign

Answer 1

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

Scavenger

careful, only v21+ – Catabolite

This didn't work for me without adding a bottom margin. For an elevation of 4dp, android:layout_marginBottom="10dp" did the job. – Ironlike

Answer 2

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

Sp

this doesn't actually answer the question. does the elevation work on the tablayout by itself or not? – Counterclaim

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. – Sp

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? – Counterclaim

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. – Sp

It's not about prelollipop the entire question is only about 5.0+. And that still doesn't answer what is actually going wrong – Counterclaim

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. – Roshelle

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? – Counterclaim

Answer 3

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.

Ironlike

You should probably use app:elevation – Lustihood

Answer 4

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>

Firstfoot

Answer 5

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

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

then allright!

Seligmann