Android ImageView with Rounded Corners not working

Question

I have definied the file thumb_rounded.xml and placed it inside the res/drawable folder in my android application. With this file i want to get rounded corners in my ImageViewthat contains the news thumb,

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

and i am setting this as background of my ImageView, however, i dont get the rounded corners, the image remains a rectangle. Does anyone have any idea on how to get that? I want to achieve the same effect as this screen:

B&H first screen

Many thanks

T

Try taking a look at this post: http://stackoverflow.com/questions/2459916/how-to-make-an-imageview-to-have-rounded-corners — bradley4, Jun 30 '11 at 19:11
I don't believe it's possible to provide rounded corners like that to an ImageView. You'll want to follow the code from this post: http://stackoverflow.com/questions/2459916/how-to-make-an-imageview-to-have-rounded-corners — wajiw, Jun 30 '11 at 19:08
I tought there would be a way without having to use java, for example... the B&H android application has a rectangle image with rounded corners at the first screen, i would like to achieve that same effect. — Thiago, Jun 30 '11 at 19:12
Check this now we have `ShapeableImageView` to make circular or rounded imageView https://stackoverflow.com/a/61086632/7666442 — AskNilesh, Apr 08 '20 at 04:15

score 22 · Answer 1 · answered Nov 15 '11 at 07:34

use it,

@Override
public void onCreate(Bundle mBundle) {
super.onCreate(mBundle);
setContentView(R.layout.main);

ImageView image = (ImageView) findViewById(R.id.img);
Bitmap bitImg = BitmapFactory.decodeResource(getResources(),
    R.drawable.default_profile_image);
image.setImageBitmap(getRoundedCornerImage(bitImg));
}

public static Bitmap getRoundedCornerImage(Bitmap bitmap) {
Bitmap output = Bitmap.createBitmap(bitmap.getWidth(),
    bitmap.getHeight(), Config.ARGB_8888);
Canvas canvas = new Canvas(output);

final int color = 0xff424242;
final Paint paint = new Paint();
final Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());
final RectF rectF = new RectF(rect);
final float roundPx = 100;

paint.setAntiAlias(true);
canvas.drawARGB(0, 0, 0, 0);
paint.setColor(color);
canvas.drawRoundRect(rectF, roundPx, roundPx, paint);

paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
canvas.drawBitmap(bitmap, rect, rect, paint);

return output;

}

Here , round corder is depend on roundPx.

Check this now we have `ShapeableImageView` to make circular or rounded imageView https://stackoverflow.com/a/61086632/7666442 — AskNilesh, Apr 08 '20 at 04:15

score 14 · Answer 2 · answered Aug 08 '12 at 07:38

If you place a view on top of the ImageView that functions as a mask, you can achieve exactly that rounded image effect.

take a look at this example:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:background="#ffff"
    android:layout_height="match_parent" >

 <ImageView
    android:id="@+id/image1"
    android:layout_width="200dp"
    android:layout_height="200dp"
    android:padding="10dp"
    android:src="@android:color/holo_red_dark"
    />

<View
    android:layout_width="200dp"
    android:layout_height="200dp"
    android:layout_alignLeft="@+id/image1"
    android:layout_alignTop="@+id/image1"
    android:layout_margin="00dp"
    android:background="@drawable/mask" />
</RelativeLayout>

and a mask.xml drawable:

<?xml version="1.0" encoding="utf-8"?>
<shape
  xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="50dp" />    
    <solid android:color="#0000"/>
    <stroke android:color="#ffff" android:width="10dp"/>   
</shape>

Two important things:

the stroke width of the mask drawable should match the padding of the ImageView
the stroke color of the mask drawable should match the background color.
the radius of the mask corners must be adjusted to correspond with the stroke width (so you don't see the image behind the mask).

The sample produces the following image: enter image description here

HTH

what if the background is not a solid background ? this method won't work well since it shows the rounded corners area with a solid background. — android developer, Dec 31 '12 at 23:31
that's true, this will only work if you can define a mask that blends in with the background ( doesn't need to be a solid color, though). — P.Melch, Apr 05 '13 at 20:56
it's a cool trick though. better than other solutions in case you know for sure that it will blend well with its surroundings. — android developer, Apr 05 '13 at 20:59

score 3 · Accepted Answer · edited May 23 '17 at 12:10

3

You're lacking a couple of tags. Here's a new sample:

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

    <stroke android:width="3dp"
            android:color="#ff000000"/>

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

    <corners android:radius="30px"/> 
</shape>

Seen here

Also, are you aware of RoundRectShape?

edited May 23 '17 at 12:10

Community

1
1

answered Jun 30 '11 at 19:21

Pedro Loureiro

11,436
2
31
37

2

Your code didnt work. It should a rounded rectangle with white background bigger then my image... I will take a look at the RoundRectShape, thanks @Pedro – Thiago Jun 30 '11 at 19:41
I was just posting a sample, I wasn't adapting the values to the ones you wanted, but it should be very simple to do that! – Pedro Loureiro Jun 30 '11 at 22:50
5

It does not seem to work. – Sarvesh Jul 05 '13 at 01:05
2

it dows not seem to work – LiangWang Aug 07 '13 at 23:40
3

Why an accepted answer? Does not work! – us_david Feb 09 '20 at 01:14

Android ImageView with Rounded Corners not working

3 Answers3

Linked