How to add shadow around circular imageview

Question

I want to add shadow around circular imageView. Here is my code. I want to make like this image

This is my .xml file check this image.

activity_main.xml

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

<RelativeLayout
    android:id="@+id/layoutTop"
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:background="#355482" >
</RelativeLayout>

<RelativeLayout
    android:id="@+id/layoutBottom"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_alignParentBottom="true"
    android:layout_below="@+id/layoutTop"
    android:background="@drawable/loading" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="113dp"
        android:text="Profile"
        android:textColor="#355482"
        android:textSize="20dp"
        android:textStyle="bold" />
</RelativeLayout>

<ImageView
    android:id="@+id/overlapImage"
    android:layout_width="150dp"
    android:layout_height="150dp"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true"
    android:layout_marginTop="132dp"
    android:adjustViewBounds="true"
    android:background="@drawable/round_image"
    android:src="@drawable/ic_launcher" />

this is round_image.xml:

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

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

<solid android:color="#ffffff" />
<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>

I try some code for shadow effect but it's not working.

Answer 1

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

Answer 2

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>

Answer 3

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.

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

Answer 4

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.

Answer 5

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>

Answer 6

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 .

Answer 7

This Class is Custom Circular Imageview with shadow, Stroke,saturation and using this Custom Circular ImageView you can make your image in Circular Shape with Radius. Guys for Circular Shadow ImageView No need Github this class is enough. Adding CircularImageView to your root layout dynamically.

  *Adding Circular ImageView to your layout dynamically* 

 RelativeLayout  rootLayout= (RelativeLayout) findViewById(R.id.rootLayout);

   rootLayout.addView(new CircularImageView(this,200,200,imageBitmap));



public CircularImageView(Context context, int width, int height, Bitmap bitmap)     {
    super(context);
    this.context = context;
    this.width = width;
    this.height = height;

  ------> here "bitmap" is the square shape(width* width) scaled bitmap ..

    this.bitmap = bitmap;


    paint = new Paint(Paint.ANTI_ALIAS_FLAG);
    paint.setAntiAlias(true);
    paint.setFilterBitmap(true);
    paint.setDither(true);


    paint3=new Paint();
    paint3.setStyle(Paint.Style.STROKE);
    paint3.setColor(Color.WHITE);
    paint3.setAntiAlias(true);

    paintBorder = new Paint();
    imagePaint= new Paint();

    paintBorder.setColor(Color.WHITE);
    paintBorder.setAntiAlias(true);
    this.setLayerType(LAYER_TYPE_SOFTWARE, paintBorder);


    this.bitmap2 = Bitmap.createScaledBitmap(bitmap, (bitmap.getWidth() - 40), (bitmap.getHeight() - 40), true);


    imagePaint.setAntiAlias(true);




    invalidate();
}

