Android View shadow

Question

I searched around, and I could not find a proper way to do this. I want to have the following shadow effects on my views:

To be honest, I do not know if this second one is done by applying shadow effect. Any ideas?

You mean this? http://stackoverflow.com/questions/4406524/how-to-set-shadow-to-a-view-in-android (check the highest vote answer, not the marked answer) — Luke Vo, Jan 19 '14 at 05:25
@DatVM, thanks, this seems like to do the trick, but I was thinking maybe there are built in tools in android sdk. For example, adding drop shadows for linear layouts by just adding some lines of code :P — longwalker, Jan 19 '14 at 13:38
Similar question - https://stackoverflow.com/q/52954743/9640177 - adding shadow to vector drawable — Mayank Kumar Chaudhari, Dec 02 '18 at 08:10

score 167 · Accepted Answer · edited Jul 25 '17 at 09:55

I know this question has already been answered but I want you to know that I found a drawable on Android Studio that is very similar to the pics you have in the question: Take a look at this:

android:background="@drawable/abc_menu_dropdown_panel_holo_light"

It looks like this:

enter image description here

Hope it will be helpful

Edit

The option above is for the older versions of Android Studio so you may not find it. For newer versions:

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

Moreover, if you want to have your own custom shape, I suggest to use a drawing software like Photoshop and draw it.

enter image description here

Don't forget to save it as .9.png file (example: my_background.9.png)

Read the documentation: Draw 9-patch

Edit 2

An even better and less hard working solution is to use a CardView and set app:cardPreventCornerOverlap="false" to prevent views to overlap the borders:

<android.support.v7.widget.CardView
    android:id="@+id/card_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cardCornerRadius="2dp"
    app:cardElevation="2dp"
    app:cardPreventCornerOverlap="false"
    app:contentPadding="0dp">

    <!-- your layout stuff here -->

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

Also make sure to have included the latest version in the build.gradle, current is

compile 'com.android.support:cardview-v7:26.0.0'

Thanks, actually, it looks very similar. I also found "google card layout" for android, and they are pretty cool! — longwalker, Jan 30 '14 at 14:43
Awesome. Just an FYI for future viewers, this is in `//extras/android/support`. — theblang, Aug 20 '14 at 20:26

score 105 · Answer 2 · edited Sep 09 '14 at 01:40

105

I'm using Android Studio 0.8.6 and I couldn't find:

android:background="@drawable/abc_menu_dropdown_panel_holo_light"

so I found this instead:

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

and it looks like this:

enter image description here

edited Sep 09 '14 at 01:40

Sean Barbeau

11,496
8
58
111

answered Sep 05 '14 at 09:53

Repo

1,736
1
10
6

3

but we cannot add corner radius with it?! – Fay007 Feb 01 '19 at 14:05

score 41 · Answer 3 · edited Jan 30 '16 at 15:56

putting a background of @android:drawable/dialog_holo_light_frame, gives shadow but you can't change background color nor border style, so it's better to benefit from the shadow of it, while still be able to put a background via layer-list

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!--the shadow comes from here-->
    <item
        android:bottom="0dp"
        android:drawable="@android:drawable/dialog_holo_light_frame"
        android:left="0dp"
        android:right="0dp"
        android:top="0dp">

    </item>

    <item
        android:bottom="0dp"
        android:left="0dp"
        android:right="0dp"
        android:top="0dp">
        <!--whatever you want in the background, here i preferred solid white -->
        <shape android:shape="rectangle">
            <solid android:color="@android:color/white" />

        </shape>
    </item>
</layer-list>

save it in the drawable folder under say shadow.xml

to assign it to a view, in the xml layout file set the background of it

android:background="@drawable/shadow"

Did you check if it works? The second doesn't do anything. I can't change it to transparent or rounded corners. — zeeshan, Feb 25 '16 at 17:23
Among everything i have tried this is the only thing that works, thanks . — Shyam Sunder, Dec 07 '17 at 15:50

