Skip to content Skip to sidebar Skip to footer
Home / Android / Android Elevation / Material Design

Material Tablayout Elevation Not Working

Post a Comment
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:

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

Solution 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+.

<LinearLayoutxmlns: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.AppBarLayoutandroid:id="@+id/appbar"android:layout_width="match_parent"android:layout_height="wrap_content"><android.support.v7.widget.Toolbarstyle="@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.TabLayoutandroid:id="@+id/tab_layout"android:layout_width="match_parent"android:layout_height="?attr/actionBarSize" /></android.support.design.widget.AppBarLayout><android.support.v4.view.ViewPagerandroid: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

Solution 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.

Solution 4:

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

<android.support.design.widget.CoordinatorLayoutandroid:id="@+id/home_coordinator_layout"android:layout_width="match_parent"android:layout_height="match_parent"><android.support.design.widget.AppBarLayoutandroid: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"><includelayout="@layout/toolbar_appcompat"></include><android.support.design.widget.TabLayoutandroid: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.ViewPagerandroid: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.FloatingActionButtonandroid: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 --><shapexmlns:android="http://schemas.android.com/apk/res/android"android:shape="rectangle"><solidandroid:color="#42000000" /><cornersandroid:radius="5dp" /></shape>

Solution 5:

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

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

then allright!

You may like these posts

Post a Comment for "Material Tablayout Elevation Not Working"