I have a Column
something like this
@Composable
fun ScreenView(verticalScroll: ScrollState = rememberScrollState()){
Column(
modifier = Modifier
.padding(16.dp)
.fillMaxSize()
.verticalScroll(verticalScroll),
) {
Column(
modifier = Modifier
.fillMaxSize()
.weight(1f),
verticalArrangement = Arrangement.Top,
horizontalAlignment = Alignment.CenterHorizontally
) {
Image(painter = abc, contentDescription =null )
Text(text = "xyz")
}
Column {
Spacer(modifier = Modifier.height(16.dp))
Row(
modifier = Modifier
.fillMaxWidth()
.wrapContentHeight()
.background(Color.Gray)
.padding(vertical = 10.dp, horizontal = 20.dp),
horizontalArrangement = Arrangement.spacedBy(12.dp)
) {
Image(painter = abc, contentDescription = null)
Text(
text = "warningMessage warningMessage warningMessage warningMessage warningMessage warningMessage warningMessage warningMessage warningMessage warningMessage warningMessage warningMessage warningMessage",
style = SlateTypography.body2
)
}
}
}
}
My bottom view Row
looks like this in bigger device
But when I tried for smaller device my Row
view looks like this
For smaller device you change through adb
Density
adb shell wm density 540
Size
adb shell wm size 1080x2280
So how can I fix this problem?
use Modifier.weight modifier on the Text composable to allow it to take up the remaining space in the Row after the Image has been laid out. This will also make the Text wrap its content to the next line if it doesn't fit in the available space.