2

I am setting elevation on the TabLayout inside a ViewPager but it is not showing at all. I tried a lot of answers here on stackoverflow but couldn't solve the problem. Setting android:clipToPadding="false" in the CoordinatorLayout does not solve the problem either. Any help would be appreciated. Here is the xml of the layout that I am using but getting now elevation:

 <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <View
        android:id="@+id/statusBarBackground"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        android:clipToPadding="false" >

        <ScrollView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:clipToPadding="false" >

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

    </ScrollView>

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabMode="fixed"
            app:tabGravity="fill"
            app:elevation="3dp" />

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

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="android.support.design.widget.AppBarLayout$ScrollingViewBehavior" />

</android.support.design.widget.CoordinatorLayout>
Ali
  • 839
  • 11
  • 21

5 Answers5

6

  • To make the shadow visible, 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).

  • Also you have to give it Tablayout margin to see elevation. minimum margin should be elevation you give.

    android.support.design.widget.TabLayout ... android:elevation="6dp" android:margin="10dp" // margin > elevation android:background="@color/white" />

Khemraj Sharma
  • 57,232
  • 27
  • 203
  • 212
2

change app:elevation="3dp" to android:elevation="3dp"

<android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabMode="fixed"
            app:tabGravity="fill"
         change ---->  android:elevation="3dp" />
akshay_shahane
  • 4,423
  • 2
  • 17
  • 30
  • Still no elevation. I am using support library though. https://stackoverflow.com/a/33054366/6050536 – Ali Sep 24 '17 at 13:45
1

Use CardView elevation; Ye maybe its byckle, but its work for me

<android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:cardCornerRadius="0dp"
        app:cardElevation="5dp">
        <android.support.design.widget.TabLayout
                 android:id="@+id/tab"
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
                 />
</android.support.v7.widget.CardView>
alex11
  • 111
  • 3
0

You have couple of problems with your layout:

  1. change app:elevation="3dp" -> android:elevation="3dp"
  2. add android:background="@color/colorPrimary" to your TabLayout
  3. Add android:paddingBottom="3dp" to your AppBarLayout

The main idea is that your shadow will not show if the view background is transparent or the parent view is clipping your shadow.

You will still have some problems to solve, but is a start.

Alirio Mendes
  • 809
  • 1
  • 11
  • 16
  • still no shadow and the padding made TabLayout to rise. – Ali Sep 24 '17 at 14:58
  • If your saying it cause your TabLayout to rise, it mean is casting a shadow. How else you would have perception of depth? So your problem now is that the elevation of your ScrollView is lower than of your TabLayout, meaning the shadow of TabLayout is on the ScrollView. – Alirio Mendes Sep 24 '17 at 15:15
  • TabLayout is below ScrollView so I do not think their shadows overlap. – Ali Sep 24 '17 at 15:44
  • AppBarLayout is sub class of LinearLayout, is lays it's children from top to bottom or left to right, depending on the orientation, whenever you set elevation on a child it's cast a shadow on both up e bellow children. – Alirio Mendes Sep 24 '17 at 16:53
0

Change the AppBarLayout android:elevation to 0dp and change TabLayout android:elevation to 16dp

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <View
        android:id="@+id/statusBarBackground"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        android:elevation="0dp" >

        <ScrollView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:clipToPadding="false" >

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

    </ScrollView>

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabMode="fixed"
            app:tabGravity="fill"
            android:elevation="16dp" />

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

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="android.support.design.widget.AppBarLayout$ScrollingViewBehavior" />

</android.support.design.widget.CoordinatorLayout>
Jay Patel
  • 528
  • 8
  • 26