Puedes ajustar una imagen a una forma recortada y dibujar sombras alrededor del perímetro de la forma para darle un aspecto tridimensional. Esta técnica es útil para crear diseños, como avatares y miniaturas de productos, o mostrar logotipos con formas personalizadas.
Para mostrar una imagen recortada en una forma, debes hacer lo siguiente:
- Crea la forma.
- Recorta la imagen en la forma.
Compatibilidad de versiones
Esta implementación requiere que el minSDK de tu proyecto se establezca en el nivel de API 21 o superior.
Dependencias
Crea una forma
Con el siguiente código, se crea una forma personalizada que puede dibujar y renderizar de forma dinámica un polígono redondeado:
fun RoundedPolygon.getBounds() = calculateBounds().let { Rect(it[0], it[1], it[2], it[3]) } class RoundedPolygonShape( private val polygon: RoundedPolygon, private var matrix: Matrix = Matrix() ) : Shape { private var path = Path() override fun createOutline( size: Size, layoutDirection: LayoutDirection, density: Density ): Outline { path.rewind() path = polygon.toPath().asComposePath() matrix.reset() val bounds = polygon.getBounds() val maxDimension = max(bounds.width, bounds.height) matrix.scale(size.width / maxDimension, size.height / maxDimension) matrix.translate(-bounds.left, -bounds.top) path.transform(matrix) return Outline.Generic(path) } }
Puntos clave sobre el código
RoundedPolygon.getBounds()
define una función de extensión en la claseRoundedPolygon
para calcular sus límites.- La clase
RoundedPolygonShape
implementa la interfazShape
, lo que te permite definir una forma personalizada (un polígono redondeado) en Jetpack Compose. - La forma usa un
Matrix
para administrar las operaciones de escalamiento y traducción para una renderización flexible. - La función
createOutline()
toma un objetoRoundedPolygon
, lo escala y lo traduce para que se ajuste a un tamaño determinado, y muestra un objetoOutline
que describe la forma final que se dibujará.
Recorta la imagen en una forma
El siguiente código recorta la imagen en un hexágono y agrega una sombra sutil para proporcionar una sensación de profundidad:
val hexagon = remember { RoundedPolygon( 6, rounding = CornerRounding(0.2f) ) } val clip = remember(hexagon) { RoundedPolygonShape(polygon = hexagon) } Box( modifier = Modifier .clip(clip) .background(MaterialTheme.colorScheme.secondary) .size(200.dp) ) { Text( "Hello Compose", color = MaterialTheme.colorScheme.onSecondary, modifier = Modifier.align(Alignment.Center) ) }
Puntos clave sobre el código
- Los objetos
RoundedPolygon
yRoundedPolygonShape
se usan para definir y aplicar una forma hexagonal a la imagen. - El código usa
graphicsLayer
para agregar una sombra basada en la elevación a la imagen. Esto crea una sensación de profundidad y separación visual del fondo. - El uso de bloques
remember
optimiza el rendimiento, ya que garantiza que las definiciones de forma y recorte se calculen solo una vez y se recuerden para las recomposiciones posteriores de la IU.
Resultados

Colecciones que contienen esta guía
Esta guía forma parte de estas colecciones de guías rápidas seleccionadas que abarcan objetivos más amplios de desarrollo de Android:
