CODEWITHSUNDEEP
androidandroid-viewmaterial-design
Eliezer
Eliezer

Reputation: 7357

Android AppCompat 21 Elevation

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

Upvotes: 77

Views: 75319

Answers (4)

neteinstein
neteinstein

Reputation: 17613

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

Upvotes: -5

Ranjithkumar
Ranjithkumar

Reputation: 18416

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

Upvotes: 48

Derk-Jan
Derk-Jan

Reputation: 1954

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.

Upvotes: 80

thiagolr
thiagolr

Reputation: 7027

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>

Upvotes: 65

Related Questions