how to set shadow to a View in android?

Question

I want to know how to add a shadow layer to any general View in android. for eg: suppose i have a layout xml, showing something like this..

<?xml version="1.0" encoding="utf-8"?>  
<LinearLayout  
    android:layout_height="wrap_content"  
    android:layout_width="wrap_content"  
    <Button....  
    ...  
</LinearLayout>

Now when it is displayed I want to have a shadow around it.

Similar Question here https://stackoverflow.com/q/52954743/9640177 - how to outline vector drawable — Mayank Kumar Chaudhari, Dec 02 '18 at 08:07

Sapan Diwakar · Answer 1 · 2014-08-13T14:50:18.623

The best way to create a shadow is to use a 9patch image as the background of the view (or a ViewGroup that wraps the view).

The first step is to create a png image with a shadow around it. I used photoshop to create such an image. Its really simple.

Create a new image with Photoshop.
Add a layer and create a black square of 4x4.
Create a shadow on the layer by selecting the layer in layer explorer and clicking on a button titled fx and choosing drop shadow.
Export the image as png.

The next step is to create 9-patch drawables from this image.

Open draw9patch from android-sdk/tools
Open the image in draw9patch
Create 4 black lines on the four sides of the square like the following and then save the image as shadow.9.png.

Now you can add this shadow as the background of the views you want to add the shadow to. Add shadow.9.png to res/drawables. Now add it as a background:

<LinearLayout
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:background="@drawable/shadow"
  android:paddingBottom="5px"
  android:paddingLeft="6px"
  android:paddingRight="5px"
  android:paddingTop="5px"
>

I recently wrote a blog post that explains this in detail and includes the 9patch image that I use for creating the shadow.

This is a much better solution than the accepted answer. Also, the blog link is dead. — Isaac Zais, Aug 13 '14 at 13:40
@ranjith From a terminal, run the draw9patch command from your SDK sdk/tools directory to launch the Draw 9-patch tool. — Sapan Diwakar, Jun 23 '15 at 15:54
there is tool we can create 9 patch images online http://inloop.github.io/shadow4android/ — Rukmal Dias, Nov 01 '17 at 09:05

DJphy · Answer 2 · 2014-12-17T18:55:45.087

Assuming u would use a linear layout(i have considered a vertical linear layout)..and have a view just below your linear layout.Now for this view provide a start colour and end colour.. I also wanted to get this thing,its working for me..If you need a even better effect,then just work around the start and end colour.

activity_main

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <LinearLayout
        android:id="@+id/vertical"
        android:layout_width="match_parent"
        android:layout_height="150dp"
        android:background="@drawable/layout_back_bgn"
        android:orientation="vertical" >
    </LinearLayout>

    <View
        android:layout_below="@+id/vertical"
        android:layout_width="match_parent"
        android:layout_height="10dp"
        android:background="@drawable/shadow"
        >
    </View>


</LinearLayout>

layout_back_bgn.xml

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >

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

</shape>

shadow.xml

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android"  android:shape="rectangle">    
    <gradient
        android:startColor="#4D4D4D"
        android:endColor="#E6E6E6"
        android:angle="270"
        >
    </gradient>
</shape>

I tried to post an image which i have it after using the above code,but stackoverflow doesnot allow me coz i dont have reputation..Sorry about that.

fwiw i think your reputation is mighty fine. thanks for answering. — sudocoder, Nov 08 '17 at 00:06

score 10 · Answer 3 · edited Apr 20 '17 at 08:10

10

You can use elevation, available since API level 21

The elevation of a view, represented by the Z property, determines the visual appearance of its shadow: views with higher Z values cast larger, softer shadows. Views with higher Z values occlude views with lower Z values; however, the Z value of a view does not affect the view's size. To set the elevation of a view:

in a layout definition, use the
android:elevation
attribute. To set the elevation of a view in the code of an activity, use the
View.setElevation()
method.

Source

edited Apr 20 '17 at 08:10

Philippe

1,567
16
18

answered Mar 23 '16 at 16:24

Shlomi Fresko

909
11
15

4

This solution only works if you are targeting api 21 (Lollipop) and higher. – Corentin Bruneau Jun 10 '16 at 11:10

score 5 · Answer 4 · answered Oct 22 '13 at 22:40

Here's my cheesy version of the solution...This is the modification of the solution found here