score 36 · Answer 4 · edited Jan 22 '18 at 08:30

Create card_background.xml in the res/drawable folder with the following code:

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

<item>
    <shape android:shape="rectangle">
        <solid android:color="#BDBDBD"/>
        <corners android:radius="5dp"/>
    </shape>
</item>

<item
    android:left="0dp"
    android:right="0dp"
    android:top="0dp"
    android:bottom="2dp">
    <shape android:shape="rectangle">
        <solid android:color="#ffffff"/>
        <corners android:radius="5dp"/>
    </shape>
</item>
</layer-list>

Then add the following code to the element to which you want the card layout

android:background="@drawable/card_background"

the following line defines the color of the shadow for the card

<solid android:color="#BDBDBD"/>

This isn't really a shadow - because it doesn't fade. It's more like a border on two of the sides. — ban-geoengineering, Jan 16 '17 at 16:39

score 31 · Answer 5 · answered Feb 19 '16 at 19:59

31

Use elevation property to achieve a shadow affect:

<View ...
    android:elevation="2dp"/>

This is only to be used past v21, check out this link: http://developer.android.com/training/material/shadows-clipping.html

answered Feb 19 '16 at 19:59

mossman252

462
4
3

Best answer so far also working in Android 13 – Arsalan Fakhar Siddiqui Jan 23 '23 at 11:59

score 25 · Answer 6 · edited Jan 22 '16 at 19:43

25

CardView gives you true shadow in android 5+ and it has a support library. Just wrap your view with it and you're done.

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

It require the next dependency.

dependencies {
    ...
    compile 'com.android.support:cardview-v7:21.0.+'
}

edited Jan 22 '16 at 19:43

dsh

12,037
3
33
51

answered Sep 04 '15 at 10:17

Ilya Gazman

31,250
24
137
216

1

This is the only right answer, since only `CardView` also has varying shadow levels for different elevations in compat mode. – Jarett Millard Feb 10 '16 at 19:50
I recommend MaterialCardView since it's clearer and has more capabilities. – HF_ Jan 13 '20 at 13:08

score 12 · Answer 7 · answered Aug 05 '15 at 01:35

12

This is may be late but for those who are still looking for answer for this I found a project on git hub and this is the only one that actually fit my needs. android-materialshadowninepatch

Just add this line on your build.gradle dependency

compile 'com.h6ah4i.android.materialshadowninepatch:materialshadowninepatch:0.6.3'

cheers. thumbs up for the creator ! happycodings

answered Aug 05 '15 at 01:35

ralphgabb

10,298
3
47
56

Hey @ralphgabb, Does this still work good for you or you have a better solution for pre lollipop devices? – Swapnil Jun 19 '19 at 13:12
@Swapnil not sure if the AndroidX supports this now I am no longer supporting pre-Marshmallow devices though. – ralphgabb Jun 19 '19 at 22:24

score 9 · Answer 8 · answered Dec 22 '18 at 10:47

I know this is stupidly hacky,
but if you want to support under v21, here are my achievements.

