Resolved: How to make image fit in scrollable column?

Question:

What I want: I want every image to fit as much as it can in the scrollable column. so the image fit the maximum width it can and the height respectively. I can’t figure out how to do this in compose.
What I tried: I only succeed to do this by using a fixed size for the image but this isn’t really a solution.

Column(modifier = Modifier.fillMaxSize().background(Color.Blue)) {
    Text(text = "text")

    Column(modifier = Modifier
        .verticalScroll(rememberScrollState())
        .fillMaxSize()
        .background(Color.Red)) {

        Image(painter = painterResource(id = R.drawable.1),
            contentDescription = null,
            modifier = Modifier.size(640.dp)
        )

        Button(onClick = { /*TODO*/ }) {}
        Button(onClick = { /*TODO*/ }) {}
        Button(onClick = { /*TODO*/ }) {}
        Button(onClick = { /*TODO*/ }) {}
    }

    Button(onClick = { /*TODO*/ }) {}
}

Answer:

If you want the Image composable to fill the maximum width available you have to use Modifier.fillMaxWidth(). That is the same with any Composable.
And then if you also want the image content to be scaled in such a way that it fills the maximum width first and then proportionally fills the height as well, you have to pass the ContentScale.FillWidth value for the contentScale parameter.
Both together in your code

Image(painter = painterResource(id = R.drawable.1),
    contentDescription = null,
    contentScale = ContentScale.FillWidth,
    modifier = Modifier.fillMaxWidth(),
)

Another detail that I noticed, if you want the Button below the Column to actually stay on the screen (and not get pushed out by the Column) you have to add the .weight(1f, fill = true) modifier to the Column.

Column(modifier = Modifier
    .verticalScroll(rememberScrollState())
    .fillMaxSize()
    .weight(1f, fill = true)
    .background(Color.Red))

If you have better answer, please add a comment about this, thank you!

Resolved: How to make image fit in scrollable column?

Resolved: The ‘Access-Control-Allow-Origin’ header contains multiple values ‘, ’, but only one is allowed. cors error not resolving

Resolved: SQLSTATE[42S02]: Base table or view not found: 1146 Table ‘crm.email’ doesn’t exist (Connection: mysql, SQL: select count(*) as aggregate from `email`

Resolved: Regex: Curly braces in reverse? Match X characters before a string?

Leave A Reply