How to make a round button?

Question

I'm trying to make a round button, but I don't know how can I do it. I can make button with rounded corners, but how can I can round circle. It's not the same. Please, tell me, is it possible on Android? Thank you.

have good explanation here http://stackoverflow.com/questions/9884202/custom-circle-button — Milon, Apr 19 '14 at 07:46
Google have new framework, new technologies is better [Jetpack Compose](https://stackoverflow.com/questions/6054562/how-to-make-the-corners-of-a-button-round/64087445#64087445) — Ucdemir, Sep 27 '20 at 10:38

Arif Nadeem · Accepted Answer · 2015-08-26T17:51:18.997

299

Create an xml file named roundedbutton.xml in drawable folder

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
android:shape="rectangle">
    <solid android:color="#eeffffff" />
    <corners android:bottomRightRadius="8dp"
        android:bottomLeftRadius="8dp"  
        android:topRightRadius="8dp"
        android:topLeftRadius="8dp"/>
</shape>

Finally set that as background to your Button as android:background = "@drawable/roundedbutton"

If you want to make it completely rounded, alter the radius and settle for something that is ok for you.

edited Aug 26 '15 at 17:51

answered Apr 22 '12 at 10:27

Arif Nadeem

8,356
7
44
78

Do you need the .xml suffix? I've seen an example without – Neil Aug 28 '12 at 20:29
@Neil you do not need to add xml suffix, I did it for the purpose of demonstration and clear understanding of the concept so that the reader doesn't take the example wrong, eclipse auto-assist should help you find if .xml is needed or not, I have a habit of using ctrl+space on my windows machine for auto completing xml commands. – Arif Nadeem Aug 29 '12 at 06:28
2

You don't need an '@' symbol before the word drawable? – shim Nov 08 '12 at 05:40
Does this solution have a different result than just using a round image as the background? – Siavash Sep 05 '13 at 22:20
8

Also, why not use android:shape="oval" – Siavash Sep 05 '13 at 23:13
How can I manage to make color dynamic in here? is there any way to chage color in roundedbutton.xml file? – Sami Jul 01 '14 at 12:09
1

You also can give 1 radius size for all corners – com2ghz Feb 24 '16 at 11:48
It did not make button completely circular – lRadha Sep 01 '16 at 07:56
1

Make radius 90dp to make fully round button – Lucky_girl Oct 25 '17 at 08:01

score 56 · Answer 2 · edited Feb 25 '21 at 07:53

56

If using Android Studio you can just use:

<?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
        <solid android:color="#FFFFFF"/>

    </shape>

this works fine for me, hope this helps someone.

edited Feb 25 '21 at 07:53

GokulDAS027

636
1
10
20

answered Jun 17 '15 at 11:30

Shaun Jones

569
4
3

2

that should be the accepted answer, using corners values doesn't go beyond rounded corners, and this question is about a circle. Thanks Shaun for this answer – Don Sep 30 '15 at 12:18
16

Using `ring` doesn't show anything. Better to use `oval`. – CopsOnRoad Sep 30 '17 at 12:32

score 35 · Answer 3 · edited Jul 24 '16 at 15:17

Create a drawable/button_states.xml file containing:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="false"> 
        <shape android:shape="rectangle">
        <corners android:radius="1000dp" />
        <solid android:color="#41ba7a" />
        <stroke
            android:width="2dip"
            android:color="#03ae3c" />
        <padding
            android:bottom="4dp"
            android:left="4dp"
            android:right="4dp"
            android:top="4dp" />
        </shape>
    </item>
    <item android:state_pressed="true"> 
        <shape android:shape="rectangle">
        <corners android:radius="1000dp" />
        <solid android:color="#3AA76D" />
        <stroke
            android:width="2dip"
            android:color="#03ae3c" />
        <padding
            android:bottom="4dp"
            android:left="4dp"
            android:right="4dp"
            android:top="4dp" />
        </shape>
    </item>
</selector>

Use it in button tag in any layout file

<Button
    android:layout_width="220dp"
    android:layout_height="220dp"
    android:background="@drawable/button_states"
    android:text="@string/btn_scan_qr"
    android:id="@+id/btn_scan_qr"
    android:textSize="15dp"
/>

its workng perfectly,thank you. can you help me to draw rectangle from center to outside of circle looks like a 'Q' — CLIFFORD P Y, Jan 10 '17 at 01:58
Working fine, but why did we put radius to 1000dp? can you please explain? — Jamshaid K., Feb 16 '17 at 10:38
@JamshaidKamran 1000dp is an arbitrary size that's big enough to make the button round. — rraallvv, Jun 08 '19 at 10:41
Is there an Android dimension resource that we can use instead of 1000dp ? — rraallvv, Jun 08 '19 at 10:42

LOG_TAG · Answer 4 · 2016-03-27T16:38:04.053

14

Markushi's android circlebutton:

(This library is deprecated and no new development is taking place. Consider using a FAB instead.)

enter image description here

edited Mar 27 '16 at 16:38

answered Sep 02 '14 at 05:43

LOG_TAG

19,011
12
70
103

6

warning: **DEPRECATED!** – dialex Mar 26 '16 at 16:14

score 10 · Answer 5 · answered Mar 02 '20 at 15:16

If you want a FAB looking circular button and you are using the official Material Component library you can easily do it like this:

<com.google.android.material.button.MaterialButton
    style="@style/Widget.MaterialComponents.ExtendedFloatingActionButton"
    app:cornerRadius="28dp"
    android:layout_width="56dp"
    android:layout_height="56dp"
    android:text="1" />

Result:

If you change the size of the button, just be careful to use half of the button size as app:cornerRadius.

score 7 · Answer 6 · answered Oct 08 '15 at 21:26

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid
    android:color="#ffffff"
    />
</shape>

Set that on your XML drawable resources, and simple use and image button with an round image, using your drawable as background.

score 6 · Answer 7 · answered Jan 30 '15 at 19:07

<corners android:bottomRightRadius="180dip"
    android:bottomLeftRadius="180dip"
    android:topRightRadius="180dip"
    android:topLeftRadius="180dip"/>

<solid android:color="#6E6E6E"/> <!-- this one is ths color of the Rounded Button -->

and add this to the button code

    android:layout_width="50dp"
    android:layout_height="50dp"

score 5 · Answer 8 · answered May 24 '14 at 20:30

Used the shape as oval. This makes the button oval

<item>
    <shape android:shape="oval" >
        <stroke
            android:height="1.0dip"
            android:width="1.0dip"
            android:color="#ffee82ee" />

        <solid android:color="#ffee82ee" />

        <corners
            android:bottomLeftRadius="12.0dip"
            android:bottomRightRadius="12.0dip"
            android:radius="12.0dip"
            android:topLeftRadius="12.0dip"
            android:topRightRadius="12.0dip" />
    </shape>
</item>

score 3 · Answer 9 · edited May 23 '17 at 11:55

3

Round button in Android

You can make a ImageButton with circular background image.

edited May 23 '17 at 11:55

Community

1
1

answered Apr 22 '12 at 09:04

chavaone

173
3
9

score 3 · Answer 10 · answered Apr 22 '12 at 10:03

3

use ImageButton instead of Button....

and make Round image with transparent background

answered Apr 22 '12 at 10:03

MAC

15,659
8
53
95

score 3 · Answer 11 · answered Oct 14 '20 at 14:42

You can use a MaterialButton:

     <com.google.android.material.button.MaterialButton
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:insetTop="0dp"
            android:insetBottom="0dp"
            android:text="A"
            app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.App.Rounded"
            />

and apply a circular ShapeAppearanceOverlay with:

<style name="ShapeAppearanceOverlay.App.rounded" parent="">
    <item name="cornerSize">50%</item>
</style>

score 2 · Answer 12 · answered Jul 23 '14 at 11:38

For a round button create a shape:

<?xml version="1.0" encoding="utf-8"?>

<stroke
    android:width="8dp"
    android:color="#FFFFFF" />

<solid android:color="#ffee82ee" />


<corners
    android:bottomLeftRadius="45dp"
    android:bottomRightRadius="45dp"
    android:topLeftRadius="45dp"
    android:topRightRadius="45dp" />

use it as a background of your button link

score 1 · Answer 13 · answered Apr 22 '12 at 09:04

1

Yes it's possible, look for 9-patch on google. Good articles :

http://radleymarx.com/blog/simple-guide-to-9-patch/

http://ogrelab.ikratko.com/custom-color-buttons-for-android/

answered Apr 22 '12 at 09:04

jptsetung

8,876
3
41
51

score 1 · Answer 14 · answered Jun 18 '16 at 21:35

You can use google's FloatingActionButton

XMl:

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@android:drawable/ic_dialog_email" />

Java:

  @Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    FloatingActionButton bold = (FloatingActionButton) findViewById(R.id.fab);
    bold.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
        // Do Stuff
        }
    });
}