rectangle_with_10dp_radius_white_bg_and_shadow.xml

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

    <!-- Shadow layers -->
    <item
        android:left="1dp"
        android:right="1dp"
        android:top="3dp">
        <shape>
            <corners android:radius="10dp" />
            <padding
                android:bottom="1.8dp"
                android:left="1dp"
                android:right="1dp"
                android:top="1dp" />
            <solid android:color="@color/shadow_hack_level_1" />
        </shape>
    </item>
    <item
        android:left="1dp"
        android:right="1dp"
        android:top="3dp">
        <shape>
            <corners android:radius="10dp" />
            <padding
                android:bottom="1.8dp"
                android:left="1dp"
                android:right="1dp"
                android:top="1dp" />
            <solid android:color="@color/shadow_hack_level_2" />
        </shape>
    </item>
    <item
        android:left="1dp"
        android:right="1dp"
        android:top="3dp">
        <shape>
            <corners android:radius="10dp" />
            <padding
                android:bottom="1.8dp"
                android:left="1dp"
                android:right="1dp"
                android:top="1dp" />
            <solid android:color="@color/shadow_hack_level_3" />
        </shape>
    </item>
    <item
        android:left="1dp"
        android:right="1dp"
        android:top="3dp">
        <shape>
            <corners android:radius="10dp" />
            <padding
                android:bottom="1.8dp"
                android:left="1dp"
                android:right="1dp"
                android:top="1dp" />
            <solid android:color="@color/shadow_hack_level_4" />
        </shape>
    </item>
    <item
        android:left="1dp"
        android:right="1dp"
        android:top="3dp">
        <shape>
            <corners android:radius="10dp" />
            <padding
                android:bottom="1.8dp"
                android:left="1dp"
                android:right="1dp"
                android:top="1dp" />
            <solid android:color="@color/shadow_hack_level_5" />
        </shape>
    </item>
    <item
        android:left="1dp"
        android:right="1dp"
        android:top="3dp">
        <shape>
            <corners android:radius="10dp" />
            <padding
                android:bottom="1.8dp"
                android:left="1dp"
                android:right="1dp"
                android:top="1dp" />
            <solid android:color="@color/shadow_hack_level_6" />
        </shape>
    </item>
    <item
        android:left="1dp"
        android:right="1dp"
        android:top="3dp">
        <shape>
            <corners android:radius="10dp" />
            <padding
                android:bottom="1.8dp"
                android:left="1dp"
                android:right="1dp"
                android:top="1dp" />
            <solid android:color="@color/shadow_hack_level_7" />
        </shape>
    </item>
    <item
        android:left="1dp"
        android:right="1dp"
        android:top="3dp">
        <shape>
            <corners android:radius="10dp" />
            <padding
                android:bottom="1.8dp"
                android:left="1dp"
                android:right="1dp"
                android:top="1dp" />
            <solid android:color="@color/shadow_hack_level_8" />
        </shape>
    </item>
    <item
        android:left="1dp"
        android:right="1dp"
        android:top="3dp">
        <shape>
            <corners android:radius="10dp" />
            <padding
                android:bottom="1.8dp"
                android:left="1dp"
                android:right="1dp"
                android:top="1dp" />
            <solid android:color="@color/shadow_hack_level_9" />
        </shape>
    </item>
    <item
        android:left="1dp"
        android:right="1dp"
        android:top="3dp">
        <shape>
            <corners android:radius="10dp" />
            <padding
                android:bottom="1.8dp"
                android:left="1dp"
                android:right="1dp"
                android:top="1dp" />
            <solid android:color="@color/shadow_hack_level_10" />
        </shape>
    </item>

    <!-- Background layer -->
    <item>
        <shape>
            <solid android:color="@android:color/white" />
            <corners android:radius="10dp" />
        </shape>
    </item>

</layer-list>

rectangle_with_10dp_radius_white_bg_and_shadow.xml (v21)

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@android:color/white" />
    <corners android:radius="10dp" />
</shape>

view_incoming.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/rectangle_with_10dp_radius_white_bg_and_shadow"
    android:elevation="7dp"
    android:gravity="center"
    android:minWidth="240dp"
    android:minHeight="240dp"
    android:orientation="horizontal"
    android:padding="16dp"
    tools:targetApi="lollipop">

    <TextView
        android:id="@+id/text1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        tools:text="Hello World !" />

</LinearLayout>

Here is result:

Under v21 (this is which you made with xml)

Above v21 (real elevation rendering)

The one significant difference is it will occupy the inner space from the view so your actual content area can be smaller than >= lollipop devices.

It would be better to set real values of colors to see a result. — CoolMind, Jan 13 '22 at 09:25

score 7 · Answer 9 · answered Feb 15 '18 at 12:14

