Create Different Types of Circle in Canvas in Android using Jetpack Compose
In Android, Canvas is used for creating different types of visual elements, which is most commonly used for creating different types of shapes. In our example, we have created a circle of different types, i.e., the circle with a solid boundary with no fill, the circle with a dotted boundary with no fill, the circle with no boundary and solid fill, and a circle, with a boundary and a solid fill as shown below.
In this article, we will show you how you could create different types of Circle in Canvas in Android using Jetpack Compose. 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. While choosing the template, select Empty Compose Activity. If you do not find this template, try upgrading the Android Studio to the latest version. We demonstrated the application in Kotlin, so make sure you select Kotlin as the primary language while creating a New Project.
Step 2: Working with the MainActivity.kt file
Go to the MainActivity.kt file and refer to the following code. Below is the code for the MainActivity.kt file. Comments are added inside the code to understand the code in more detail.
Kotlin
package com.w3wiki.jcdrawcircle import android.os.Bundle import androidx.activity.ComponentActivity import androidx.activity.compose.setContent import androidx.compose.foundation.Canvas import androidx.compose.foundation.layout.* import androidx.compose.material.* import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.geometry.Offset import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.PathEffect import androidx.compose.ui.graphics.drawscope.Stroke import androidx.compose.ui.unit.dp class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super .onCreate(savedInstanceState) setContent { // Creating a Simple Scaffold // Layout for the application Scaffold( // Creating a Top Bar topBar = { TopAppBar(title = { Text( "GFG | Draw Circle" , color = Color.White) }, backgroundColor = Color( 0xff0f9d58 )) }, // Creating Content content = { // Creating a Column Layout Column(Modifier.fillMaxSize(), horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.Center) { // 1. OUTLINED CIRCLE Row(Modifier.fillMaxWidth().height( 100 .dp)) { // Creating a Canvas to draw a Circle Canvas(modifier = Modifier.fillMaxSize()) { val canvasWidth = size.width val canvasHeight = size.height drawCircle( color = Color( 0xff0f9d58 ), center = Offset(x = canvasWidth / 2 , y = canvasHeight / 2 ), radius = size.minDimension/ 2 , style = Stroke(10F) ) } } // Adding a Space of height 100dp Spacer(modifier = Modifier.height( 50 .dp)) // 2. DASH_PATH_EFFECT CIRCLE Row(Modifier.fillMaxWidth().height( 100 .dp)) { // Creating a Canvas to draw a Circle Canvas(modifier = Modifier.fillMaxSize()) { val canvasWidth = size.width val canvasHeight = size.height drawCircle( color = Color( 0xff0f9d58 ), center = Offset(x = canvasWidth / 2 , y = canvasHeight / 2 ), radius = size.minDimension/ 2 , style = Stroke(width = 8f, pathEffect = PathEffect.dashPathEffect(floatArrayOf(10f, 10f), 0f)) ) } } // Adding a Space of height 100dp Spacer(modifier = Modifier.height( 50 .dp)) // 3. FILLED CIRCLE Row(Modifier.fillMaxWidth().height( 100 .dp)) { // Creating a Canvas to draw a Circle Canvas(modifier = Modifier.fillMaxSize()) { val canvasWidth = size.width val canvasHeight = size.height drawCircle( color = Color( 0xff0f9d58 ), center = Offset(x = canvasWidth / 2 , y = canvasHeight / 2 ), radius = size.minDimension/ 2 ) } } // Adding a Space of height 100dp Spacer(modifier = Modifier.height( 50 .dp)) // 4. OUTLINED (Color1) - FILLED (Color2) CIRCLE Row(Modifier.fillMaxWidth().height( 100 .dp)) { // Creating a Canvas to draw a Circle Canvas(modifier = Modifier.fillMaxSize()) { val canvasWidth = size.width val canvasHeight = size.height drawCircle( color = Color.Black, center = Offset(x = canvasWidth / 2 , y = canvasHeight / 2 ), radius = size.minDimension/ 1 .9F ) drawCircle( color = Color( 0xff0f9d58 ), center = Offset(x = canvasWidth / 2 , y = canvasHeight / 2 ), radius = size.minDimension/ 2 ) } } } } ) } } } |
Output:
You can see the four types of circles that we have created in the below screenshot.
Contact Us