Android How to create a round button using xml

In this article we are going to learn about how to create a round button for your Android app. We are going to control the look of button using xml only. Before starting below is the image for our final output.

Before starting the actual coding  I am assuming you are familiar with Android basics and know how to modify your activity. If not feel free to visit respective URL.

So let's start with actual coding.

Step 1: Add a new button.

<Button android:id ="@+id/push_button" android:layout_width="150dp" android:layout_height="150dp" android:text="Round Button" android:padding="15dp" />

Above code is going add a new button in our main layout.

Step 2: Add a new drawable file res/drawable/button_bg_round.xml

Now add below code in the drawable file.

<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android">     <item>         <shape android:shape="oval">             <stroke android:color="#1E90FF" android:width="5dp" />             <solid android:color="#87CEEB"/>             <size android:width="150dp" android:height="150dp"/>         </shape>     </item> </selector>

Step 3: Save the drawable file and modify button by adding a background with source to newly created drawable file.
activity_main.xml code final snippet

<Button android:id ="@+id/push_button"     android:layout_width="150dp"     android:layout_height="150dp"     android:text="Round Button"     android:background="@drawable/button_bg_round"     android:padding="15dp" />

Run your app and see the changes. Below is the output.

Now let's understand what is available in the button_bg_round xml file

1. Shape : Shape is used to control the shape of your button. Here we are using shape with shape  value as oval. Now you can ask oval is not an actual circle so why our button is circle. The answer is an oval with same vertical and horizontal radius is a circle. Now how we are controlling this? We are controlling it using width and height property of button. Both with value 150dp.

2. Stroke : We are using stroke to defining a border for our button. In our stroke we are using two properties color and width. Color is used to controlling the the color border. And width is used to control the width of the border.

3. Solid : Solid is used to control the color of our actual button. In solid we are using only one property color.

4. Size : Finally the size is used to control the shape of the oval. For the circle the we need same width and height. But if you need some different shape feel free to change the width and height. For example you can create an ellipsis with width 100dp and height with value 50dp. Try it.

Ok now we know how to create a round button. Below is some more example for round button.

Exercise for you in this article we created a round button with blue color. Try to create other remaining buttons. Below it the video for this blog post.