How to define a circle shape in an Android XML drawable file?

Question

I have some problems finding the documentation of the definitions of shapes in XML for Android. I would like to define a simple circle filled with a solid color in an XML File to include it into my layout files.

Sadly the Documentation on android.com does not cover the XML attributes of the Shape classes. I think I should use an ArcShape to draw a circle but there is no explanation on how to set the size, the color, or the angle needed to make a circle out of an Arc.

Here you can read about how to create shape drawable: developer.android.com/guide/topics/resources/… — Mario Kutlev
– Mario Kutlev, Commented Aug 20, 2013 at 10:57
You can get the circle xml from here developer.android.com/samples/WearSpeakerSample/res/drawable/… — Shahab Rauf
– Shahab Rauf, Commented Feb 15, 2018 at 8:13
The Android Dev documentation has been improved since then. Now it covers android:shape element - Drawable resources. — naXa stands with Ukraine
– naXa stands with Ukraine, Commented Sep 27, 2018 at 15:03

Arefin · Accepted Answer · 2012-08-25 12:24:53Z

1796

This is a simple circle as a drawable in Android.

<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> <solid android:color="#666666"/> <size android:width="120dp" android:height="120dp"/> </shape>

answered Aug 25, 2012 at 12:24

Arefin

18.4k2 gold badges19 silver badges4 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

Ankit Garg Over a year ago

And how to change the color dynamically?

milosmns Over a year ago

@AnkitGarg you can apply a color filter from Java code (see Drawable class)

Tyler Over a year ago

I tried dp and it was distorted into an oval shape. For me, using pt instead fixed it.

Ferran Maylinch Over a year ago

No need for the size in the shape if you later define a square size for the view.

Tarun Deep Attri Over a year ago

Its shape is oval and not round. Can anyone confirm??

|

M. Reza Nasirloo · Accepted Answer · 2018-09-14 09:54:40Z

Set this as your view background

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> <stroke android:width="1dp" android:color="#78d9ff"/> </shape>

For solid circle use:

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> <solid android:color="#48b3ff"/> </shape>

Solid with stroke:

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> <solid android:color="#199fff"/> <stroke android:width="2dp" android:color="#444444"/> </shape>

Note: To make the oval shape appear as a circle, in these examples, either your view that you are using this shape as its background should be a square or you have to set the height and width properties of the shape tag to an equal value.

Nice solution. Of course, the oval appears as a circle if the width and height of the view are the same. I think there was a way to make it appear as a circle no matter the size of the view.
@FerranMaylinch "I think there was a way to make it appear as a circle no matter the size of the view." I solved this using a RelativeLayout wrapping both an ImageView (with the circle as "src" drawable) with fixed width/height and a TextView that wraps a text (for instance).
I am doing the exact same thing but the circle is drawn as oval
What if we need it to create around a textview with different border colors at run time ?
@AnshulTyagi I believe you can do that by calling yourView.getBackground() and setting the color manually. you need to cast it to a proper type like ShapeDrawable. There are related questions on SO about this.

Ravi Makvana · Accepted Answer · 2015-06-04 11:41:19Z

Code for Simple circle

<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> <solid android:color="#9F2200"/> <stroke android:width="2dp" android:color="#fff" /> <size android:width="80dp" android:height="80dp"/> </shape>

From stackoverflow.com/a/70477622/4440629, the file needs to go in res/drawable not res/layout

Slimane amiar · Accepted Answer · 2018-04-30 09:52:55Z

55

You can use VectorDrawable as below :

<?xml version="1.0" encoding="utf-8"?> <vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="200dp" android:height="200dp" android:viewportHeight="64" android:viewportWidth="64"> <path android:fillColor="#ff00ff" android:pathData="M22,32 A10,10 0 1,1 42,32 A10,10 0 1,1 22,32 Z" /> </vector>

The above xml renders as :

edited Apr 30, 2018 at 9:52

Slimane amiar

1,05414 silver badges29 bronze badges

answered Jul 29, 2016 at 16:17

Riyas PK

3,2171 gold badge27 silver badges30 bronze badges

3 Comments

Ajeet Over a year ago

