Hi! I’m trying to create a table view where some of the items inside have a background color. My pro...

# compose

[Nicolai]

Hi!
I’m trying to create a table view where some of the items inside have a background color.
My problem is that the table view itself has a RoundedCornerShape which means that if one of the 4 corner items have a background it would go outside the border.
Any way to only draw inside the parents modifiers border bounds?
Code example and preview in thread 🧵

[Nicolai]

@Composable
fun PTable() {
    Row(
        modifier = Modifier
            .padding(16.dp)
            .fillMaxWidth()
            .border(
                width = 0.2.dp,
                color = Color.White,
                shape = RoundedCornerShape(8.dp)
            )
    ) {
        for (i in 0..3) {
            Column(
                modifier = Modifier
                    .weight(1f)
                    .background(Color.White)
            ) {
                for (j in 0..3) {
                    Box(
                        modifier = Modifier
                            .background(Color.Black)
                    ) {
                        Text(
                            text = "Row $j, Column $i",
                            color = Color.White,
                            modifier = Modifier.align(Alignment.Center)
                                .padding(12.dp)
                        )
                    }
                }
            }
        }
    }
}

[Andreas Dybdahl]

Add a .clip modifier to the Row and add the shape in there as well

[Nicolai]

Thanks man! @Andreas Dybdahl

[Andreas Dybdahl]

@Nicolai in general the shapes you supply to modifiers other than .clip does not make the composable itself have that shape, so the .background modifier only affects the shape of the background color itself and so on. To modify the shape of the composable itself (to clip contents etc.) you have to add the clip modifier

[Nicolai]

Thanks! That’s valuable to keep in mind 🙂