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 theRoundedPolygon
class to calculate its bounds.- The
RoundedPolygonShape
class implements theShape
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 aRoundedPolygon
object, scales and translates it to fit within a given size, and returns anOutline
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
andRoundedPolygonShape
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
![Dog in hexagon with shadow applied around the edges](https://developer.android.com/static/develop/ui/compose/images/graphics/shapes/clip_with_shadow.png?authuser=5)
Parent collections
![](https://developer.android.com/static/images/quick-guides/collection-illustration.png?authuser=5)
Display images
Discover techniques for using bright, engaging visuals to
give your Android app a beautiful look and feel.
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.