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: http://developer.android.com/guide/topics/resources/drawable-resource.html#Shape — Mario Kutlev, Aug 20 '13 at 10:57
You can get the circle xml from here https://developer.android.com/samples/WearSpeakerSample/res/drawable/circle.html — Shahab Rauf, Feb 15 '18 at 08:13
The Android Dev documentation has been improved since then. Now it covers `android:shape` element - [Drawable resources](https://d.android.com/guide/topics/resources/drawable-resource#Shape). — naXa stands with Ukraine, Sep 27 '18 at 15:03

score 1781 · Accepted Answer · answered Aug 25 '12 at 12:24

1781

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 '12 at 12:24

Arefin

18,203
2
17
4

65

And how to change the color dynamically? – Ankit Garg Dec 26 '14 at 07:19
6

@AnkitGarg you can apply a color filter from Java code (see Drawable class) – milosmns Feb 12 '15 at 15:19
8

I tried `dp` and it was distorted into an oval shape. For me, using `pt` instead fixed it. – Tyler Mar 29 '15 at 02:46
In some phones if you use the shape as "oval", even setting width and height to the same value, it seems a bit weird. Using "ring" as shape solved the problem to me. – FelipeKunzler Aug 30 '15 at 01:32
18

No need for the `size` in the `shape` if you later define a square size for the view. – Ferran Maylinch Nov 25 '15 at 17:58
4

Its shape is oval and not round. Can anyone confirm?? – Tarun Deep Attri Dec 21 '15 at 04:13
are u able to add a image in the middle of that circle too? – Jono Feb 27 '18 at 15:00
@jonney Add a circular image in the same place with margins. Make a new question if you need further help. – Jake Lee Mar 15 '18 at 10:25
how can i fill the half circle with 2 colors – Sattar Aug 02 '18 at 09:44
@Tarun just set width equal to height, it will show up as a circle – Vadim Kotov Nov 28 '19 at 14:02
1

for changing color of drawable programmatically, you can get the grawable directly by calling getDrawable of layout it has been assigned and then change color from there. – Bénédicte Lagouge Mar 11 '20 at 09:25

M. Reza Nasirloo · Answer 2 · 2018-09-14T09:54:40.513

876

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.

edited Sep 14 '18 at 09:54

answered Jan 11 '16 at 15:08

M. Reza Nasirloo

16,434
2
29
41

2

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. – Ferran Maylinch Feb 13 '16 at 11:49
2

@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). – Michele Apr 04 '16 at 10:34
I am doing the exact same thing but the circle is drawn as oval – Bugs Happen Jan 19 '17 at 08:21
What if we need it to create around a textview with different border colors at run time ? – Anshul Tyagi Mar 27 '17 at 13:00
@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. – M. Reza Nasirloo Mar 28 '17 at 17:42

Ravi Makvana · Answer 3 · 2015-06-04T11:41:19.250

103

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>

edited Jun 04 '15 at 11:41

answered Nov 25 '14 at 10:01

Ravi Makvana

2,872
2
24
38

From https://stackoverflow.com/a/70477622/4440629, the file needs to go in res/drawable not res/layout – Fletch May 20 '22 at 10:30

score 54 · Answer 4 · edited Apr 30 '18 at 09:52

54

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 '18 at 09:52

Slimane amiar

934
12
27

answered Jul 29 '16 at 16:17

Riyas PK

3,147
1
23
29

Hey, I am having a padding between circle and viewport. Can you help me out? – Ajeet Feb 07 '17 at 07:33
1

@Ajeet you can change the size of viewport and you can put your path inside group and specify the translation and scale ` – Boris Treukhov Mar 16 '17 at 18:24
4

@Riyas can you explain the pathData part? what those co-ordinates imply? – Darshan Miskin Apr 16 '19 at 07:44

score 46 · Answer 5 · answered Aug 11 '11 at 17:32

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 · Answer 6 · 2019-07-27T11:40:06.530

25

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>

edited Jul 27 '19 at 11:40

answered Feb 06 '18 at 09:36

Paraskevas Ntsounos

1,755
2
18
34

score 23 · Answer 7 · edited Jun 07 '18 at 09:40

23

<?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>

edited Jun 07 '18 at 09:40

João Vitor

241
5
11

answered Jan 29 '16 at 10:00

Ashana.Jackol

3,064
28
22

2

What do the `` do in an oval (which to my thinking don't have corners)? – SMBiggs Aug 01 '19 at 17:05

score 22 · Answer 8 · answered Jun 09 '15 at 23:28

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

+ add 'size' to the shape(s) (depending on usecase). – TouchBoarder Dec 18 '15 at 07:30 — TouchBoarder, Dec 18 '15 at 07:30

score 20 · Answer 9 · answered Jun 05 '20 at 19:35

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

score 18 · Answer 10 · edited Feb 26 '20 at 17:11

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>

score 16 · Answer 11 · edited Dec 17 '22 at 20:01

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

score 10 · Answer 12 · edited Oct 18 '17 at 21:21

<?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>

Иво Недев · Answer 13 · 2023-03-12T14:31:08.087

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>

score 6 · Answer 14 · answered Jun 07 '18 at 08:39

6

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.

answered Jun 07 '18 at 08:39

krhitesh

777
9
14

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. – SMBiggs Aug 01 '19 at 17:13

score 6 · Answer 15 · answered Nov 13 '19 at 12:21

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

score 6 · Answer 16 · answered Mar 25 '22 at 07:20

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>

score 3 · Answer 17 · answered Mar 10 '21 at 06:29

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

score 1 · Answer 18 · answered Oct 10 '18 at 11:36

<?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>

score -21 · Answer 19 · answered Jul 06 '10 at 10:05

-21

Just use

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

answered Jul 06 '10 at 10:05

27

And how can I set that as the src of an ImageView in my XML layout file? – Janusz Jul 06 '10 at 10:22
This is not directly applicable for an xml layout code – François Legrand Aug 24 '17 at 15:03
2

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)) – David Feb 27 '19 at 12:46

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

19 Answers19

Linked

Related