Imagebutton full image, round corners

Question

Well.. I have some ImageButtons in my Android application. I want them to display the full picture. I mean: I want the ImageButton to be JUST the picture, you know?

Ok... so far, so good... I can do it use the property "background".

However I also want the ImageButton to have the corners rounded.

I have the following xml in my layout folder:

    <?xml version="1.0" encoding="UTF-8"?>
        <shape xmlns:android="http://schemas.android.com/apk/res/android">
            <solid android:color="#FFFFFFFF"/>
            <corners android:radius="10dip"/>
            <stroke android:width="8dip"/>
        <size android:height="8dip"/>    
        </shape>

It works perfect when I don't want the picture to fill the WHOLE ImageButton... however when I try to use the picture to use the whole imagebutton... it doesn't show the rounded corners.

Can anyone help me, please?

Bonus question: Also, how can I have a beautiful black line (rounded corners) around the imagebutton?

score 10 · Accepted Answer · answered Nov 07 '11 at 06:32

I can suggest you to use ImageView instead of ImageButton and catch its onClick().And you can use this xml file to give it a fine black rounded edges outline to your image:

image_bg.xml:(paste this xml file in drawable folder)

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

You can use it (in xml file where you have added the image) like:

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

Nice advice: `ImageView` is better than `ImageButton` is that case. Thx — shkschneider, Oct 31 '12 at 14:58

score 2 · Answer 2 · answered Nov 07 '11 at 03:05

What is the use of the image button? I'm currently working on a soundboard and i ran into the same issue. Then I realized that it doesn't have to be an "imagebutton" for you to be able to use it like a button. Now i'm just using imageview and then using onclick. As for the aesthetics of the black line i don't know but my images have rounded corners because i brought the images in by creating icons under new/other/android icons. It automatically makes one in each diff size category. Hope it helps!

score 1 · Answer 3 · edited May 23 '17 at 11:58

1

I believe this will help you out. You might be able to tweak it slightly to add in black borders when painting the new bitmap.

How to make an ImageView with rounded corners?

You can then just attach an onClick handler to the imageview.

edited May 23 '17 at 11:58

Community

1
1

answered Nov 07 '11 at 03:15

Glenn.nz

2,261
2
17
20

Imagebutton full image, round corners

3 Answers3

Linked