Gradle:

    compile 'com.android.support:design:23.4.0'

score 1 · Answer 15 · answered Nov 29 '20 at 09:33

1

I simply use a FloatingActionButton with elevation = 0dp to remove the shadow:

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_send"
    app:elevation="0dp" />

answered Nov 29 '20 at 09:33

Florian Walther

5,407
3
32
84

problem of FAB is that it can not use transparent and full-color images, oly b/w vectors. IMHO – djdance Apr 15 '21 at 13:24

score 1 · Answer 16 · answered Apr 09 '21 at 12:37

Update 2021:

Just use the MaterialButton

<com.google.android.material.button.MaterialButton
    app:cornerRadius="30dp"
    android:layout_width="60dp"
    android:layout_height="60dp"
    android:text="test" />

width equal height
cornerRadius is half of the width or height

score 1 · Answer 17 · answered Apr 15 '21 at 13:27

I like this solution

            <androidx.cardview.widget.CardView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:cardCornerRadius="18dp"
                app:cardElevation="0dp"
                >
                <ImageButton
                        android:layout_width="35dp"
                        android:layout_height="35dp"
                        android:background="@null"
                       android:scaleType="centerCrop"
              android:src="@drawable/social_facebook"
                        />
            </androidx.cardview.widget.CardView>

