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

Nicolai

12/12/2023, 10:51 AM
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 🧵
Copy code
@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)
                        )
                    }
                }
            }
        }
    }
}
a

Andreas Dybdahl

12/12/2023, 11:02 AM
Add a .clip modifier to the Row and add the shape in there as well
🙌 1
n

Nicolai

12/12/2023, 11:32 AM
Thanks man! @Andreas Dybdahl
🙌 1
a

Andreas Dybdahl

12/12/2023, 11:35 AM
@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
🙌 1
n

Nicolai

12/12/2023, 12:36 PM
Thanks! That’s valuable to keep in mind 🙂