@Override
protected void onDraw(Canvas canvas) 
{
    super.onDraw(canvas);
    Shader b;
     if (bitmap3 != null)
        b = new BitmapShader(bitmap3, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
     else
        b = new BitmapShader(bitmap2, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
    imagePaint.setShader(b);
    canvas.drawBitmap(maskedBitmap(), 20, 20, null);
}

private Bitmap maskedBitmap()
{
    Bitmap l1 = Bitmap.createBitmap(width,width, Bitmap.Config.ARGB_8888);
    Canvas canvas = new Canvas(l1);
    paintBorder.setShadowLayer(radius, x, y, Color.parseColor("#454645"));
    paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
    final RectF rect = new RectF();
    rect.set(20, 20, bitmap2.getWidth(), bitmap2.getHeight());

    canvas.drawRoundRect(rect, corner_radius, corner_radius, paintBorder);

    canvas.drawRoundRect(rect, corner_radius, corner_radius, imagePaint);

    if (strokeWidth!=0.0f)
    {
        paint3.setStrokeWidth(strokeWidth);
        canvas.drawRoundRect(rect, corner_radius, corner_radius, paint3);
    }

     paint.setXfermode(null);
    return l1;
}






------> use seekbar here, here you have to pass  "0 -- 250"  here corner radius will change ..

public void setCornerRadius(int corner_radius)
{
    this.corner_radius = corner_radius;
    invalidate();
}



-------->use seekbar here, here you have to pass  "0 -- 10.0f"  here shadow radius will change 

public void setShadow(float radius)
{
    this.radius = radius;
    invalidate();
}



----> use seekbar here, here you have to pass  "0 -- 10.0f"  here stroke size  will change 

public void setStroke(float stroke)
{
    this.strokeWidth = stroke;
    invalidate();
}

private Bitmap updateSat(Bitmap src, float settingSat)
{

    int w = src.getWidth();
    int h = src.getHeight();

    Bitmap bitmapResult =
            Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
    Canvas canvasResult = new Canvas(bitmapResult);
    Paint paint = new Paint();
    ColorMatrix colorMatrix = new ColorMatrix();
    colorMatrix.setSaturation(settingSat);
    ColorMatrixColorFilter filter = new ColorMatrixColorFilter(colorMatrix);
    paint.setColorFilter(filter);
    canvasResult.drawBitmap(src, 0, 0, paint);

    return bitmapResult;
}








--------> use seekbar here, here you have to pass  "0 -- 2.0f"  here saturation  will change



public void setSaturation(float sat)
{
    System.out.println("qqqqqqqqqq            "+sat);
    bitmap3=updateSat(bitmap2, sat);

    invalidate();
} 


}










-------->      Seekbar to change radius

              radius_seekbar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
                    @Override
                    public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser)
                    {
                        text_radius.setText(""+progress);
                        circularImageView.setCornerRadius(progress);
                    }

                    @Override
                    public void onStartTrackingTouch(SeekBar seekBar) {

                    }

                    @Override
                    public void onStopTrackingTouch(SeekBar seekBar) {

                    }
                });


 // Seekbar to change shadow

                shadow_seekbar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
                    @Override
                    public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser)
                    {
                        float f= 4+progress/10.0f;
                        text_shadow.setText(""+progress);
                        circularImageView.setShadow(f);
                    }

                    @Override
                    public void onStartTrackingTouch(SeekBar seekBar) {

                    }

                    @Override
                    public void onStopTrackingTouch(SeekBar seekBar) {

                    }
                });


       // Seekbar to change saturation

                saturation_seekbar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
                    @Override
                    public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser)
                    {
                        int progressSat = saturation_seekbar.getProgress();
                        float sat = (float) ((progressSat*4 / 100.0f)-1.0f);
                        circularImageView.setSaturation(sat);

                        text_saturation.setText(""+progressSat);
                    }

                    @Override
                    public void onStartTrackingTouch(SeekBar seekBar) {

                    }

                    @Override
                    public void onStopTrackingTouch(SeekBar seekBar) {

                    }
                });


// Seekbar to change stroke

                stroke_seekbar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
                    @Override
                    public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser)
                    {
                        if (progress==0)
                        {
                            float f=(progress*10.0f/100.0f);
                            circularImageView.setStroke(f);
                        }
                        else
                        {
                            float f=(progress*10.0f/100.0f);
                            circularImageView.setStroke(f);
                        }

                        text_stroke.setText(""+progress);
                    }

                    @Override
                    public void onStartTrackingTouch(SeekBar seekBar) {

                    }

                    @Override
                    public void onStopTrackingTouch(SeekBar seekBar) {

                    }
                });




         //radius seekbar in xml file

         <SeekBar
            android:layout_width="match_parent"
            android:layout_gravity="center" 
            android:progress="50"
            android:max="250"
            android:id="@+id/radius_seekbar"
            android:layout_height="wrap_content" />





      //saturation seekbar in xml file

         <SeekBar
            android:layout_width="match_parent"
            android:layout_gravity="center" 
            android:progress="50"
            android:max="100"
            android:id="@+id/saturation_seekbar"
            android:layout_height="wrap_content" />





//shadow seekbar in xml file

         <SeekBar
            android:layout_width="match_parent"
            android:layout_gravity="center" 
            android:progress="0"
            android:max="100"
            android:id="@+id/shadow_seekbar"
            android:layout_height="wrap_content" />




     //stroke seekbar in xml file

         <SeekBar
            android:layout_width="match_parent"
            android:layout_gravity="center" 
            android:progress="0"
            android:max="100"
            android:id="@+id/stroke _seekbar"
            android:layout_height="wrap_content" />