score 0 · Answer 18 · answered Apr 22 '12 at 09:16

0

It is

android.R.drawable.expander_ic_minimized

look into built in android drawables:

http://androiddrawableexplorer.appspot.com/

answered Apr 22 '12 at 09:16

Shankar Agarwal

40,326
8
70
67

score 0 · Answer 19 · answered Jul 27 '17 at 08:22

Use the Image Buttons and make the background as the image you want.
Create the images from the android asset studio link -

" https://romannurik.github.io/AndroidAssetStudio/icons-launcher.html#foreground.type=image&foreground.space.trim=0&foreground.space.pad=0.25&foreColor=rgba(94%2C%20126%2C%20142%2C%200)&backColor=rgb(96%2C%20125%2C%20139)&crop=1&backgroundShape=circle&effects=none&name=ic_home "

and download it, extraxt it , inside that look for mipmap-hdpi folder.

copy the image from the mipmap-hdpi folder and paste it in the drwable folder of your android project.
Now set the background as that image.

Payel Senapati · Answer 20 · 2020-11-24T09:21:22.720

I went through all the answers. But none of them is beginner friendly. So here I have given a very detailed answers fully explained with pictures.

Open Android Studio. Go to Project Window and scroll to drawable folder under res folder

Right click, select New --> drawable resource folder

In the window that appears, name the file rounded_corners and click on OK

A new file rounded_corners.xml gets created

Open the file. You are presented with the following code -->

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://android.com/apk/res/android">

</selector>

Replace it with the following code -->

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="8dp" />
    <solid android:color="#66b3ff" />
</shape>

