Recortar y dar forma a sus imágenes
Redondee esquinas y cree avatares circulares.
Recortar y dar forma a sus imágenes es una lección gratuita de Jetpack Compose Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Jetpack Compose Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Jetpack Compose Academy incluye 4 lecciones en total.
Partes de esta lección aún no han sido traducidas y se muestran en 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! 🎉
Preguntas frecuentes
¿La lección «Recortar y dar forma a sus imágenes» es gratis?
Sí — el texto completo de «Recortar y dar forma a sus imágenes» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Jetpack Compose Academy, actualiza a CoddyKit PRO. El curso de Jetpack Compose Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Recortar y dar forma a sus imágenes»?
Redondee esquinas y cree avatares circulares. Practicas Jetpack Compose Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Jetpack Compose Academy?
No se requiere experiencia previa. Jetpack Compose Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «Recortar y dar forma a sus imágenes»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Jetpack Compose Academy?
Sí. Cada lección de Jetpack Compose Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- El Composable Image
- Iconos de Material con Icon
- ContentScale y recorte
- Recortar y dar forma a sus imágenes