Canvas API in Android Jetpack Compose

Last Updated : 20 Dec, 2021

Jetpack Compose is a modern UI toolkit that is designed to simplify UI development in Android. It consists of a reactive programming model with conciseness and ease of Kotlin programming language. It is fully declarative so that you can describe your UI by calling some series of functions that will transform your data into a UI hierarchy. When the data changes or is updated then the framework automatically recalls these functions and updates the view for you. Sometimes an app needs to draw some custom graphics on the screen and have precise control over what’s been drawn on the screen. In this article, we will learn the basics of Canvas API in jetpack compose and try to create a GeeksforGeeks logo using canvas API. Below is the image of how it will look finally,

Step by Step Implementation

Step 1: Create a New Project

To create a new project in the Android Studio Canary Version please refer to How to Create a new Project in Android Studio Canary Version with Jetpack Compose.

Step 2: Working with the MainActivity.kt file

Navigate to the app > java > your app’s package name and open the MainActivity.kt file.

Kotlin

@Composable
fun Icon(modifier: Modifier = Modifier) { 
    Canvas(modifier = modifier.size(100.dp), onDraw = { 
    
        val canvasWidth = size.width 
        val canvasHeight = size.height 
  
        // we first draw the arc which 
        // will be the curve of the logo 
        drawArc( 
            color = Color.White, 
            // arc starts at 0 degree and ends 
            startAngle = 0f, 
            // set use center to false to draw the 
            // arc without centered line 
            // Tip: use center to true to draw the arc 
            // with centered line and see the difference 
            useCenter = false, 
            // set the end angle of the arc 
            sweepAngle = 300f, 
            // set the width of the arc and  
            // how the arc cap will be drawn 
            // cap = StrokeCap.Round will draw  
            // the arc with rounded end 
            style = Stroke(width = 40f, cap = StrokeCap.Square) 
        ) 
   
    }) 
  
}

If you call this composable from setContent you will see something like this.

Kotlin

class MainActivity : ComponentActivity() { 
    override fun onCreate(savedInstanceState: Bundle?) { 
        super.onCreate(savedInstanceState) 
        setContent { 
              // CanvasApiTheme is Auto generated theme, 
              // It will be appnameTheme in your case 
            CanvasAPITheme { 
                Icon() 
            } 
        } 
    } 
}

Now we need to add a line in the center. We will use the function drawLine in the canvas scope. Add this code below the arc so that it will be on top of the arc

Note: Order in which shapes are written in canvas scope is the order in which they will be placed on each other.

Kotlin

// draw the center line of the logo 
drawLine(             
            color = Color.White, 
            // set the start point of the  
            // line to the center of the canvas 
            start = Offset(x = 0f, y = canvasHeight / 2), 
            // set the end point of the  
            // line to the center of the canvas 
            end = Offset(x = canvasWidth, y = canvasHeight / 2), 
            // set the width of the line 
            strokeWidth = 40f 
        )

Now if you run the app you will see complete G like this.

Our one side of the logo is complete, we just need to place two Icon composable in a row such that one is the mirror image of each other. MainActivity will now look like this. Refer to the comments for better understanding.

Kotlin

class MainActivity : ComponentActivity() { 
    override fun onCreate(savedInstanceState: Bundle?) { 
        super.onCreate(savedInstanceState) 
        setContent { 
            CanvasAPITheme { 
                // Create a box to and set contentAlignment 
                // to Center to  center the Icon 
                Box( 
                    modifier = Modifier 
                        .fillMaxSize() 
                        .background(Color(0xFF308D46)), 
  
                    contentAlignment = Alignment.Center 
                ) { 
  
                    // Create a row 
                    Row { 
  
                        // Place one Icon in the row but  
                        // rotate Y Axis by -180 degree 
                        // it will look like mirror image 
                        Icon(Modifier.graphicsLayer(rotationY = -180f)) 
                          
                        // set some space between the icons 
                        Spacer(modifier = Modifier.width(20.dp)) 
  
                        // Original Icon without rotation 
                        Icon() 
  
                    } 
                } 
            } 
        } 
    } 
}

Now run the app to see the final result.

Output:

In this article, we used Arc and Line. Canvas also provides the option to draw other shapes like

drawRect to draw a rectangle.
drawImage to draw the bitmap.
drawRoundRect to draw a rounded rectangle.
drawCircle to draw a circle.
drawOval for oval.
drawPath for drawing path.
drawPoints to draw points given in the argument.

Toast in Android Jetpack Compose

sunny52525

Improve

Article Tags :

Canvas API in Android Jetpack Compose

Step by Step Implementation

Kotlin

Kotlin

Kotlin

Kotlin

Similar Reads

Thank You!

What kind of Experience do you want to share?