I have an ElevatedCard
in my app and it looks really good:
and its code is here:
ElevatedCard(
content = {
Text(
fontSize = 20.sp,
text = "All cars",
modifier = Modifier.fillMaxWidth().padding(horizontal = 10.dp, vertical = 12.dp)
)
},
onClick = {
},
modifier = Modifier.padding(horizontal = 8.dp, vertical = 4.dp)
)
However, when I add more composables/views, an icon button and a text, there appear unexpected shadows at the corners while the shadow on sides and up and below almost disappear (I don’t know how to describe it better):
and when it gets expanded:
Here is the code:
var expanded by rememberSaveable { mutableStateOf(false) }
ElevatedCard(
content = {
Row(
content = {
Text(
fontSize = 20.sp,
text = "All cars",
modifier = Modifier.weight(weight = 1f).padding(start = 6.dp)
)
IconButton(
onClick = {
expanded = !expanded
},
checked = expanded,
icon = R.drawable.ic_chevron,
contentDescription = R.string.expand,
tint = MaterialTheme.colorScheme.secondary
)
},
modifier = Modifier.padding(horizontal = 4.dp),
verticalAlignment = Alignment.CenterVertically
)
ScaleVisible(
content = {
Text(
fontSize = 14.sp,
color = Color.DarkGray,
text = "All cars from the latest catalog.",
modifier = Modifier.padding(bottom = 4.dp)
)
},
visible = expanded,
modifier = Modifier.padding(horizontal = 10.dp)
)
},
onClick = {
expanded = !expanded
},
modifier = Modifier.padding(horizontal = 8.dp, vertical = 4.dp).animateContentSize()
)
As you can see there changes something and makes the ElevatedCard
work incorrectly.
I also played a lot with paddings around the card and within its content, but no changes.
What I do wrong?