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()

                    }
                }
            }
        }
    }
}