AndroidAndroid UI

How To Create Circle Shape Using XML In Android

Android allows us to create shapes using shape drawable. The basic shapes supported in shape drawables are Line, Oval, Rectangle and Ring. This tutorial focuses on how to create circle shape. The drawable created using android shapes are scalable and highly maintainable compared to pre graphics bundled with APK.

devdeeds create circle shape

Here we use Oval. If you have ever worked with SVG files then it will be easily understandable. In SVG it simply stores paths of the drawings and in the runtime it will be processed and build graphics out of it. The same logic has been applied here too.

Create A Solid Circle Shape

Create a shape drawable as follows,

res/drawable/black_circle.xml

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

The property android:shape="oval" makes it a circular shape.

Usage In Activity Layout

Now we can use this shape in the same way we use drawables. Let’s set it to android:src of the ImageView.

res/layout/activity_layout.xml

<ImageView
   android:id="@+id/btn_capture_photo"
   android:layout_width="100dp"
   android:layout_height="100dp"   
   android:src="@drawable/black_circle" />

The important thing that you have to notice is that i have given 100dp to both layout_width and layout_height because a circle should have same radius around the area. Otherwise it will look like Oval.

These height and width values can either be saved in view or in drawable file itself.

Output

black_shape

How To Add A Border To The Circle

By adding a property called stroke. You can change the color and size of the stroke as given below,

res/drawable/black_circle_with_border.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval" >
    <solid android:color="#000000" />
    <stroke android:color="#c4441d" android:width="5dp" />
</shape>

Usage In Activity Layout

Just set the shape drawable as the android:src of the ImageView.

res/layout/activity_layout.xml

<ImageView
   android:id="@+id/btn_capture_photo"
   android:layout_width="100dp"
   android:layout_height="100dp"   
   android:src="@drawable/black_circle_with_border" />

Output

black_shape_with_border

About author

Geethu is a teacher by profession, but she likes to research new things and is also interested in writing. Devdeeds is her blog, where she writes all the blog posts related to technology, gadgets, mobile apps, games, and related content.

Leave a Reply

Your email address will not be published. Required fields are marked *