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.
@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.
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.
// 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.
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.