Canvas API in Android Jetpack Compose
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.
If you call this composable from setContent you will see something like this.
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.
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.
Now run the app to see the final result.
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.