Android - Elevation not working

Question

I'm migrating an Android App to use Material Design. To verify if I did everything correct i create an empty activity to test some Material Design itens (FAB, raised button, elevation on views, cards, lists, etc...).

The buttons appear to OK, but the elevation on views aren't. I searched the internet for an answer but didn't find it. I'm not using padding, transparent background, etc. Here's my code:

values-v21/styles.xml:

<resources>

    <style name="AppThemeNoActionBar" parent="AppTheme">
        <item name="android:navigationBarColor">@color/colorPrimary</item>
    </style>

    <style name="AppTheme" parent="MyMaterialTheme.Base">
        <item name="android:windowContentTransitions">true</item>
        <item name="android:windowAllowEnterTransitionOverlap">true</item>
        <item name="android:windowAllowReturnTransitionOverlap">true</item>
        <item name="android:windowSharedElementEnterTransition">@android:transition/move</item>
        <item name="android:windowSharedElementExitTransition">@android:transition/move</item>
    </style>

    <style name="MyMaterialTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="windowNoTitle">true</item>
        <item name="windowActionBar">false</item>
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

    <style name="Button" parent="Base.Widget.AppCompat.Button.Colored">
        <item name="android:backgroundTint">@color/colorAccent</item>
    </style>

    <color name="colorPrimary">#E88768</color>
    <color name="colorPrimaryDark">#CC785C</color>
    <color name="colorAccent">#E88768</color>
    <color name="textColorPrimary">#000000</color>
    <color name="windowBackground">#FFFFFF</color>
    <color name="navigationBarColor">#E88768</color>
</resources>

layout-v21/start_activity.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@color/white"
                xmlns:app="http://schemas.android.com/apk/res-auto">
    <HorizontalScrollView
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:layout_alignParentStart="true"
        android:elevation="12dp"
        android:translationZ="12dp"
        android:id="@+id/scrollView">

    </HorizontalScrollView>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:layout_below="@+id/scrollView">

    </LinearLayout>

</RelativeLayout>

Can anyone help me?

I haven't messed with elevations or z axis translations much, but is the elevation additive to the translation? If not, wouldn't your translationZ and elevation cancel one another out. Again, haven't really messed with this at all. More of a question than a suggestion :P — zgc7009, Feb 11 '16 at 18:10

score 8 · Accepted Answer · answered Feb 11 '16 at 18:18

8

Try setting a background color / drawable to your HorizontalScrollView:

android:background="@android:color/white"

This seems to be necessary for the shadow to be drawn.

answered Feb 11 '16 at 18:18

dthulke

949
9
23

2

I think it's actually a feature :) The reason is that if you don't specify a background it's implicitly transparent. The shadow created by the elevation property adapts to backgrounds with transparency, meaning the shadow respects for example rounded corners. Because of that if the background is completely transparent no shadow is generated. – dthulke Feb 11 '16 at 18:34

ʍѳђઽ૯ท · Answer 2 · 2016-02-11T18:16:47.167

If that elevation didn't work, you can use a trick like putting the contents in the CardView and then setting:

card_view:cardElevation="2dp"

Or:

card_view:cardCornerRadius="4dp"

For corners.

This is the best way, However you might see the elevations on Android Studio's Preview, but actually, all of them are not working when you are compiled the app or it is running on emulator or a real device.So, in these situations, better to use that CardView.

For exmaple:

<android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:clickable="true"
        android:foreground="?android:attr/selectableItemBackground"
        card_view:cardCornerRadius="4dp"
        card_view:cardElevation="2dp">

        <HorizontalScrollView
            android:id="@+id/scrollView"
            android:layout_width="match_parent"
            android:layout_height="40dp"
            android:layout_alignParentStart="true"
            android:translationZ="12dp">

        </HorizontalScrollView>
    </android.support.v7.widget.CardView>

This work's, but this is a workaround right? In Android examples they don't apply "CardView" to create the shadows.. — Elvis Oliveira, Feb 11 '16 at 18:22
Yeah, for example, you may want to use `Button` on preLollipop and with a shadow like googleplay design, but you can't see the buttons shadow or the other stuffs, then we need to use a `CardView` like my answer.Just consider that as an another way to do that :) — ʍѳђઽ૯ท, Feb 11 '16 at 18:26

Android - Elevation not working

2 Answers2