Creating a round ImageButton. Rounding a square image

Question

Im trying to create a ImageButton with a image inside. I need the ImageButtons image to have round edges.

But here comes the BUT... Instead of making the image smaller inside the button, to make it fit inside the element, I would like to have the images corners rounded or cut off.

This is what I have done so far:

drawable: my_image_drawable

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

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

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

activity_main.xml:

<ImageButton
            android:background="@drawable/card_imageview_drawable"
            android:layout_weight="1"
            android:id="@+id/my_image_button"
            android:layout_toRightOf="@+id/my_textview"
            android:src="@drawable/my_image_drawable"
            style="@style/my_imageview_style"/>

This code does exactly what I don't wont it to do. It makes the image smaller inside the ImageButton and it does not cut the corners

Note: I cannot use ImageView (instead of ImageButton) because it limits the gestures I can utilise.

All advice is welcome! Thank you

possible duplicate of [How to make an ImageView with rounded corners](http://stackoverflow.com/questions/2459916/how-to-make-an-imageview-with-rounded-corners) — Phantômaxx, Jul 05 '15 at 08:41
In the above link, find the answers which mention Romain Guy (a famous Android software engineer) — Phantômaxx, Jul 05 '15 at 08:42
Hi. Thanks for your answers. So there is no XML solution for this, but I have to create the round edges programmatically? That is weird... — Nabuska, Jul 05 '15 at 12:03

score 0 · Answer 1 · answered Jul 05 '15 at 10:33

I use this code coming from another StackOverflow thread (that I cannot find anymore) because it's using a java class and I prefer do it programmatically

    public class CustomImageView extends ImageButton {

    public static float radius = 18.0f;

    public CustomImageView(Context context) {
        super(context);
    }

    public CustomImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public CustomImageView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        Path clipPath = new Path();
        RectF rect = new RectF(0, 0, this.getWidth(), this.getHeight());
        clipPath.addRoundRect(rect, radius, radius, Path.Direction.CW);
        canvas.clipPath(clipPath);
        super.onDraw(canvas);
    }
}

Then call it in the XML like this:

 <de.termine24.merchant.views.CustomImageView
    android:layout_width="40dp"
    android:layout_height="40dp"
    android:id="@+id/toFillOut"
    android:scaleType="centerCrop"
    android:src="@drawable/empty_contact"/>

Creating a round ImageButton. Rounding a square image

1 Answers1