How to Create Circle Button in Android

There are when you might need to create a circular or rounded button rather than the traditional rectangular button in android.

Here, we will look at few ways to create a circle button in android.

1. Android Circle Button Using Shape Drawable

Below is how to create a circle / rounded button in android using shape drawable.

res/drawable/shape_drawable.xml

<?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="@color/colorAccent" android:width="1dp" />
            <solid android:color="@color/colorPrimaryDark"/>
            <size android:width="200dp" android:height="200dp"/>
        </shape>
    </item>
</selector>

Assign this drawable to the button background attribute as shown below

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.LinearLayoutCompat xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/root_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="24dp"
    android:gravity="center"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/circle_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/shape_drawable"
        android:text="Circle Button"
        android:textColor="@color/colorWhite"
        android:padding="12dp"/>

</androidx.appcompat.widget.LinearLayoutCompat>

android circle button

2. Android Circle Button Using Image

We can use a circle image as the background value of a button. This will make the button to become circle in shape.

We will add a png image inĀ res/drawable/button_circle.png

<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.LinearLayoutCompat xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/root_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="24dp"
    android:gravity="center"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/circle_button"
        android:layout_width="64dp"
        android:layout_height="64dp"
        android:background="@drawable/button_circle"
        android:padding="12dp"/>

</androidx.appcompat.widget.LinearLayoutCompat>

android rounded button

If you have any questions or suggestions kindly use the comment box or you can contact us directly through our contact page below.

 

Add a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

50% Discounts On Projects

Do you have a custom project with a clear requirements, we are currently giving a 50% discount on all projects.

We will work with you to ensure we deliver what you need.

If you have questions or want to chat with us, you can reach us on Skype (henry.tochi)

Languages and technologies we use - Java, Kotlin, Laravel, Vue, React, Flutter, Swift and more.