Recortando e Dando Forma às Imagens
Arredonde cantos e crie avatares circulares.
Recortando e Dando Forma às Imagens é uma aula grátis de Jetpack Compose Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Jetpack Compose Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Jetpack Compose Academy inclui 4 aulas no total.
Partes desta aula ainda não foram traduzidas e aparecem em inglês.
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! 🎉
Perguntas Frequentes
A aula “Recortando e Dando Forma às Imagens” é grátis?
Sim — o texto completo de “Recortando e Dando Forma às Imagens” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Jetpack Compose Academy, atualize para CoddyKit PRO. O curso de Jetpack Compose Academy inclui 4 aulas no total.
O que vou aprender em “Recortando e Dando Forma às Imagens”?
Arredonde cantos e crie avatares circulares. Você pratica Jetpack Compose Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Jetpack Compose Academy?
Nenhuma experiência prévia é necessária. Jetpack Compose Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.
Quanto tempo leva a aula “Recortando e Dando Forma às Imagens”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Jetpack Compose Academy?
Sim. Cada aula de Jetpack Compose Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- A Composable Image
- Ícones do Material com Icon
- ContentScale e Recorte
- Recortando e Dando Forma às Imagens