How do I create Custom Shapes in Compose application?

Published August 31, 2022

In this compose example we will learn about Shapes. Compose provided inbuilt shapes like Rectangle Shape, Circle Shape, Round Rectangle Shape. To get these shapes we need to apply clip property to Modifier compose function. All these Shapes are implements Shape Interface

@Immutable
interface Shape {
    /**
     * Creates [Outline] of this shape for the given [size].
     *
     * @param size the size of the shape boundary.
     * @param layoutDirection the current layout direction.
     * @param density the current density of the screen.
     *
     * @return [Outline] of this shape for the given [size].
     */
    fun createOutline(size: Size, layoutDirection: LayoutDirection, density: Density): Outline
}

 

What we will cover

  • Create Shape with Rectangle Shape
  • Create Circle Shape 
  • Create Round Rectangle Shape
  • Create Custom Shape

 

Let's get started

Step 1: To create new Jetpack project in Android studio please refer how to create new Project in Android studio using Jetpack compose
Step 2: Create Rectangle Shape
To create Rectangle Shape with compose we will use below code

 Box(
            modifier = Modifier
                .size(100.dp)
                .clip(RectangleShape)
                .background(Color.Green)
        )

 

Create Circle Shape


 Box(
            modifier = Modifier
                .size(100.dp)
                .clip(CircleShape)
                .background(Color.DarkGray)
        )
        

 

Create Round Rectangle Shape

Box(
            modifier = Modifier
                .size(100.dp)
                .clip(RoundedCornerShape(10.dp))
                .background(Color.Red)
        )

 

How to Create Custom shapes
To create custom shapes with comose we need to create a class which extends Shape interface.
This interface contains unimplemented method createOutline() which we need to override in our custom class

class Customshape : Shape {
    override fun createOutline(
        size: Size,
        layoutDirection: LayoutDirection,
        density: Density
    ): Outline {
        val path = Path().apply {
            moveTo(size.width / 2f, 0f)
            lineTo(size.width, size.height)
            lineTo(0f, size.height)
            close()
        }
        return Outline.Generic(path)
    }
}

 

Step 3: Run application on device/emulator, you will see below output on the screen

How do i create Custom shapes in Compose application

 

Complete code for Create shapes in Compose application and create Custom shapes using shape interface.

package com.rrtutors.compose_tutorials

import androidx.compose.ui.geometry.Size
import androidx.compose.ui.graphics.Outline
import androidx.compose.ui.graphics.Path
import androidx.compose.ui.graphics.Shape
import androidx.compose.ui.unit.Density
import androidx.compose.ui.unit.LayoutDirection

class Customshape : Shape {
    override fun createOutline(
        size: Size,
        layoutDirection: LayoutDirection,
        density: Density
    ): Outline {
        val path = Path().apply {
            moveTo(size.width / 2f, 0f)
            lineTo(size.width, size.height)
            lineTo(0f, size.height)
            close()
        }
        return Outline.Generic(path)
    }
}

Conclusion: In this compose example we covered how to create shapes and create custom shapes with custom shape class.