How to create a round Button with a corner overlay

Question

I would like to create a Button which looks like this:

Button image

This is what I tried so far:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="60dp"
                android:layout_height="60dp"
                android:background="#00000000">

    <ImageButton
        android:id="@+id/btnPinterest"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="-5dp"
        android:contentDescription="@null"
        android:scaleType="fitCenter"
        android:src="@drawable/pinterest"/>

    <TextView
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:layout_alignParentRight="true"
        android:layout_marginTop="0.5dp"
        android:background="@drawable/notification"/>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:gravity="center"
        android:text="@string/btnPinterest"
        android:textColor="#FFFFFF"
        android:textSize="12sp"/>

</RelativeLayout>

But I am not satisfied, it doesn't look like the Button I showed above. For example the text a text is too close. Can anyone help me replicate this Button more accurately?

If anyone needs it, this is the overlayed image:

Notification Icon

Can you edit an image of what you currently have into your question? That would make it a lot easier to understand the problem. — Xaver Kapeller, Jul 07 '15 at 04:26
You could use just a single ImageButton and override it's onDraw callback to draw the corner element yourself. — user, Jul 07 '15 at 05:14

score 1 · Answer 1 · answered Jul 12 '15 at 16:43

Use Gimp to produce four images and save them in drawable. your images must have that blue triangle on the top left and you must type the text "Pinterest" and other design into the image.

Then create a new XML file and put this in it:

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

That will give you a custom button for 4 states : 1) Disabled 2) Pressed 3) Focused 4) Enabled(default)

thank much, i think i should use custom view because i have a lot of button like this — Javier, Jul 13 '15 at 05:26

How to create a round Button with a corner overlay

1 Answers1