Android AppCompat 21 Elevation

Question

Is there any way to add elevation to a View in pre-lollipop devices without wrapping them in a CardView?

Ptisan

Refer here: android-developers.blogspot.in/2014/10/… They have said it for the Action bar as getSupportActionBar().setElevation(0). So try the same for your card view. – Flatfish

I'm not looking to add elevation to a CardView. I would like to add it to any View if possible. – Ptisan

Answer 1

ViewCompat.setElevation(View, int) currently creates no shims.

The only way to simulate elevation right now is to apply a shadow pre-v21. Define your style/layout/drawable in values and override it in values-v21. For buttons I use style overrides. For layouts, I usually go for reference override (use @null to get rid of a drawable).

Hopefully in the future an update to the support library will add shims.

This reddit thread keeps track of said update.

Edit

The new support design library actually does create shims for the floating action button.

Parallel

This is still not working right? What exactly are 'shims' :) ? – Spireme

@DanielWilson a shim is a workaround (en.wikipedia.org/wiki/Shim_(computing)). Since the shadows are native in 5.0, you need a shim for < 5.0 – Parallel

Very interesting thankyou :) Well hopefully the engineers won't abandon this for older devices. I'd rather not do it myself :D – Spireme

@DanielWilson well to be honest: Material Design is part of the 5.0+ generation. It doesn't really make "sense" having it pre lollipop. I think that and not having the renderthread are reasons why it won't be supported. – Parallel

@Parallel unfortunately Android 5 is < 2% market share even months after you wrote that – Threnody

@GregEnnis Well it's 3.3%; but yes, its all waiting and waiting. – Parallel

Hey what exactly do you mean by ref override? can you post an example? – Alysa

Sorry ,but it doesn't work on code. My device is android4.1, and I added the newest android-support-v4.jar – Eanes

@AaronLee "[...] creates no shims". See the 'no' – Parallel

Answer 2

This is an example how to add a shadow below the Toolbar on pre-lollipop devices:

The layout should be this:

<RelativeLayout
    android:id="@+id/toolbar_container"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true" >

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:animateLayoutChanges="true"
        android:background="?attr/colorPrimary"
        android:minHeight="?attr/actionBarSize"
        app:theme="@style/ThemeOverlay.AppCompat.ActionBar" />

    <View
        android:id="@+id/toolbar_shadow"
        android:layout_width="match_parent"
        android:layout_height="@dimen/toolbar_shadow"
        android:layout_below="@id/toolbar"
        android:background="@drawable/toolbar_dropshadow" />
</RelativeLayout>

And the shadow is:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >

    <gradient
        android:angle="90"
        android:endColor="#88444444"
        android:startColor="@android:color/transparent" />

</shape>

Uneven

can you give information about - android:layout_height="@dimen/toolbar_shadow" – Bibliogony

it is the size of the shadow, higher the value, more "elevated" the toolbar is – Uneven

According to value picked from google design website the endColor should be #45000000. However, it depends on where the value acquired anyway. – Trainman

Such a simple solution. Thank you! – Obsess

Answer 3

I achieve same effect using,

  android:background="@android:drawable/dialog_holo_light_frame"

My tested output:

reference - https://mcmap.net/q/138928/-android-view-shadow

Update : If you want change color of this drawable try @Irfan answer

https://mcmap.net/q/138929/-how-to-implement-the-material-design-elevation-for-pre-lollipop

Bibliogony

I used this trick for a RecyclerView adapter and worked great. Thanks for sharing! – Tonisha

How to do I do this for AlertDialog ? I have a style that is applied to dialog so I added the mentioned attribute there but it looks weird. It looks as if I have added multiple sheets/layers as background. Any clue ? – Biathlon

Using of system resources like @android:drawable/dialog_holo_light_frame is dangerous, isn't it? Some producers of mobile devices can override system resources, so this resources may be displayed differently on different devices, isn't it? – Opulence

I Using this resource more than 2 years.. Still, I am not getting any issues.. It's working in Samsung, Asus, Nexus, moto.. And Lenovo also.. – Bibliogony

Answer 4

You can now use the schema xmlns:app="http://schemas.android.com/apk/res-auto" and app:elevation

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools">
...

<LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|end"
            app:elevation="5dp">

Angieangil

for view must use appcompact like 'android.support.v7.widget.AppCompatTextView' – Mcmillen