How to Create Round Circular Button in Android

How to Create Round Circular Button in Android

Round or Circular Button in Android

In this article, we are going to show you how to create a Round or Circular button in android. I am assuming you are aware of Basics of Android Studio and Android Development. If you are want to learn about the same you can visit below links.

 

Let’s Start, we are going to create buttons as shown in below image.

Follow steps to create your first round or circular button

Step 1: First thing first. We need to add a button and then we are going to modify it.Use below code to add a button to your application.

<Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Round Button"

        />

Step 2: Next thing we are going to create a custom drawable for our button. Add a new file inside drawable with Name green_round_button.xml. Finally, add below code in the green_round_button.xml file

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="oval">
            <solid android:color="#a4c400"/>
            <size android:width="200dp" android:height="200dp"/>
        </shape>
    </item>
</selector>

Step 3: Now add below line in your button.

android:background="@drawable/green_round_button"

Check your button it now looks like as shown below image. 

 

Let’s understand the code

  1. First, we added a new button to our application.
  2. Then we created a new drawable resource file for our button. It contains
    1. Shape: Which is used to define the shape of our object with android:shape. For this example we are using oval value for android:shape. Possible value for android:shape is oval, rectangle, ring, and line.
    2. Solid: It defines the solid color use to fill the shape defined above. For this example, we are using #a4c400. You can use any color you want is suitable for your scenario.
    3. Size: At last we are defining the size of our button. For this example, we are using 120dp as width and height. Both width and height are same because we want the circular button.

Ok, so our button looks good but not great let’s add a circular boundary for your button. Add below line in your green_round_button.xml

<stroke android:color="#008a00" android:width="4dp" />

Final code for green_round_button.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="oval">
            <stroke android:color="#008a00" android:width="4dp" />
            <solid android:color="#a4c400"/>
            <size android:width="120dp" android:height="120dp"/>
        </shape>
    </item>
</selector>

Now our button look like as shown in below image

Similarly, we created 3 more custom button using separate drawable files.

Now it time for you to create some amazing buttons and share your experience with us.

Check all above steps in this video.

0 Comments
Leave A Comment

Please login to post your valuable comments.

Join the newsletter

Get the latest vLemonn news first

share