How to Draw Different Types of Circles in Android?

In Android, we can manually create shapes as required. A shape can be designed in XML by creating an Android Resource File. The type of file allows various attributes like dimensions, color, strokes (border), solid (background), etc. for creating a desired shape and design. Basically, in this article, we have explained 3 types of circles:

1. Circle 1: A simple circle with only a border
2. Circle 2: A simple circle with only solid color
3. Circle 3: A circle with a border and a solid color.

In this article, we will show you how you could create different types of circles. Now to start with, follow the below steps once the IDE is ready.

Step by Step Implementation

Step 1: Create a New Project in Android Studio

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. We demonstrated the application in Kotlin, so make sure you select Kotlin as the primary language while creating a New Project.

Step 2: Creating Android Resource Files

In this article, we shall be implementing 3 types of Circles. So we created three such resource files for circle 1, circle 2, and circle 3. To create an Android Resource File, right-click on the res folder, go to New and click on Android Resource File as shown below.

Name the file according to the circle. For the first file, we named it circle_1.

Code for circle_1.xml:

Circle 1 is a simple circle that has nobody color and only an outline. For the same, the code is given below.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">

    <stroke
        android:width="5sp"
        android:color="#0f9d58"/>

</shape>

Code for circle_2.xml:

In Circle 2, we have attributed it with only body color. Refer to the code below.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">

    <solid
        android:color="#0f9d58"/>

</shape>

Code for circle_3.xml:

In this circle, we have combined the above two attributes, i.e., boundary color and body color. The code for the same is given below. 

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">

    <solid
        android:color="#0f9d58"/>

    <stroke
        android:width="5sp"
        android:color="@color/black"/>

</shape>

Step 3: Working with the activity_main.xml file

Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file. We shall be displaying all three circles for which we need to add three ImageViews.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/circle_1"
        android:layout_width="100sp"
        android:layout_height="100sp"
        android:src="@drawable/circle_1"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="30sp"/>

    <ImageView
        android:id="@+id/circle_2"
        android:layout_below="@id/circle_1"
        android:layout_width="100sp"
        android:layout_height="100sp"
        android:src="@drawable/circle_2"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="30sp"/>

    <ImageView
        android:id="@+id/circle_3"
        android:layout_below="@id/circle_2"
        android:layout_width="100sp"
        android:layout_height="100sp"
        android:src="@drawable/circle_3"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="30sp"/>

</RelativeLayout>

No changes in MainActivity.kt. As we are displaying the circles directly into the ImageViews, we shall leave the main file untouched.

package org.geeksforgeeks.myapplication

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }
}

Output:

You can see the three types of circles that we created previously. Circle 1 has only boundary color, Circle 2 has only body color, and Circle 3 has both boundary and body color.