CODEWITHSUNDEEP
android-cardviewandroid-jetpack-compose
Elye
Elye

Reputation: 60161

Why is the Jetpack Compose card radius corner not even

I'm having a lazyColumn that wrap items of

@Composable
fun MySimpleListItem(
    itemViewState: String,
    itemClickedCallback: (() -> Unit)? = null,
) {
    Card(
        shape = RoundedCornerShape(50.dp),
        backgroundColor = Color(0xFFFF0000),
    ) {
        Text(
            text = itemViewState,
            modifier = Modifier.fillMaxWidth().padding(16.dp),
            style = TextStyle(fontSize = 32.sp),
            textAlign = TextAlign.Center
        )
    }
}

Looks like the corner at the top and bottom is rounded differently. Did I do anything wrong?

enter image description here

Upvotes: 9

Views: 22942

Answers (1)

jns
jns

Reputation: 6952

Your cards height is too small to display the shape correctly. It should be at least twice as large as your radius

Card(
    modifier = Modifier.preferredHeight(100.dp),
    shape = RoundedCornerShape(50.dp),
    backgroundColor = Color(0xFFFF0000),
)

or set the radius of your shape in percent:

Card(
    shape = RoundedCornerShape(50),
    backgroundColor = Color(0xFFFF0000),
    )

Upvotes: 31

Related Questions