Android ImageView with Rounded Corners not working [duplicate]

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:

Many thanks

T

Answer 1

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.

Answer 2

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:

1. the stroke width of the mask drawable should match the padding of the ImageView
2. the stroke color of the mask drawable should match the background color.
3. 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:

HTH

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