Hey, I am having a padding between circle and viewport. Can you help me out?

Boris Treukhov Over a year ago

@Ajeet you can change the size of viewport and you can put your path inside group and specify the translation and scale <group android:translateX="-10" android:translateY="15"><path ...

Darshan Miskin Over a year ago

@Riyas can you explain the pathData part? what those co-ordinates imply?

goosemanjack · Accepted Answer · 2011-08-11 17:32:37Z

Look in the Android SDK samples. There are several examples in the ApiDemos project:

/ApiDemos/res/drawable/

black_box.xml
shape_5.xml
etc

It will look something like this for a circle with a gradient fill:

 <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" > <gradient android:startColor="#FFFF0000" android:endColor="#80FF00FF" android:angle="270"/> </shape>

Paraskevas Ntsounos · Accepted Answer · 2019-07-27 11:40:06Z

If you want a circle like this

Try using the code below:

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:innerRadius="0dp" android:shape="ring" android:thicknessRatio="2" android:useLevel="false" > <solid android:color="@android:color/white" /> <stroke android:width="1dp" android:color="@android:color/darker_gray" /> </shape>

João Vitor · Accepted Answer · 2018-06-07 09:40:02Z

<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> <!-- fill color --> <solid android:color="@color/white" /> <!-- radius --> <stroke android:width="1dp" android:color="@color/white" /> <!-- corners --> <corners android:radius="2dp"/> </shape>

