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?

Refer here: http://android-developers.blogspot.in/2014/10/appcompat-v21-material-design-for-pre.html They have said it for the Action bar as getSupportActionBar().setElevation(0). So try the same for your card view. — AruLNadhaN, Nov 04 '14 at 11:10
I'm not looking to add elevation to a `CardView`. I would like to add it to any `View` if possible. — Eliezer, Nov 04 '14 at 11:11

score 80 · Accepted Answer · edited Jun 20 '20 at 09:12

80

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.

edited Jun 20 '20 at 09:12

Community

1
1

answered Nov 05 '14 at 00:18

Derk-Jan

1,944
16
24

3

This is still not working right? What exactly are 'shims' :) ? – Daniel Wilson Dec 22 '14 at 11:01
6

@DanielWilson a shim is a workaround (http://en.wikipedia.org/wiki/Shim_(computing)). Since the shadows are native in 5.0, you need a shim for < 5.0 – Derk-Jan Dec 22 '14 at 22:55
Very interesting thankyou :) Well hopefully the engineers won't abandon this for older devices. I'd rather not do it myself :D – Daniel Wilson Dec 23 '14 at 10:04
@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. – Derk-Jan Dec 24 '14 at 14:28
@Derk-Jan unfortunately Android 5 is < 2% market share even months after you wrote that – Greg Ennis Mar 01 '15 at 00:59
@GregEnnis Well it's 3.3%; but yes, its all waiting and waiting. – Derk-Jan Mar 02 '15 at 23:14
Hey what exactly do you mean by ref override? can you post an example? – Eduardo Naveda Mar 11 '15 at 21:25
Sorry ,but it doesn't work on code. My device is android4.1, and I added the newest android-support-v4.jar – Aaron Lee Apr 24 '15 at 08:18
@AaronLee "[...] creates no shims". See the 'no' – Derk-Jan May 26 '15 at 19:07

score 65 · Answer 2 · answered Jun 12 '15 at 15:12

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

enter image description here

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>

can you give information about - android:layout_height="@dimen/toolbar_shadow" — Ranjithkumar, Jun 19 '15 at 07:10
it is the size of the shadow, higher the value, more "elevated" the toolbar is — thiagolr, Jun 19 '15 at 16:23
According to value picked from google design website the endColor should be #45000000. However, it depends on where the value acquired anyway. — Curious Sam, Mar 13 '16 at 22:09

score 48 · Answer 3 · edited May 23 '17 at 12:34

48

I achieve same effect using,

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

My tested output:

enter image description here

reference - https://stackoverflow.com/a/25683148/3879847

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

https://stackoverflow.com/a/40815944/3879847

edited May 23 '17 at 12:34

Community

1
1

answered Jun 21 '15 at 08:40

Ranjithkumar

16,071
12
120
159

1

I used this trick for a RecyclerView adapter and worked great. Thanks for sharing! – Alberto Gaona Jul 15 '15 at 23:00
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 ? – cgr Jun 30 '16 at 13:54
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? – P. Ilyin Apr 05 '17 at 03:42
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.. – Ranjithkumar Apr 05 '17 at 04:09

score -5 · Answer 4 · answered Sep 27 '17 at 15:51

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

for view must use appcompact like 'android.support.v7.widget.AppCompatTextView' — abbasalim, Jan 29 '18 at 19:04

Android AppCompat 21 Elevation

4 Answers4

Edit

Linked