Create Circle Button using AndroidX

thumbnail

In this tutorial, you will learn to create circle button using AndroidX. You will create three files to create this circle button. The first one is btn_circle.xml, activity_main.xml, and colors.xml.

Colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#00AB4A</color>
    <color name="colorPrimaryDark">#00AB4A</color>
    <color name="colorAccent">#00AB4A</color>
</resources>

btn_circle.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="@android:color/black" android:width="1dp" />
            <solid android:color="@color/colorPrimaryDark"/>
            <size android:width="120dp" android:height="120dp"/>
        </shape>
    </item>
</selector>

activity_main.xml

To create circle button, you can use androidx.appcompat.widget.AppCompatButton. 

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <androidx.appcompat.widget.AppCompatButton
        android:id="@+id/circle_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/btn_circle"
        android:text="Circle Button"
        android:textColor="@android:color/white"
        android:padding="12dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

When you run the application, you will get result similar to the below image:

Circle Button using AndroidX
Circle Button using AndroidX

Read More:

Back To Top