Introduction

In Android, a circle drawable is usually defined with a <shape> resource whose android:shape is set to "oval". It becomes a true circle when the drawable is rendered into a square area, either because the drawable itself has equal width and height or because the view using it is square.

This is a useful alternative to shipping bitmap assets. XML drawables scale cleanly, are easy to theme, and can be edited without opening an image tool.

Define the Shape in XML

Create a file such as res/drawable/circle_shape.xml:

1<?xml version="1.0" encoding="utf-8"?>
2<shape xmlns:android="http://schemas.android.com/apk/res/android"
3    android:shape="oval">
4
5    <size
6        android:width="64dp"
7        android:height="64dp" />
8
9    <solid android:color="#4CAF50" />
10
11    <stroke
12        android:width="2dp"
13        android:color="#1B5E20" />
14</shape>

The oval setting tells Android to draw an ellipse. Equal width and height make that ellipse a circle.

The <solid> tag sets the fill color, and <stroke> adds an outline. Those are usually the only pieces you need for avatars, badges, and round buttons.

Use the Drawable on a Square View

The drawable can be attached as a background in a layout:

1<TextView
2    android:layout_width="64dp"
3    android:layout_height="64dp"
4    android:background="@drawable/circle_shape"
5    android:gravity="center"
6    android:text="A"
7    android:textColor="@android:color/white" />

This works because the view itself is square. If the view were wider than it is tall, the same oval drawable would stretch into an ellipse.

That is the key practical rule: the drawable definition and the target view size both affect the final result.

Add Gradients or Theme Variants

You can replace the solid fill with a gradient if you want a more decorative look:

1<shape xmlns:android="http://schemas.android.com/apk/res/android"
2    android:shape="oval">
3
4    <size
5        android:width="72dp"
6        android:height="72dp" />
7
8    <gradient
9        android:startColor="#FF8A65"
10        android:endColor="#D84315"
11        android:angle="45" />
12</shape>

This is still lightweight compared with an image asset and is easy to duplicate into state-based or theme-based variants when the design changes.

Know When XML Is Not Enough

A shape drawable gives you a circular background, but it does not clip arbitrary content into a circle. For example, if you want an image itself to appear circular, you usually need an ImageView transformation, a ShapeableImageView, or another clipping approach.

That distinction matters because "draw a round background" and "clip content into a circle" are different tasks.

XML drawables are best when the circle is decorative or acts as a background behind already-centered text or icons.

If you need press feedback, you can also wrap the circle drawable inside a ripple or state-list resource instead of trying to hard-code every interaction state into one shape file.

Common Pitfalls

The biggest mistake is setting android:shape="oval" and then applying the drawable to a non-square view. The result is an ellipse, not a circle.

Another common issue is assuming the <size> element alone controls the final rendered size. The view layout can still stretch or constrain the drawable.

It is also easy to use a shape drawable when what you really need is circular clipping for an image or complex content. Those cases need a different tool.

Finally, if the circle is meant to be tinted dynamically, make sure the chosen view and Android version handle drawable tinting the way you expect.

Summary

• Use <shape android:shape="oval"> to define a circular drawable in XML.
• Keep width and height equal for a true circle.
• Apply the drawable to a square view to preserve the shape.
• Add solid, stroke, or gradient elements for styling.
• Use a different approach when you need to clip images or other content into a circle.