Circle Button in Android

Question

I need a circle button for my Android APP, I have read about 9 patch for buttons. I also need that the button changes its color when you press it.

Is it 9 patch the best approach, or should I use another method?

Thanks in advance.

Solution 1

You can do the following:

1) Create a drawable/button_states.xml file containing:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_pressed="false"
        android:drawable="@drawable/button_not_pressed"/>

    <item android:state_pressed="true"
        android:drawable="@drawable/button_pressed"/>

</selector>

2) Create the file drawable/button_pressed.xml file

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
    <solid android:color="#fff" />
    <corners android:radius="30dp"></corners>
</shape>

3) Create the file drawable/button_not_pressed.xml file

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
    <solid android:color="#000" />
    <corners android:radius="30dp"></corners>
</shape>

4) In the button use it like:

<Button
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:background="@drawable/button_states"
      android:text="New Button"
      android:id="@+id/button1" />

Hope it helps!!!

Solution 2

Simply create a drawable resource file like this:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="#FFFFFF"/> <!--the color you want as background-->
</shape>

and in your XML file in which you need this button, set his background to the name of the file you created above and his height and width equal, to obtain a circle button:

<Button
    android:id="@+id/button"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:text="Button" 
    android:background="@drawable/nameOfTheDrawableYouCreatedBefore"/>

Solution 3

1.Create a drawable/button_states.xml file containing:

<?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="rectangle">
        <corners android:radius="1000dp" />
        <solid android:color="#41ba7a" />
        <stroke
            android:width="2dip"
            android:color="#03ae3c" />
        <padding
            android:bottom="4dp"
            android:left="4dp"
            android:right="4dp"
            android:top="4dp" />
        </shape>
    </item>
    <item android:state_pressed="true"> 
        <shape android:shape="rectangle">
        <corners android:radius="1000dp" />
        <solid android:color="#3AA76D" />
        <stroke
            android:width="2dip"
            android:color="#03ae3c" />
        <padding
            android:bottom="4dp"
            android:left="4dp"
            android:right="4dp"
            android:top="4dp" />
        </shape>
    </item>
</selector>

2.Use it in button tag in any layout file

<Button
    android:layout_width="220dp"
    android:layout_height="220dp"
    android:background="@drawable/button_states"
    android:text="@string/btn_scan_qr"
    android:id="@+id/btn_scan_qr"
    android:textSize="15dp"
/>