Rounded corners android image buttons

Question

I am trying to round corners on an android ImageButton, the code looks like this;

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <RelativeLayout 
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/imageButton"
            android:layout_marginTop="57dp"
            android:src="@drawable/friends"
            android:padding="1dp"
            android:layout_alignParentTop="true"
            android:layout_toLeftOf="@+id/imageButton2"
            android:layout_marginRight="62dp" />

    </RelativeLayout>
</LinearLayout>

Basically our output is an ImageButton but it has squared corners, we are trying to round off the corners.

Thanks

http://stackoverflow.com/questions/16791449/add-rounded-corners-to-custom-view. use a selector and this http://stackoverflow.com/questions/12771367/create-button-with-rounded-corners-in-android — Raghunandan, Feb 07 '14 at 17:08

Nambi · Accepted Answer · 2014-02-07T17:11:09.373

Use Shape in android to make the rounder corners

create the xml file named it as roundcorner.xml

<?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android">
        <solid android:color="#33DDFF" />
        <corners android:radius="4dp" />
    </shape>

In your ImageButton add this attribute android:background="@drawable/roundcorner"

<ImageButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/imageButton"
                android:layout_marginTop="57dp"
                android:src="@drawable/friends"
                android:background="@drawable/roundcorner"
                android:padding="1dp"
                android:layout_alignParentTop="true"
                android:layout_toLeftOf="@+id/imageButton2"
                android:layout_marginRight="62dp" />

Thank you a lot, it is working perfectly. I am wondering why there isn't any xml attribute so that we can do it faster..! — Kwnstantinos Nikoloutsos, Jun 24 '18 at 00:26
this solution was not working for me, but after setting the android:shape property to "ring" it worked. I think you probably missed this part. — Md Golam Rahman Tushar, Feb 12 '19 at 11:02

2Dee · Answer 2 · 2014-02-07T17:14:44.480

You could use a selector made of shape drawables as background, for example :

rounded_bg.xml (to be created in res/drawable-nodpi folder)

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

    <solid android:color="#ffffff" />
    <corners
        android:bottomLeftRadius="4dp"
        android:bottomRightRadius="4dp"
        android:topLeftRadius="4dp"
        android:topRightRadius="4dp" />

</shape>

Create another one, changing the color referenced in solid android:color="#ffffff" , for example to solid android:color="#ff0000" and name that file rounded_bg_selected.xml

Create the selector (also in res/drawable-nodpi), name it selectable_button_bg.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" 
        android:drawable="@drawable/rounded_bg_selected" />
    <item  android:state_focused="false" 
        android:drawable="@drawable/rounded_bg" />
</selector>

Then reference it in your layout :

<ImageButton
     android:background="@drawable/selectable_button_bg"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:id="@+id/imageButton"
     android:layout_marginTop="57dp"
     android:src="@drawable/friends"
     android:padding="1dp"
     android:layout_alignParentTop="true"
     android:layout_toLeftOf="@+id/imageButton2"
     android:layout_marginRight="62dp" />

score 6 · Answer 3 · answered Feb 07 '14 at 17:09

Create image_rounded_corner.xml inside /res/drawable

<?xml version="1.0" encoding="UTF-8" ?> 
  <shape xmlns:android="http://schemas.android.com/apk/res/android">
  <solid android:color="#000000" /> 
  <stroke android:width="3dp" android:color="#776da8" /> 
  <corners android:bottomRightRadius="5dp" android:bottomLeftRadius="5dp" android:topLeftRadius="5dp" android:topRightRadius="5dp" /> 
  <padding android:left="2dp" android:top="2dp" android:right="2dp" android:bottom="2dp" /> 
  </shape>

Call the image_rounded_corner.xml file with android:background

<ImageView android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:id="@+id/myimage" 
           android:src="@drawable/icon"
           android:background="@drawable/image_rounded_corner" />

or use an Draw 9-patch file as "Artoo Detoo" suggested.

score 4 · Answer 4 · answered Feb 07 '14 at 17:15

Use this: Put this in res/drawable folder

my_gradient.xml

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

    <corners android:radius="100dp" />

    <stroke
        android:width="5dp"
        android:color="#090" />

</shape>

In your ImageButton Just put:

android:background="@drawable/my_gradient"

score 2 · Answer 5 · answered May 26 '16 at 03:58

 public static Bitmap toRoundCorner(Bitmap bitmap, int pixels) {
    Bitmap output = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(), Bitmap.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 = pixels;
    paint.setAntiAlias(true);
    canvas.drawARGB(0, 0, 0, 0);
    paint.setColor(color);
    canvas.drawRoundRect(rectF, roundPx, roundPx, paint);
    paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
    canvas.drawBitmap(bitmap, rect, rect, paint);
    return output;
  }

this code will help you.(From a chinese article:http://www.cnblogs.com/liuweiming/archive/2012/04/23/2466074.html)

Very nice, as far as I can tell this is the only solution that actually rounds the bitmap corners. The answers that set a background just draw a rounded outline under the image, but the image corners are still square. To process a bitmap that's already assigned to an ImageButton you can do something like this: BitmapDrawable bmd = (BitmapDrawable)btn.getDrawable(); btn.setImageBitmap(toRoundCorner(bmd.getBitmap(), 15)); — Georgie, Mar 26 '22 at 07:40

Rounded corners android image buttons

5 Answers5

Linked

Related