What do the <corners /> do in an oval (which to my thinking don't have corners)?

kip2 · Accepted Answer · 2015-06-09 23:28:08Z

Here's a simple circle_background.xml for pre-material:

<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_pressed="true"> <shape android:shape="oval"> <solid android:color="@color/color_accent_dark" /> </shape> </item> <item> <shape android:shape="oval"> <solid android:color="@color/color_accent" /> </shape> </item> </selector>

You can use with the attribute 'android:background="@drawable/circle_background" in your button's layout definition

Aftab Alam · Accepted Answer · 2020-06-05 19:35:04Z

a circle shape in an Android XML drawable file

<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> <solid android:color="@android:color/white" /> <stroke android:width="1.5dp" android:color="@android:color/holo_red_light" /> <size android:width="120dp" android:height="120dp" /> </shape>

Screenshot

Martijn Pieters · Accepted Answer · 2020-02-26 17:11:03Z

res/drawble/circle_shape.xml

<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item> <shape android:shape="oval"> <solid android:color="#e42828"/> <stroke android:color="#3b91d7" android:width="5dp"/> <!-- Set the same value for both width and height to get a circular shape --> <size android:width="250dp" android:height="250dp"/> </shape> </item> </selector>

SerjantArbuz · Accepted Answer · 2022-12-17 20:01:06Z

Try below code with dash:

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> <size android:width="@dimen/_60sdp" android:height="@dimen/_60sdp" /> <solid android:color="@color/black" /> <stroke android:width="@dimen/_1sdp" android:color="@color/white" android:dashWidth="@dimen/_1sdp" android:dashGap="@dimen/_1sdp" />

Try code without dash:

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> <size android:width="@dimen/_60sdp" android:height="@dimen/_60sdp" /> <solid android:color="@color/black" /> <stroke android:width="@dimen/_1sdp" android:color="@color/white" />

Without dash	With dash

Tiago Barreto · Accepted Answer · 2017-10-18 21:21:50Z

<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> <stroke android:width="10dp" android:color="@color/white"/> <gradient android:startColor="@color/red" android:centerColor="@color/red" android:endColor="@color/red" android:angle="270"/> <size android:width="250dp" android:height="250dp"/> </shape>

krhitesh · Accepted Answer · 2018-06-07 08:39:26Z

You can try this -

<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="ring" android:innerRadiusRatio="700" android:thickness="100dp" android:useLevel="false"> <solid android:color="#CCC" /> </shape>

Also, you can adjust the radius of the circle by adjusting android:thickness.

This is really nice! It certainly takes some playing with as the attributes are not intuitive. I managed to get this to display a nice empty circle for a border every time. And you can use padding to make sure the entire circle displays.

Cyril David · Accepted Answer · 2019-11-13 12:21:31Z

You can try to use this

<?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android" > <item> <shape android:innerRadius="0dp" android:shape="ring" android:thicknessRatio="2" android:useLevel="false" > <solid android:color="@color/button_blue_two" /> </shape> </item>

and you don't have to bother the width and height aspect ratio if you are using this for a textview

Rehan Khan · Accepted Answer · 2022-03-25 07:20:28Z

First Create Drawable Resource file

Then Add this Code to the file

 <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" // here define the shape android:shape="oval"> <solid // here define your color android:color="#666666"/> <size // here define your shape size android:width="120dp" android:height="120dp"/> </shape>

Иво Недев · Accepted Answer · 2023-03-12 14:31:08Z

I couldn't draw a circle inside my ConstraintLayout for some reason, I just couldn't use any of the answers above.

What did work perfectly is a simple TextView with the text that comes out, when you press "Alt+Num7":

 <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textColor="#0075bc" android:textSize="40dp" android:text="•"></TextView>

Jinesh Francis · Accepted Answer · 2021-03-10 06:29:51Z

You can create a custom drawable to change color and radius of the circle dynamically

import android.graphics.Canvas; import android.graphics.ColorFilter; import android.graphics.Paint; import android.graphics.PixelFormat; import android.graphics.drawable.Drawable; import androidx.annotation.NonNull; import androidx.annotation.Nullable; public class CircleDrawable extends Drawable { private Paint circlePaint; private int fillColor; private int strokeColor; private float radius; public CircleDrawable(int fillColor, int strokeColor, float radius) { this.fillColor = fillColor; this.strokeColor = strokeColor; this.radius = radius; circlePaint=new Paint(Paint.ANTI_ALIAS_FLAG); } @Override public void draw(@NonNull Canvas canvas) { int x=getBounds().centerX(); int y=getBounds().centerY(); //draw fill color circle circlePaint.setStyle(Paint.Style.FILL); circlePaint.setColor(fillColor); canvas.drawCircle(x,y,radius,circlePaint); // draw stroke circle circlePaint.setStyle(Paint.Style.STROKE); circlePaint.setColor(strokeColor); circlePaint.setStrokeWidth(5); canvas.drawCircle(x,y,radius,circlePaint); } @Override public void setAlpha(int alpha) { circlePaint.setAlpha(alpha); } @Override public void setColorFilter(@Nullable ColorFilter colorFilter) { circlePaint.setColorFilter(colorFilter); } @Override public int getOpacity() { return PixelFormat.TRANSLUCENT; } }

Set this from UI to get the circle shape

imageView.setImageDrawable(new CircleDrawable(Color.RED,Color.YELLOW,100));

The Output Will be like this

varun setia · Accepted Answer · 2018-10-10 11:36:39Z

<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item> <shape android:shape="oval"> <solid android:color="@color/text_color_green"/> <!-- Set the same value for both width and height to get a circular shape --> <size android:width="250dp" android:height="250dp"/> </shape> </item> </selector>

anon · Accepted Answer · 2010-07-06 10:05:43Z

-21

Just use

ShapeDrawable circle = new ShapeDrawable( new OvalShape() );

answered Jul 6, 2010 at 10:05

anon

3 Comments

Janusz Over a year ago

And how can I set that as the src of an ImageView in my XML layout file?

François Legrand Over a year ago

This is not directly applicable for an xml layout code

David Over a year ago

this is actually works. Thanks :) val background = ShapeDrawable(OvalShape()) background.paint.color = ContextCompat.getColor(holder.getView().context, R.color.green) val layers = arrayOf(background, resource!!) greenRoundIcon.setImageDrawable(LayerDrawable(layers))

Collectives™ on Stack Overflow

How to define a circle shape in an Android XML drawable file?

19 Answers 19

11 Comments

5 Comments

1 Comment

3 Comments

Comments

Comments

1 Comment

1 Comment

Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

19 Answers 19

11 Comments

5 Comments

1 Comment

3 Comments

Comments

Comments

1 Comment

1 Comment

Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

3 Comments

Linked

Related