ImageButton with rounded corner using xml only?

Question

I'm trying to make a ImageButton like this

however, I can't seem to find a way to do it using xml only. I tried custom libraries, they don't seem to work perfectly. is there no other way? what can I do instead of using ImageButton?

there is a lot of text on that button. I think you should use some layout, and place all the views inside it, and then set it's background to the one with rounded corners, and add a click listener to it — Vladyslav Matviienko, Feb 06 '19 at 08:38
Well I don't exactly want that, I want an image to be in that shape. I'll have hard-coded info directly on the image using photoshop. — Shashank Setty, Feb 06 '19 at 09:11
So, if the balance changes, you have another hardcoded text on the image? What makes you think Photoshop and Image is the answer? — Srikar Reddy, Feb 06 '19 at 10:14

score 1 · Answer 1 · answered Feb 06 '19 at 08:32

Here is an xml code.

1.Create a xml file in your drawable folder like button.xml and paste the following markup:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:state_pressed="true" >
        <shape android:shape="rectangle"  >
            <corners android:radius="3dp" />
            <stroke android:width="1dp" android:color="#5e7974" />
            <gradient android:angle="-90" android:startColor="#345953" android:endColor="#689a92"  />            
        </shape>
    </item>
    <item android:state_focused="true">
        <shape android:shape="rectangle"  >
            <corners android:radius="3dip" />
            <stroke android:width="1dip" android:color="#5e7974" />
            <solid android:color="#58857e"/>       
        </shape>
    </item>  
    <item >
       <shape android:shape="rectangle"  >
            <corners android:radius="3dip" />
            <stroke android:width="1dip" android:color="#5e7974" />
            <gradient android:angle="-90" android:startColor="#8dbab3" android:endColor="#58857e" />            
       </shape>
    </item>
</selector>

2.Now use this drawable for the background of your view. If the view is button then something like this:

<Button
    android:id="@+id/button1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="10dp"
    android:textColor="#ffffff"
    android:background="@drawable/mybutton"
    android:text="Buttons" />

Credits to this answer

But my requirement is to add an image as background, how do I do that? — Shashank Setty, Feb 06 '19 at 09:10

score 0 · Answer 2 · answered Feb 06 '19 at 08:37

Create an XML file inside drawable.

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

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

    <solid
        android:color="#00BADE"
/>
</shape>

and then inside your imageButton or whatever.

    android:background="@drawable/buttonShape"

score 0 · Accepted Answer · answered Feb 06 '19 at 09:48

0

You can use cardview with card corner radius

<android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:cardCornerRadius="4dp"/>

And add imagebutton inside cardview

answered Feb 06 '19 at 09:48

yadunath.narayanan

285
2
15

@Shashank Shetty you can try this. – Rajat Mittal Feb 06 '19 at 09:59

ImageButton with rounded corner using xml only?

3 Answers3