Can not set height of Card composable

Question

I am not able to set height of card composable. However if I place Card() inside a Column then I am able to do it. Why is that?

@Composable
fun HeroListItem(
    hero: Hero,
//  modifier: Modifier = Modifier
) {
        Card(
            modifier = Modifier
                .height(200.dp),
            border = BorderStroke(
                3.dp, MaterialTheme.colorScheme.error
            ),
            elevation = CardDefaults.cardElevation(
                defaultElevation = 2.dp
            )
        ) {
        ) {
            Row(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(16.dp)
                    .background(color = MaterialTheme.colorScheme.primaryContainer),
                verticalAlignment = Alignment.CenterVertically
            ) {
                Column(
                    modifier = Modifier
                        .weight(0.8f)
                        .padding(8.dp)
                ) {
                    Text(
                        text = stringResource(id = R.string.hero2),
                        style = MaterialTheme.typography.displaySmall
                    )
                    Text(
                        text = stringResource(id = R.string.description2),
                        style = MaterialTheme.typography.bodyLarge
                    )
                }
                Spacer(Modifier.width(16.dp)) // Add spacing between the columns
                Column(modifier = Modifier.weight(0.2f)) { // Adjust the weight to desired value
                    Image(
                        painter = painterResource(id = R.drawable.android_superhero2),
                        contentDescription = null,
                        alignment = Alignment.BottomEnd,
                        contentScale = ContentScale.FillWidth,
                        modifier = Modifier
                            .size(72.dp)
                            .clip(RoundedCornerShape(8.dp))
                    )
                }
            }
        }

I have checked that no external modifier is doing anything to Card tried commenting all others inside also still card height is like full screen.

You can see red border around the card screenshot off app

I tried almost everything that I have idea about searched everywhere. Actually I got desired results by using wrapping with Column and using requiredHeight modifier but want to understand why is it working this way.

If parent Composable of Card is a Surface with Modiifer.fillmaxSize it forces its Constraints or dimensions to direct Composables. You can refer this answer for more details. https://stackoverflow.com/a/73030914/5457853 — Thracian, May 28 '23 at 03:48

Vinay · Answer 1 · 2023-05-27T09:24:39.147

Your code looks correct. You have done a mistake on setting height of card modifier = Modifier.height(200.dp) replace it with modifier = Modifier.height(200.dp).requiredHeight(200.dp) The requiredHeight modifier tells the Card to maintain a fixed height of 200.dp, overriding the default behavior.

replace your modifier with below

Card(
        modifier = Modifier
            .height(200.dp)
            .requiredHeight(200.dp),
        border = BorderStroke(
            3.dp, MaterialTheme.colorScheme.error
        ),
        elevation = CardDefaults.cardElevation(
            defaultElevation = 2.dp
        )
    ) {
       //other code are same
    }

If you want to make the height of the Card dynamic and based on its content, you can use the Modifier.wrapContentHeight() modifier. This will make the Card adjust its height to fit the content it contains.

modifier = Modifier
            .height(IntrinsicSize.Min)
            .wrapContentHeight()

Can not set height of Card composable

1 Answers1