Display an image clipped to a shape

You can draw shadows around the clipped area of the image so that you can display an image in the shape of a clip. With this technique you can customize your app, creating designs such as avatars and product thumbnails, or displaying logos with custom shapes. To clip and display an image, you must do the following:

• Create a custom shape.
• Clip the image to a shape.

Version compatibility

This implementation requires that your project minSDK be set to API level 21 or higher.

Dependencies

Create a custom shape

The following code creates a custom shape that can dynamically draw and render a rounded polygon:

Key points about the code

• RoundedPolygon.getBounds() defines an extension function on the RoundedPolygon class to calculate its bounds.
• The RoundedPolygonShape class implements the Shape interface, allowing you to define a custom shape (a rounded polygon) in Jetpack Compose.
• The shape uses a Matrix to manage scaling and translation operations for flexible rendering.
• The createOutline() function takes a RoundedPolygon object, scales and translates it to fit within a given size, and returns an Outline object that describes the final shape to be drawn.

Clip the image to a shape

The following code crops the image to the hexagon shape, and adds a subtle drop shadow to provide a sense of depth:

Key points about the code

• The RoundedPolygon and RoundedPolygonShape objects are used to define and apply a hexagonal shape to the image.
• The code uses graphicsLayer to add an elevation-based shadow to the image. This creates a sense of depth and visual separation from the background.
• The use of remember blocks optimizes performance by ensuring that the shape and clipping definitions are calculated only once and remembered for later recompositions of the UI.

Results

Parent collections

Have questions or feedback

Go to our frequently asked questions page and learn about quick guides or reach out and let us know your thoughts.

Go to FAQ Leave feedback