ตัดและกำหนดรูปทรงให้ภาพ

Images draw as plain rectangles by default. To get rounded corners or circular avatars, you clip them to a shape.

The Modifier.clip function masks a composable to a given shape. Anything outside that shape simply is not drawn.

For a perfect circular avatar, clip with CircleShape. Pair it with a square size and Crop for a clean, round profile picture.

Soft, modern cards use RoundedCornerShape. Give it a corner radius in dp to round all four corners evenly.

You can round corners individually, for example only the top, by passing separate values for each corner of RoundedCornerShape.

Modifiers apply in order. Put clip before background or border so the shape masks them too, not just the image content.

A clipped image looks great with a matching outline. Chain a border with the same shape right after the clip.

The avatar recipe is two modifiers plus a scale: size, then clip to CircleShape, with ContentScale.Crop so the photo fills the circle.

Need a hexagon or a star? You can pass any Shape, including ones you define yourself with a path, to clip into bespoke outlines.

To stop child content from drawing outside a container, use Modifier.clipToBounds, which clips to the element rectangle.

A shadow needs the shape too. Apply Modifier.shadow with the same shape before the clip so the elevation follows the rounded edge.

What shape do you clip an image to in order to make a perfectly circular avatar?

You now clip images to CircleShape or RoundedCornerShape, order modifiers correctly, and add borders and shadows. Course complete! 🎉