Custom circle button

Ata picture Ata · Mar 27, 2012 · Viewed 311k times · Source

I want to create custom button and I need it to be circle. How can I create a circle button? I do not think that be possible with draw9patch.

Also I do not know how to make custom button!

Do you have any suggestion?

Answer

Adil Soomro picture Adil Soomro · Mar 27, 2012

Use xml drawable like this:

Save the following contents as round_button.xml in drawable folder

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="false">
        <shape android:shape="oval">
            <solid android:color="#fa09ad"/>
        </shape>
    </item>
    <item android:state_pressed="true">
        <shape android:shape="oval">
            <solid android:color="#c20586"/>
        </shape>
    </item>
</selector>

Android Material Effect: Although FloatingActionButton is a better option, If you want to do it using xml selector, create a folder drawable-v21 in res and save another round_button.xml there with following xml

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="#c20586">
    <item>
        <shape android:shape="oval">
            <solid android:color="#fa09ad"/>
        </shape>
    </item>
</ripple>

And set it as background of Button in xml like this:

<Button
android:layout_width="50dp"
android:layout_height="50dp"
android:background="@drawable/round_button"
android:gravity="center_vertical|center_horizontal"
android:text="hello"
android:textColor="#fff" />

Important:

  1. If you want it to show all these states (enabled, disabled, highlighted etc), you will use selector as described here.
  2. You've to keep both files in order to make the drawable backward-compatible. Otherwise, you'll face weird exceptions in previous android version.