How to add shadow around circular imageview

Question

Hope this will help you:)

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

    <item>
        <shape android:shape="oval">
              <solid android:color="@color/gray"/>
                <!--shadow Color-->
        </shape>
    </item>

    <item
        android:left="0dp"
        android:right="0dp"
        android:top="0dp"
        android:bottom="3dp">
        <shape android:shape="oval">
             <solid android:color="@color/lightgrey"/>//Background Color
        </shape>
    </item>
</layer-list>

Change the background Color and Shadow color as you want..

It is way simpler than you think. Your ImageView needs to appear rounded based on an oval background, as it is squared by default. Then you need to include elevation, and it will show as you expected. You cannot set the oval background transparent as it won't allow for shadow elevation.

this is drawable/white_oval.xml:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="oval">
            <solid android:color="@android:color/white"/>
        </shape>
    </item>
</layer-list>

Now in your imageview, I am skipping here how you include your image

<ImageView
    android:id="@+id/alert_icon"
    android:layout_width="@dimen/alert_icon"
    android:layout_height="@dimen/alert_icon"
    android:contentDescription="@string/your_shadow_rulez"
    android:background="@drawable/white_oval"
    android:elevation="@dimen/elevation_fab" />

of course make sure your image view both width and height match. The bigger the elevation the larger the shadow

see how simple and nice this looks

Create a circle_shadow.xml file and use this code it work good for me. Make changes the radius according to your requirement.

circle_shadow.xml

<!-- Drop Shadow -->
<item>
    <shape android:shape="oval">
        <padding
            android:bottom="1dp"
            android:left="1dp"
            android:right="1dp"
            android:top="1dp" />

        <solid android:color="#00CCCCCC" />

        <corners android:radius="3dp" />
    </shape>
</item>
<item>
    <shape android:shape="oval">
        <padding
            android:bottom="1dp"
            android:left="1dp"
            android:right="1dp"
            android:top="1dp" />

        <solid android:color="#10CCCCCC" />

        <corners android:radius="3dp" />
    </shape>
</item>
<item>
    <shape android:shape="oval">
        <padding
            android:bottom="1dp"
            android:left="1dp"
            android:right="1dp"
            android:top="1dp" />

        <solid android:color="#20CCCCCC" />

        <corners android:radius="3dp" />
    </shape>
</item>
<item>
    <shape android:shape="oval">
        <padding
            android:bottom="1dp"
            android:left="1dp"
            android:right="1dp"
            android:top="1dp" />

        <solid android:color="#30CCCCCC" />

        <corners android:radius="3dp" />
    </shape>
</item>
<item>
    <shape android:shape="oval">
        <padding
            android:bottom="1dp"
            android:left="1dp"
            android:right="1dp"
            android:top="1dp" />

        <solid android:color="#50CCCCCC" />

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

<!-- Background Color (white) -->
<item>
    <shape android:shape="oval">
        <solid android:color="@android:color/white" />

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

Before answering I want to give some advice. You just have to put title of your question in Google. I tried to search like circular imageview with shadow android:

Without use of Library:

Change android:color="#BDBDBD" in shape tag. Your round_image.xml will be like:

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

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

<solid android:color="#BDBDBD" />
<corners android:radius="2dp"/>

<size
    android:height="80dp"
    android:width="80dp" />

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

</shape>

Using Library:

Have you tried this CircularImageView

You can use this library or if you don't want to use then get some code from this library inner res folder.

Thank you.

Here, I share my best practice to show a shadow effect to a circular image/resource with some details.

The above example image's icon is 56dp x 56dp and is cropped with a zoomed view so it may not look attractive but the results will show good on an actual device under the naked eye.

The above example is delivered by using:

• Some amount of elevation, to let shadow.
• Provide margin to the view almost double of elevation to fit the shadow.
• Ensure the parent view provides the space almost double of elevation to fit the shadow.
• Create and use an OutlineProvider to create the shadow.

Now here we begin with the code.

<FrameLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="@dimen/margin_14dp"> // Point no. 3

        <androidx.appcompat.widget.AppCompatImageView
            android:id="@+id/img"
            android:layout_width="@dimen/margin_56dp"
            android:layout_height="@dimen/margin_56dp"
            android:layout_margin="@dimen/margin_14dp" // Point no. 2
            android:elevation="@dimen/margin_8dp" // Point no. 1
            android:src="@drawable/ic_bell" />
 </FrameLayout>

Let's proceed to point no. 4, here is the OutlineProvider class for a Circular Outline.

import android.graphics.Outline;
import android.view.View;
import android.view.ViewOutlineProvider;

public class CircularOutlineProvider extends ViewOutlineProvider {  
    @Override
    public void getOutline(View view, Outline outline) {
        outline.setRoundRect(0, 0, view.getWidth(), view.getHeight(), (view.getWidth() / 2F));
    }
}

We left to use the OutlineProvider in our Java/Kotlin class to do the magic at runtime.

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) 
    findViewById(R.id.img).setOutlineProvider(new CircularOutlineProvider());

End of Magic Session!

For more experience and enhance details, please read the official article.

Add this xml code in your drawable layout and add it in your background:

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

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <layer-list>
            <item>
                <shape android:shape="oval">
                    <gradient
                        android:startColor="#FF000000"
                        android:endColor="#00000000"

                        android:gradientRadius="31dp"
                        android:type="radial"
                        />
                </shape>
            </item>
            <item android:top="4dp" android:left="4dp" android:right="4dp" android:bottom="4dp">
            <shape android:shape="oval">
                <size android:width="55dp"
                    android:height="55dp"/>
                <solid android:color="@android:color/white" />
            </shape>
            </item>


        </layer-list>
    </item>

</selector>