https://kotlinlang.org logo
#compose
Title
# compose
z

Zaki Shaikh

02/18/2023, 5:38 AM
Hello everyone, I want to show Image in Circle shape in a rectangular container how to do it, at the moment it is seen streched vertically.
Copy code
Column(
        modifier = modifier
            .height(200.dp)
            .background(color = Color.Cameron, shape = RectangleShape)
            .clip(RectangleShape)
            .clickable(onClick = onClick),
        verticalArrangement = Arrangement.SpaceEvenly,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {

        RemoteImage(
            modifier = Modifier
                .clip(CircleShape)
                .fillMaxSize(.7F),
            imageLink = imageLink,
            contentScale = ContentScale.FillBounds,
            error = error
        )

        Text(
            text = title,
            color = Color.White,
            fontWeight = FontWeight.Bold,
            textAlign = TextAlign.Center,
            style = MaterialTheme.typography.overline,
            modifier = Modifier.padding(top = spacing.extraSmall)
        )
    }
I tried this as well
Copy code
RemoteImage(
            modifier = Modifier
                .clip(CircleShape)
                .fillMaxWidth(.7f)
                .fillMaxHeight(.6f),
            imageLink = imageLink,
            contentScale = ContentScale.FillBounds,
            error = error
        )
but on some devices it is being still streched
s

Stylianos Gakis

02/18/2023, 10:32 AM
Have you tried the aspectRatio(1) modifier to force it into a circle?
z

Zaki Shaikh

02/18/2023, 11:27 AM
@Stylianos Gakis I didn't try but I will try, thank you.
21 Views