How to add a drop shadow effect to a circular ImageView in Android?

user3509091 picture user3509091 · Apr 13, 2014 · Viewed 14.8k times · Source

I have an ImageView in my layout which is circular. I want to have a shadow effect to the ImageView1.Can anyone tell me how can I do this? My codes are as follows:

main.xml

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/view88"
        android:layout_alignParentLeft="true"
        android:src="@drawable/hh" />

hh.xml in drawable folder

   <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
      android:shape="ring"
      android:innerRadiusRatio="3"
      android:thickness="10dp"

       android:useLevel="false">
   <solid android:color="#FFFFFF" />
   <stroke android:width="5dp" android:color="#FFFFFF" />
   <gradient
      android:centerColor="@android:color/darker_gray" 
      android:endColor="@android:color/darker_gray" 
      android:startColor="@android:color/darker_gray"  />
    <size  android:height="140dp"
        android:width="120dp" />
 </shape>

Answer

Ralph Pina picture Ralph Pina · Apr 3, 2015

I know this question is old, but here is my solution. I could not add a gradient to the stroke of an oval. The gradient always went to the center of the circle. A hack around this was to create a layer-list and make 5 concentric circles, each 1pd smaller that added their own shadding.

So, to make a drop shadow for a circular ImageView which is 180x180, and with the shadow goes from #1A000000 to #00000000, I did:

<?xml version="1.0" encoding="utf-8"?>
<layer-list
    xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape
            android:shape="oval">
            <stroke android:width="1dp"
                    android:color="#00000000" />
            <size
                android:width="190dp"
                android:height="190dp"/>
        </shape>
    </item>
    <item
        android:top="1dp"
        android:right="1dp"
        android:bottom="1dp"
        android:left="1dp">
        <shape
            android:shape="oval">
            <stroke android:width="1dp"
                    android:color="#05000000" />
            <size
                android:width="190dp"
                android:height="190dp"/>
        </shape>
    </item>
    <item
        android:top="2dp"
        android:right="2dp"
        android:bottom="2dp"
        android:left="2dp">
        <shape
            android:shape="oval">
            <stroke android:width="1dp"
                    android:color="#0A000000" />
            <size
                android:width="190dp"
                android:height="190dp"/>
        </shape>
    </item>
    <item
        android:top="3dp"
        android:right="3dp"
        android:bottom="3dp"
        android:left="3dp">
        <shape
            android:shape="oval">
            <stroke android:width="1dp"
                    android:color="#0F000000" />
            <size
                android:width="190dp"
                android:height="190dp"/>
        </shape>
    </item>
    <item
        android:top="4dp"
        android:right="4dp"
        android:bottom="4dp"
        android:left="4dp">
        <shape
            android:shape="oval">
            <stroke android:width="1dp"
                    android:color="#15000000" />
            <size
                android:width="190dp"
                android:height="190dp"/>
        </shape>
    </item>
    <item
        android:top="5dp"
        android:right="5dp"
        android:bottom="5dp"
        android:left="5dp">
        <shape
            android:shape="oval">
            <stroke android:width="1dp"
                    android:color="#1A000000" />
            <size
                android:width="190dp"
                android:height="190dp"/>
        </shape>
    </item>
</layer-list>