Rounded corners for an Imageview in android

Question

I have a textview and imageview inside a linearlayout. Textview is at top and imageview at bottom. I used below lines to have rounded corners for linearlayout. But imageview corners are not rounding. I see only top corners of linearlayout are rounding. How can i have rounded bottom corners of imageview? ( I see all the corners are rounded if i remove imageview)

rounded_corners.xml

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

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


<corners
    android:bottomLeftRadius="8dp"
    android:bottomRightRadius="8dp"
    android:topLeftRadius="8dp"
    android:topRightRadius="8dp" />

</shape>

main.xml

  <LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="50dp"
    android:layout_marginLeft="10dp"
    android:layout_marginRight="10dp"
    android:layout_marginTop="50dp"
    android:background="@xml/rounded_corners"
    android:orientation="vertical" >

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="xxxxxxxx" />

    <ImageView     
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:scaleType="centerCrop"
        android:src="@drawable/my_image_view" />
</LinearLayout>

screen shot : enter image description here

it's very unlikely that if you set the rounded corner shape as the background of the layout and in the output it is not rounded corner. Could you upload a snap-shot of your current output. — karn, Sep 23 '12 at 06:57
see http://stackoverflow.com/questions/2459916/how-to-make-an-imageview-to-have-rounded-corners — yoah, Sep 23 '12 at 07:15
I have seen that example. Why can't we bring same effect in xml? Where i'am going wrong? — user1670443, Sep 23 '12 at 07:26
@user1670443 i don't think this can be achieved in xml, unless you edit your image to have rounded corners. — vikki, Sep 23 '12 at 08:03

Jishi Chen · Answer 1 · 2014-06-17T10:53:43.123

7

you can make the image's left bottom and right bottom corner rounded,like this:

enter image description here

code:

public static Bitmap getRoundCornerBitmap(Bitmap bitmap, int radius) {
    int w = bitmap.getWidth();
    int h = bitmap.getHeight();
    Bitmap output = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
    Canvas canvas = new Canvas(output);

    final Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
    final RectF rectF = new RectF(0, 0, w, h);

    canvas.drawRoundRect(rectF, radius, radius, paint);

    paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
    canvas.drawBitmap(bitmap, null, rectF, paint);

    /**
     * here to define your corners, this is for left bottom and right bottom corners
     */
    final Rect clipRect = new Rect(0, 0, w, h - radius);
    paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC));
    canvas.drawRect(clipRect, paint);

    paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
    canvas.drawBitmap(bitmap, null, rectF, paint);

    bitmap.recycle();

    return output;
}

this method can give you a image with left bottom and right bottom corner rounded.

edited Jun 17 '14 at 10:53

answered Nov 18 '13 at 06:16

Jishi Chen

634
7
17

How can I change this so that the top two corners are rounded instead? – Edmund Rojas Mar 27 '14 at 04:54
1

I figured it out, change this line--> final Rect rectBottom = new Rect(0, radius, w, h); thanks for the help! – Edmund Rojas Mar 27 '14 at 05:21
I want rounded corners on the left...Please tell me how?? – Pranav Mahajan Jun 13 '14 at 12:17
@Pranav Mahajan just replace clipRect to final Rect clipRect = new Rect(radius, 0, w, h); – Jishi Chen Jun 17 '14 at 11:00
@JishiChen: Thanks...it did work. Can you also tell me if I want corners only on top left or bottom left?? – Pranav Mahajan Jun 24 '14 at 11:03
Use this, if you need top round corners instead of bottom round corners. `final Rect clipRect = new Rect(0, radius, w + radius, h + radius);` – Ata Iravani Nov 22 '16 at 09:58
how to add rounded corners in top right and bottom right ? @AtaIravani – Pralgomathic Nov 22 '18 at 11:42

score 2 · Answer 2 · edited Aug 13 '16 at 08:19

For having rounded corners for imageview, convert your image into bitmap and then try following code :

public static Bitmap roundCorner(Bitmap src, float round) 
{
    // image size
    int width = src.getWidth();
    int height = src.getHeight();

    // create bitmap output
    Bitmap result = Bitmap.createBitmap(width, height, Config.ARGB_8888);

    // set canvas for painting
    Canvas canvas = new Canvas(result);
    canvas.drawARGB(0, 0, 0, 0);

    // config paint
    final Paint paint = new Paint();
    paint.setAntiAlias(true);
    paint.setColor(Color.BLACK);

    // config rectangle for embedding
    final Rect rect = new Rect(0, 0, width, height);
    final RectF rectF = new RectF(rect);

    // draw rect to canvas
    canvas.drawRoundRect(rectF, round, round, paint);

    // create Xfer mode
    paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
    // draw source image to canvas
    canvas.drawBitmap(src, rect, rect, paint);

    // return final image
     return result;
}

score 0 · Answer 3 · answered Sep 23 '12 at 07:26

0

your linear layout is rounded corner and there is no doubt about that but your image is not. Here in the screen-shot the image is overlapping the linearlayout in the bottom. Try adding some padding to the linear layout(android:padding="20dp") . This should work.

answered Sep 23 '12 at 07:26

karn

5,963
3
22
29

Yes. image is overlapping the linearlayout in the bottom. I want my imageview should fit inside linearlayout (as in my screenshot) and iamge sholud have rounded corners in bottom. If i use padding iam getting some gap between image, linearlayout – user1670443 Sep 23 '12 at 07:43
after applying padding your linear layout has rounded corners?? – karn Sep 23 '12 at 07:48
Yes. Now my Linearlayout has rounded corners.. but gap is there. I used android:paddingBottom = "5dp" – user1670443 Sep 23 '12 at 07:58
actually the linear layout is still rectangle, the background is what's rounded. – vikki Sep 23 '12 at 07:59
this is the max you can achieve with the xml... although you can apply some hacks for this. You can place another view with rounded corner overlapping your image view. Try playing around these and you will achieve what you want to achieve. – karn Sep 23 '12 at 08:38

Rounded corners for an Imageview in android

3 Answers3

Linked