How to Create a Round Button in Android Studio – A Complete Guide

Creating a round button in Android Studio is essential for modern app design. Whether you’re making a floating action button (FAB), a circular login button, or a custom round button with text, this guide will show you different ways to achieve a fully responsive and visually appealing round button in Android.

In this article, you’ll learn:

How to create a round button using XML drawables
How to use Material Design FloatingActionButton (FAB)
How to create a circular button using CardView
How to create a round button programmatically in Kotlin
Best practices for round button styling and optimization

Let’s dive in!

Why Use a Round Button in Android Apps?

Round buttons are popular in UI/UX design because they:

Improve user engagement with a visually appealing shape.
Provide better accessibility and easy interaction.
Enhance UI design consistency (used in Google’s Material Design).

Method 1: Using Shape Drawable (Best for Custom Buttons)

The best and most customizable way to create a round button is by using an XML drawable.

Step 1: Create a Shape Drawable File

Go to res → drawable in your project.
Right-click → New → Drawable Resource File
Name it round_button.xml

Step 2: Add XML Code

This code defines a circular shape with a background color:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    
    <solid android:color="#6200EE"/> <!-- Button background color -->
    <size android:width="100dp" android:height="100dp"/> <!-- Button size -->
    <corners android:radius="50dp"/> <!-- Makes the button round -->
</shape>

Step 3: Apply the Drawable to a Button

Now, in your activity_main.xml, apply this background to a Button:

<Button
    android:id="@+id/roundButton"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:background="@drawable/round_button"
    android:text="Click Me"
    android:textColor="#FFFFFF"
    android:gravity="center"/>

✅ Pros:

Fully customizable
Works well with different screen sizes
Can be reused across multiple buttons

❌ Cons:

No built-in elevation or shadow effect

Method 2: Using FloatingActionButton (FAB)

If you want a round button with an icon and shadow, use Material Design FloatingActionButton.

Step 1: Add Material Components Dependency

Open build.gradle (Module: app) and add this:

implementation 'com.google.android.material:material:1.7.0'

Sync your project.

Step 2: Add FloatingActionButton to XML

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_add"  <!-- Your icon -->
    android:contentDescription="Add"
    app:backgroundTint="@color/purple_500"
    app:fabSize="normal"/>

✅ Pros:

Built-in elevation (shadow)
Smooth animations for clicks
Material Design-compliant

❌ Cons:

Cannot display text inside the button
Only supports icons

Method 3: Using CardView for a Round Button

If you want a circular button with a shadow and text, use CardView.

Step 1: Add CardView Dependency

Add this to build.gradle (Module: app):

implementation 'androidx.cardview:cardview:1.0.0'

Sync your project.

Step 2: Add CardView in XML

<androidx.cardview.widget.CardView
    android:layout_width="100dp"
    android:layout_height="100dp"
    app:cardCornerRadius="50dp"
    app:cardElevation="6dp"
    android:backgroundTint="@color/purple_500"
    android:layout_gravity="center">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="Click"
        android:textColor="#FFFFFF"/>
</androidx.cardview.widget.CardView>

✅ Pros:

Supports shadow effects
Allows text inside the button
Looks modern and smooth

❌ Cons:

Uses more memory

Method 4: Using Kotlin to Create a Round Button Programmatically

If you need to dynamically create a round button, use Kotlin.

Kotlin Code:

val button = findViewById<Button>(R.id.roundButton)
button.apply {
    background = GradientDrawable().apply {
        shape = GradientDrawable.OVAL
        setColor(Color.parseColor("#FF6200EE"))
    }
}

✅ Pros:

Dynamic customization
Can change color, size, and shape on the fly

❌ Cons:

Requires extra coding

Comparison Table – Which Method Should You Choose?

Method	Best For	Customization	Supports Text?	Has Shadow?
Shape Drawable (XML)	Custom UI, Lightweight buttons	✅ High	✅ Yes	❌ No
Floating Action Button (FAB)	Round buttons with icons	❌ Limited	❌ No	✅ Yes
CardView Button	Round button with shadow	✅ High	✅ Yes	✅ Yes
Kotlin Code	Dynamic button creation	✅ High	✅ Yes	❌ No

Best Practices for Round Buttons in Android

Use consistent sizing: Keep a minimum of 48dp for round buttons for better accessibility.
Maintain proper padding: Add padding to prevent text/icon from touching edges.
Follow Material Design guidelines: Use FloatingActionButton where applicable.
Optimize for dark mode: Use dynamic colors to support light/dark mode.
Test across screen sizes: Ensure buttons look good on different resolutions and devices.