Jetpack compose creating a Column or Row composable with rounded corners on the edges; border-radius

I had a task recently of converting an Android application design made from Adobe XD to a functioning Android application in Jetpack Compose.
To achieve the above image with topStart and topEnd with rounded corners we follow the below steps.

STEP:

Create your main Row composable, and add two Columns inside it as the below code:



Row(
                modifier = Modifier
                    .align(CenterHorizontally)
                    .fillMaxWidth()
                    .padding(start = 10.dp, top = 5.dp, end = 10.dp, bottom = 0.dp)
            ) {
                Column(
                    modifier = Modifier
                        .clip(
                            RoundedCornerShape(
                                topStart = 20.dp,
                            )
                        )
                        .sizeIn(73.dp)
                        .background(Color(android.graphics.Color.parseColor("#E80000"))),
                ) {
                    Text(
                        style = LocalTextStyle.current.merge(
                            TextStyle(
                                color = Color(0xFFF67C37),
                                fontSize = 80.sp / LocalDensity.current.fontScale,
                                drawStyle = Stroke(width = 6f, join = StrokeJoin.Round)
                            )
                        ),
                        modifier = Modifier.padding(10.dp),
                        text = "LIVE",
                        color = Color.White,
                        fontSize = 39.sp / LocalDensity.current.fontScale,
                        fontFamily = FontFamily(Font(R.font.headlines_regular, FontWeight.Normal)),

                        )
                }
                Column(
                    modifier = Modifier
                        .clip(
                            RoundedCornerShape(
                                topEnd = 20.dp
                            )
                        )
                        .background(Color.White)
                        .padding(16.dp)
                ) {
                    Text(
                        text = "everyday",
                        color = Color(android.graphics.Color.parseColor("#FC830C")),
                        fontStyle = FontStyle.Normal,
                        fontSize = 40.sp / LocalDensity.current.fontScale,
                        fontFamily = FontFamily(Font(R.font.flood_std_regular, FontWeight.Normal)),
                        modifier = Modifier.align(Alignment.CenterHorizontally)
                    )
                    Row {
                        Column(modifier = Modifier.padding(5.dp)) {
                            Row() {
                                Image(
                                    painter = painterResource(id = R.drawable.ic_youtube),
                                    contentDescription = "youtube logo image",
                                    modifier = Modifier
                                        .size(32.dp, 32.dp)
                                )
                                Image(
                                    painter = painterResource(id = R.drawable.ic_facebook),
                                    contentDescription = "facebook logo image",
                                    modifier = Modifier.size(32.dp, 32.dp)
                                )
                            }
                            Column {
                                Text(
                                    text = "@Truelight Andrew",
                                    color = Color.Black,
                                    fontSize = 14.sp / LocalDensity.current.fontScale,
                                    fontFamily = FontFamily(
                                        Font(
                                            R.font.headlines_regular, FontWeight.Normal
                                        )
                                    ),
                                )
                            }
                        }
                        Column {
                            Image(
                                painter = painterResource(id = R.drawable.ic_facebook),
                                contentDescription = "truelight tv website address",
                                modifier = Modifier.size(32.dp, 32.dp)
                            )
                            Text(
                                text = "www.truelighttv.co.ke",
                                color = Color.Black,
                                fontSize = 14.sp / LocalDensity.current.fontScale,
                                fontFamily = FontFamily(
                                    Font(
                                        R.font.headlines_regular, FontWeight.Normal
                                    )
                                ),
                            )
                        }
                    }
                }
            }
        }

From the above code, notice the .clip( RoundedCornerShape(topStart = 20.dp)), this is the one responsible for making the rounded corner on the topStart of the Red Column and the topEnd of the white Column.clip(RoundedCornerShape(topEnd = 20.dp))

I hope this gives you what you wanted to achieve.cheers! Like and share

Blog

Jetpack compose creating a Column or Row composable with rounded corners on the edges; border-radius

Moses Asiago

STEP:

Join Our Newsletter. No Spam, Only the good stuff.

Related