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?

Dihydrostreptomycin

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

Answer 1

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.

Arose

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

Answer 2

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>

Thinnish

This work's, but this is a workaround right? In Android examples they don't apply "CardView" to create the shadows.. – Dihydrostreptomycin

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 :) – Aphid

Answer 3

For MaterialButton, use the following theme:

android:theme="@style/Theme.MaterialComponents.Light"

Cutlor