CODEWITHSUNDEEP
androidandroid-jetpack-compose
Finn
Finn

Reputation: 13

Customize serrated shapes with Jetpack Compose Android

I'm trying to create a customized serrated shape with Jetpack Compose for an Android view, this is the example:enter image description here

I don't know how to create the little waves (left/right) for this shape. Do I need to have a Box and a customized shape? Because I need to add some text inside this shape.

How can I create this element with Jetpack Compose?

Upvotes: 1

Views: 1484

Answers (1)

Richard Onslow Roper
Richard Onslow Roper

Reputation: 6863

You can go with the method explained in Philip's answer, which will require you to create a Shape instance of your own. If you do not wish for it to get overcomplicated (though it is indeed fairly simple, but anyway), you could simply do this:

1.) Get the path data of the shape in a vector drawable format. If you use a prototyping software to design the layout first (like Figma, Sketch etc.), you will have access to plugins, third-party or first, that should allow you to extract the pathdata from the shape of your choosing. For Figma, for instance, there's the 'Android Vector Drawable' plugin, that extracts the complete android-vector-drawable format code for the shape. If you do not use a service like this, just look up on the web and get the data from an online path extractor. They are basically SVG paths, with a slightly different approach. Anyway, all you need for this step is the path-data of the shape (It is a simple enough shape, you could even draw the vector yourself using some good-ol' trigonometry)

2.) Once, you have the path data, it is easy. Just create a Vector Drawable and draw the shape on screen like so

Image(
 painter = rememberPainterResource(id = R.drawable.shape) // Id refers to your drawable
)

You can use it inside a Box with a Text and you'll achieve that.

Other than that, you could use path-data directly in a Canvas so you do not need to create a Drawable Resource explicitly.

Canvas {
 drawPath(
  PathParser.createPathFromPathData(yourDataHere).asComposePath()
 )
}

There you have it.

Upvotes: 1

Related Questions