CODEWITHSUNDEEP
androiduser-interfaceandroid-activityandroid-studio
Renato Reyes
Renato Reyes

Reputation: 199

Circle Button in Android

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.

Upvotes: 2

Views: 22471

Answers (4)

Mohit
Mohit

Reputation: 915

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"
/>

Upvotes: 1

Kostas Drak
Kostas Drak

Reputation: 3260

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!!!

Upvotes: 2

mohamedsaber00
mohamedsaber00

Reputation: 95

You can use Custom library for easily adding Circle button. I recommend you to use this: https://github.com/makovkastar/FloatingActionButton It's very easy. just add this code to your xml:

<com.melnykov.fab.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|right"
            android:layout_margin="16dp"
            android:src="@drawable/ic_action_content_new"
            fab:fab_colorNormal="@color/primary"
            fab:fab_colorPressed="@color/primary_pressed"
            fab:fab_colorRipple="@color/ripple" />

don't forget to add thi code in parent tag:

     xmlns:fab="http://schemas.android.com/apk/res-auto"

Upvotes: 0

Giorgio Antonioli
Giorgio Antonioli

Reputation: 16214

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"/>

Upvotes: 1

Related Questions