Tutorial :How to define a circle shape in an Android xml drawable file?


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.


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>  


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>  

enter image description here

For solid circle use:

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

enter image description here

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>  

enter image description here

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.


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>  


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


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


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 :

enter image description here


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


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


If you want a circle like this

enter image description here

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>  


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


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.

enter image description here


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+7":

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


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


Just use

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

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Next Post »