I didn't like how the corners look so I faded all of them...

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!--Layer 0-->
<!--Layer 1-->
<!--Layer 2-->
<!--Layer 3-->
<!--Layer 4 (content background)-->

<!-- dropshadow -->
<item>
    <shape>
        <gradient 
            android:startColor="@color/white"
            android:endColor="@color/white"
            android:centerColor="#10CCCCCC"
            android:angle="180"/>
        <padding android:top="0dp" android:right="0dp" android:bottom="2dp" android:left="0dp" />
    </shape>
</item>

<item>
    <shape>
        <gradient 
            android:startColor="@color/white"
            android:endColor="@color/white"
            android:centerColor="#20CCCCCC"
            android:angle="180"/>
        <padding android:top="0dp" android:right="0dp" android:bottom="2dp" android:left="0dp" />
    </shape>
</item>

<item>
    <shape>
        <gradient 
            android:startColor="@color/white"
            android:endColor="@color/white"
            android:centerColor="#30CCCCCC"
            android:angle="180"/>

        <padding android:top="0dp" android:right="0dp" android:bottom="2dp" android:left="0dp" />
    </shape>
</item>

<item>
    <shape>
        <gradient 
            android:startColor="@color/white"
            android:endColor="@color/white"
            android:centerColor="#40CCCCCC"
            android:angle="180"/>
        <padding android:top="0dp" android:right="0dp" android:bottom="2dp" android:left="0dp" />
    </shape>
</item>

<item>
    <shape>
        <gradient 
            android:startColor="@color/white"
            android:endColor="@color/white"
            android:centerColor="#50CCCCCC"
            android:angle="180"/>
        <padding android:top="0dp" android:right="0dp" android:bottom="2dp" android:left="0dp" />
    </shape>
</item>

<!-- content background -->
<item>
    <shape>
        <solid android:color="@color/PostIt_yellow" />
    </shape>
</item>

Looks insanely bad on screen! And adding so many layers might be a rendering issue. — sud007, Jan 20 '15 at 15:59

score 3 · Accepted Answer · answered Feb 19 '11 at 17:10

There are a simple trick, using two views that form the shadow.

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" 
    android:padding="10dp"
    android:background="#CC55CC">
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <TableLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:stretchColumns="0">
            <TableRow>
                <LinearLayout
                    android:id="@+id/content"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content">
                    <TextView  
                        android:layout_width="fill_parent" 
                        android:layout_height="wrap_content"
                        android:background="#FFFFFF" 
                        android:text="@string/hello" />
                </LinearLayout>
                <View
                    android:layout_width="5dp"
                    android:layout_height="fill_parent"
                    android:layout_marginTop="5dp"
                    android:background="#55000000"/>
            </TableRow>
        </TableLayout>
        <View
            android:layout_width="fill_parent"
            android:layout_height="5dp"
            android:layout_marginLeft="5dp"
            android:background="#55000000"/>
    </LinearLayout>
</FrameLayout>

Hope this help.

using 9patch drawable backgroung is far more simple and the layout is much cleaner then — Lubos Horacek, May 31 '13 at 11:35
thanks @praveenb, however I think that the 9patch drawable background is the best solution — Fede, Jun 07 '13 at 09:07
This is not the right way of doing in XML. It grows the depth of layout and may lead to slow rendering of UI in low end phones or even in high end ones. The correct way always is to use a 9patch image. It is advised to make a cleaner and performance keen UI not just for the sake of it. — sud007, Jan 20 '15 at 15:38

score 0 · Answer 6 · answered Jun 23 '21 at 16:18

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

katwal-Dipak · Answer 7 · 2015-09-08T07:45:15.470

</LinearLayout>
            <View
                android:layout_width="match_parent"
                android:layout_height="2dp"
                android:background="@color/dropShadow" />

Use Just Below the LinearLayout

Another Method

create "rounded_corner_bg.xml" in /drawable folder

<?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="@color/primaryColor" />

        <corners android:radius="4dp" />
    </shape>
</item>

<item
    android:bottom="2dp"
    android:left="0dp"
    android:right="0dp"
    android:top="0dp">
    <shape android:shape="rectangle">
        <solid android:color="#F7F7F7" />

        <corners android:radius="4dp" />
    </shape>
</item>

</layer-list>

To use this Layout android:background="@drawable/rounded_corner_bg"

how to set shadow to a View in android?

7 Answers7

Linked

Related