How to create a round button with a corner overlay

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

Button image

This is what I have 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'm not satisfied, this is not like the Button shown above. For example, the text is too close. Can someone help me more accurately repeat this Button ?

If someone needs this, this is an overlay image:

Notification Icon

+5
source share
1 answer

Use Gimp to create four images and save them in drawing mode. your images should have a blue triangle in the upper left and you must enter the text β€œPinterest” and another design into the image.

Then create a new XML file and put it 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> 

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

+1
source

All Articles