How to create a round Button with a corner overlay

Question

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

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:

Answer 1

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)