How to build an adaptive layout in Jetpack Compose

Question

So I am trying to Follow this documentation to achieve something similar to this documentation, this is where the CardTitle moves and image; but the Title and Description on this documentation do not seem to be available on Cards now? I can not access that when I try to create a Card. Biggest issue Card does not have Description anymore, maybe this needs to be updated or how can I achieve this. I am trying to something similar to the image shown.

Code from the Documentation.

   @Composable
    fun Card(
        imageUrl: String,
        title: String,
        description: String
    ) {
        var showMore by remember { mutableStateOf(false) }
    
        BoxWithConstraints {
            if (maxWidth < 400.dp) {
                Column {
                    Image(imageUrl)
                    Title(title)
                }
            } else {
                Row {
                    Column {
                        Title(title)
                        Description(
                            description = description,
                            showMore = showMore,
                            onShowMoreToggled = { newValue ->
                                showMore = newValue
                            }
                        )
                    }
                    Image(imageUrl)
                }
            }
        }
    }

score 0 · Answer 1 · answered Sep 27 '22 at 06:11

Biggest issue Card does not have Description anymore, maybe this needs to be updated or how can I achieve this. I am trying to something similar to the image shown.

This is not an issue because the sample above is for demonstrating flexible layout based on screen size using BoxWithConstraints. When you build your layouts you don't have follow this exact pattern.

You can do it in many ways including

Column {
   Image(imageUrl)
   Title(title)
   // You can add a description that is one line with ellipsis overflow for instance. Or it's font size can be smaller than title
}

In your example demonstrator preferred to not show when screen size is less than 400.dp.

BoxWithConstraints is suitable for building a selective layouts based on max or min width/height from its Constraints

How to build an adaptive layout in Jetpack Compose

1 Answers1