Here the design view can be seen on the right side

Adjust the value in android:radius to make the button more or less rounded.

Then go to activity_main.xml

Put the following code -->

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    android:padding="10dp">

    <Button
        android:id="@+id/_1"
        android:text="1"
        android:textSize="25dp"
        android:textColor="#ffffff"
        android:background="@drawable/rounded_corners"
        android:layout_width="50dp"
        android:layout_height="wrap_content"
        android:layout_margin="20dp"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"/>

</RelativeLayout>

Here I have placed the Button inside a RelativeLayout. You can use any Layout you want.

For reference purpose MainActivity.java code is as follows -->

import android.app.Activity;
import android.os.Bundle;

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}

I have a Pixel 4 API 30 avd installed. After running the code in the avd the display is as follows -->

score 0 · Answer 21 · answered Jan 09 '21 at 11:51

Fully rounded circle shape.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#FFFFFF" />
    <stroke
        android:width="1dp"
        android:color="#F0F0F0" />
    <corners
        android:radius="90dp"/>
</shape>

Happy Coding!

squirrel · Answer 22 · 2021-03-10T18:34:57.203

In case someone needs a floating action button, but doesn't want to depend on the entire material library, here's a minimal implementation that looks exactly the same, has ripple animation, the shadow, and show()/hide() methods with animation.

Widget code:

class CircularImageButton @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null,
) : AppCompatImageButton(context, attrs) {
    init {
        background = null
        outlineProvider = pillOutlineProvider
        clipToOutline = true
    }

    fun show() {
        if (visibility != VISIBLE) {
            visibility = VISIBLE
            startAnimation(showAnimation)
        }
    }

    fun hide() {
        if (visibility != INVISIBLE) {
            visibility = INVISIBLE
            startAnimation(hideAnimation)
        }
    }

    override fun setBackgroundColor(color: Int) {
        if (backgroundPaint.color != color) {
            backgroundPaint.color = color
            invalidate()
        }
    }

    private val backgroundPaint = Paint().apply { style = Paint.Style.FILL }

    override fun onDraw(canvas: Canvas?) {
        canvas?.drawPaint(backgroundPaint)
        super.onDraw(canvas)
    }
}


val pillOutlineProvider = object : ViewOutlineProvider() {
    override fun getOutline(view: View, outline: Outline) {
        outline.setRoundRect(0, 0, view.width, view.height, view.height.f / 2)
    }
}


private val animationDuration = applicationContext
        .resources.getInteger(android.R.integer.config_shortAnimTime).toLong()

val showAnimation = ScaleAnimation(
        0f, 1f, 0f, 1f,
        Animation.RELATIVE_TO_SELF, 0.5f,
        Animation.RELATIVE_TO_SELF, 0.5f)
        .apply { duration = animationDuration }

val hideAnimation = ScaleAnimation(
        1f, .5f, 1f, 0.5f,
        Animation.RELATIVE_TO_SELF, 0.5f,
        Animation.RELATIVE_TO_SELF, 0.5f)
        .apply { duration = animationDuration }

And the xml, where 40dp is the “mini” version of the FAB.

<CircularImageButton
    android:id="@+id/fab"
    android:layout_width="40dp"
    android:layout_height="40dp"

    android:src="@drawable/ic_your_drawable"
    android:scaleType="center"

    android:layout_margin="12dp"
    android:elevation="3dp"

    android:outlineAmbientShadowColor="#7000"
    android:outlineSpotShadowColor="#7000"
    android:foreground="?attr/selectableItemBackgroundBorderless" />

score 0 · Answer 23 · answered Apr 24 '22 at 16:07

With jetpack compose, you can customize your button without requiring any 3-party lib or boilerplate code.

  Button(
        onClick = { /* do something when button clicked*/ },
        modifier = Modifier
            .width(64.dp)
            .height(64.dp),
        shape = CircleShape
    ) {
        Icon(Icons.Default.Star, "")
    }

How to make a round button?

23 Answers23

Linked

Related