Clip & Shape Your Images
Round corners and make circular avatars.
Clip & Shape Your Images is a free Jetpack Compose Academy lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Jetpack Compose Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Beyond the Rectangle
Images draw as plain rectangles by default. To get rounded corners or circular avatars, you clip them to a shape.
Modifier.clip Cuts the Shape
The Modifier.clip function masks a composable to a given shape. Anything outside that shape simply is not drawn.
Image(painter = p, contentDescription = null,
modifier = Modifier.clip(CircleShape))CircleShape for Avatars
For a perfect circular avatar, clip with CircleShape. Pair it with a square size and Crop for a clean, round profile picture.
Modifier.size(64.dp).clip(CircleShape)Rounded Corners
Soft, modern cards use RoundedCornerShape. Give it a corner radius in dp to round all four corners evenly.
Modifier.clip(RoundedCornerShape(16.dp))Round Specific Corners
You can round corners individually, for example only the top, by passing separate values for each corner of RoundedCornerShape.
RoundedCornerShape(topStart = 16.dp, topEnd = 16.dp)Order Matters: Clip First
Modifiers apply in order. Put clip before background or border so the shape masks them too, not just the image content.
Add a Border on Top
A clipped image looks great with a matching outline. Chain a border with the same shape right after the clip.
Modifier.clip(CircleShape).border(2.dp, Color.White, CircleShape)Clip Plus Crop Together
The avatar recipe is two modifiers plus a scale: size, then clip to CircleShape, with ContentScale.Crop so the photo fills the circle.
Image(painter = p, contentDescription = null,
contentScale = ContentScale.Crop,
modifier = Modifier.size(64.dp).clip(CircleShape))Custom Shapes
Need a hexagon or a star? You can pass any Shape, including ones you define yourself with a path, to clip into bespoke outlines.
clipToBounds for Children
To stop child content from drawing outside a container, use Modifier.clipToBounds, which clips to the element rectangle.
Shadows and Clipping
A shadow needs the shape too. Apply Modifier.shadow with the same shape before the clip so the elevation follows the rounded edge.
Modifier.shadow(4.dp, CircleShape).clip(CircleShape)Quick Check
What shape do you clip an image to in order to make a perfectly circular avatar?
Recap: Shaping Images
You now clip images to CircleShape or RoundedCornerShape, order modifiers correctly, and add borders and shadows. Course complete! 🎉
Frequently asked questions
Is the “Clip & Shape Your Images” lesson free?
Yes — the full text of “Clip & Shape Your Images” is free to read here on the web, and the Jetpack Compose Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Jetpack Compose Academy course, upgrade to CoddyKit PRO.
What will I learn in “Clip & Shape Your Images”?
Round corners and make circular avatars. You practise Jetpack Compose Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Jetpack Compose Academy?
No prior experience is required. Jetpack Compose Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Clip & Shape Your Images” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Jetpack Compose Academy lesson?
Yes. Every Jetpack Compose Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- The Image Composable
- Material Icons with Icon
- ContentScale & Cropping
- Clip & Shape Your Images