¿Cómo dibujar una imagen circular en Android Jetpack Compose?

Digamos que tengo una imagen de avatar rectangular como la que se muestra a continuación, ¿cómo puedo forzar que se dibuje como un círculo en Jetpack Compose?

Hay una acortar modificador que se puede aplicar a cualquier componible, así como al Imagesolo pasa un CircleShape en ello:

Image(
    painter = painterResource(R.drawable.sample_avatar),
    contentDescription = "avatar",
    contentScale = ContentScale.Crop,            // crop the image if it's not a square
    modifier = Modifier
        .size(64.dp)
        .clip(CircleShape)                       // clip to the circle shape
        .border(2.dp, Color.Gray, CircleShape)   // add a border (optional)
)

Puede usar cualquier otra forma para recortar la imagen, por ejemplo CircleShape es solo RoundedCornerShape(percent = 50). Intentemos RoundedCornerShape(percent = 10):

Además, puede intentar un

implementation "com.github.skydoves:landscapist-glide:1.3.6"

Mediante el uso Modifier.clip(CircleShape)

GlideImage(
            modifier = Modifier
                    .width(50.dp)
                    .height(50.dp)
                    .clip(CircleShape)
                    .clickable(enabled = true, onClick = onClick),
            imageModel = "https://avatars.githubusercontent.com/u/27887884?v=4",
                // Crop, Fit, Inside, FillHeight, FillWidth, None
            contentScale = ContentScale.Crop,
                // shows an image with a circular revealed animation.
            circularReveal = CircularReveal(duration = 250),
                // shows a placeholder ImageBitmap when loading.
            placeHolder = ImageBitmap.imageResource(R.drawable.avater),
                // shows an error ImageBitmap when the request failed.
            error = ImageBitmap.imageResource(id = R.drawable.avater)
            )

Para más componentes visite paisajista

Para aquellos que se preguntan cómo hacer que una imagen sea cuadrada (o redonda) sin establecer explícitamente sus tamaños, hay Modifier.aspectRatio(1f)

Esto lo podemos lograr usando el campo de fondo en un modificador.

Image(
  painter = painterResource(id = R.drawable.ic_arrow_right),
  contentDescription = "",
  modifier = Modifier
             .padding(4.dp, 4.dp).background(colorResource(id = R.color.greenColor), CircleShape)
              .clip(CircleShape),
  colorFilter = ColorFilter.tint(colorResource(id = R.color.white)),
            contentScale = ContentScale.Crop,
 )