Using a Layout to Make Rounded Corners affect on image

Question

I have some ImageView's and it seems like too much trouble to round the corners by using an ImageLoader or similar technique.

Can I just simply make a LinearLayout to cover the image? (or set the Image as its background?) For example, if the layout had rounded corners, would it hide the portion of the image beneath to create a rounded corner affect?

I have been trying to play with this (specifically using image as background) and can't seem to hide the image's corners.

score 1 · Accepted Answer · answered May 02 '13 at 20:18

well, with FrameLayout or RelativeLayout you can easily stack a second layer on top of you imageview like:

<FrameLayout
    android:layout_width="60dp"
    android:layout_width="60dp">
    <ImageView android:id="@+id/myimage"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:src="@drawable/myrealimage" />
    <ImageView android:id="@+id/my_roundedcorner_overlay"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:src="@drawable/myoverlaywithroundedcornersandtransparentcenter" />
</FrameLayout>

however, be warned this causes overdraw and makes your layout more complex.

You could also set the real image as a background to you ImageView and the overlay as the ImageViews src, however don't set a padding in this case (also loading images from the web with a library probably won't work anymore)

Cleanest solution is to create a custom widget extending ImageView and override its onDraw method, paint to the canvas using a bitmapshader, similar to http://www.curious-creature.org/2012/12/11/android-recipe-1-image-with-rounded-corners/ pretty much the same, but do it once and reuse as often as you want.

score 0 · Answer 2 · edited May 23 '17 at 12:12

0

I once had the same problem, Only I wanted to create a Google Map with rounded corners, check this question:

Is there a way to implement rounded corners to a Mapfragment?

The trick is to create a FrameLayout and in it place you content and on top of it place another layout with a 9-patch image background that has rounded corners.

edited May 23 '17 at 12:12

Community

1
1

answered May 02 '13 at 20:25

Emil Adz

40,709
36
140
187

score 0 · Answer 3 · answered May 02 '13 at 20:35

If you use Universal Image Loader you can round the corners of the the image instead.

DisplayImageOptions options = new DisplayImageOptions.Builder()            
        .displayer(new RoundedBitmapDisplayer())
        .build();
ImageLoader.getInstance().displayImage(imageUrl, imageView, options);

Using a Layout to Make Rounded Corners affect on image

3 Answers3