If you are in need of the shadows properly to be applied then you have to do the following.

Consider this view, defined with a background drawable:

<TextView
    android:id="@+id/myview"
    ...
    android:elevation="2dp"
    android:background="@drawable/myrect" />

The background drawable is defined as a rectangle with rounded corners:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">
    <solid android:color="#42000000" />
    <corners android:radius="5dp" />
</shape>

This is the recomended way of appying shadows check this out https://developer.android.com/training/material/shadows-clipping.html#Shadows

score 6 · Answer 10 · edited Jul 10 '19 at 20:06

Create background drawable like this to show rounded shadow.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Drop Shadow Stack -->
    <item>
        <shape>
            <corners android:radius="4dp" />
            <padding android:bottom="1dp" android:left="1dp"
                     android:right="1dp"  android:top="1dp" />
            <solid android:color="#00CCCCCC" />
        </shape>
    </item>
    <item>
        <shape>
            <corners android:radius="4dp" />
            <padding android:bottom="1dp" android:left="1dp"
                     android:right="1dp"  android:top="1dp" />
            <solid android:color="#10CCCCCC" />
        </shape>
    </item>
    <item>
        <shape>
            <corners android:radius="4dp" />
            <padding android:bottom="1dp" android:left="1dp"
                     android:right="1dp"  android:top="1dp" />
            <solid android:color="#20d5d5d5" />
        </shape>
    </item>
    <item>
        <shape>
            <corners android:radius="6dp" />
            <padding android:bottom="1dp" android:left="1dp"
                     android:right="1dp"  android:top="1dp" />
            <solid android:color="#30cbcbcb" />
        </shape>
    </item>
    <item>
        <shape>
            <corners android:radius="4dp" />
            <padding android:bottom="1dp" android:left="1dp"
                     android:right="1dp"  android:top="1dp" />
            <solid android:color="#50bababa" />
        </shape>
    </item>

    <!-- Background -->
    <item>
        <shape>
            <solid android:color="@color/gray_100" />
            <corners android:radius="4dp" />
        </shape>
    </item>
</layer-list>

Please add description also for the code what you have provided. — Mangaldeep Pannu, Apr 18 '19 at 06:34
Probably it's a good solution, but on a white background it looks like a light-gray rectangle (if set a thin border). — CoolMind, Jan 13 '22 at 09:27

score 6 · Answer 11 · answered Jul 23 '19 at 09:59

This question may be old, but for anybody in future that wants a simple way to achieve complex shadow effects check out my library here https://github.com/BluRe-CN/ComplexView

Using the library, you can change shadow colors, tweak edges and so much more. Here's an example to achieve what you seek for.

<com.blure.complexview.ComplexView
        android:layout_width="400dp"
        android:layout_height="600dp"
        app:radius="10dp"
        app:shadow="true"
        app:shadowSpread="2">

        <com.blure.complexview.ComplexView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:color="#fdfcfc"
            app:radius="10dp" />
    </com.blure.complexview.ComplexView>

To change the shadow color, use app:shadowColor="your color code".

your lib is awesome! Shadowing in Android is painful even in 2023. — Maxdestroyer, Apr 14 '23 at 11:34

score 4 · Answer 12 · answered Nov 18 '17 at 07:34

4

Use the elevation property for shadow affect:

<YourView
    ...
    android:elevation="3dp"/>

answered Nov 18 '17 at 07:34

Ofek Ashery

86
1
3

Using Elevation requires the device to run Lollipop. – Shane Rowatt Nov 18 '17 at 08:08

score 1 · Answer 13 · answered Jun 23 '18 at 10:08

use this shape as background :

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

    <item android:drawable="@android:drawable/dialog_holo_light_frame"/>

    <item>
        <shape android:shape="rectangle">
            <corners android:radius="1dp" />
            <solid android:color="@color/gray_200" />
        </shape>
    </item>

</layer-list>

Android View shadow

13 Answers13

Linked