Canvas API in Android Jetpack Compose - GeeksforGeeks

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 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
@Composablefun 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 logodrawLine(                        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.
Android-Jetpack
Android
Kotlin
Android
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Resource Raw Folder in Android Studio
Flutter - Custom Bottom Navigation Bar
How to Read Data from SQLite Database in Android?
How to Post Data to API using Retrofit in Android?
Flexbox-Layout in Android
Android UI Layouts
Kotlin Array
Retrofit with Kotlin Coroutine in Android
How to Get Current Location in Android?
Kotlin Setters and Getters