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?

Answer 1

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" />