How to Draw Different Types of Circles in Android?
Last Updated :
23 Jan, 2022
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:
- Circle 1: A simple circle with only a border
- Circle 2: A simple circle with only solid color
- 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
<? xml version = "1.0" encoding = "utf-8" ?>
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
<? xml version = "1.0" encoding = "utf-8" ?>
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
<? xml version = "1.0" encoding = "utf-8" ?>
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
<? xml version = "1.0" encoding = "utf-8" ?>
< RelativeLayout
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.
Kotlin
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.
Share your thoughts in the comments
Please Login to comment...