https://kotlinlang.org logo
Join Slack
Powered by
Image with fillmaxwidth is not filling the entire ...
# compose
p
Image with fillmaxwidth is not filling the entire with of the parent column, how is it possible?
Copy code
Image(
            bitmap = bitmap,
            null,
            modifier = Modifier.fillMaxWidth(1f).background(Color.Red),
            contentScale = ContentScale.Fit
        )
And I can see that an empty red space is on left and right sides of the image... so the view is filling the entire size but not the image itself. Any idea of what is happening?
z
Height is too small? Docs say 
Fit
will try to fit the whole image in the bounds. Try 
FillWidth
?
p
well, I don't understand what is happening now too
now, after using ContentScale.FillWidth the image fits the entire width, but some of the upper and lower parts of the image are not visible anymore
z
p
it's a normal image, a background of a computer, 16:9
z
That's how 
FillWidth
works – it scales to fill and might crop
p
I read that documentation, and after that I understood that ContentScale.Fit was the correct option
but it gives the original problem posted here
and your proposal doesn't work too because of that crop
so... what is happening?
z
What behavior are you trying to get? It sounds like your available height is too small to fit the full image at the width you want, so you either have to crop it or lose the aspect ratio
p
I'm simply trying to display a image
simply that
that image should fit the 100% of the width of the parent, a column
and I don't wanna loss portions of the upper and the bottom part
it's a normal image, a background of a computer, 16:9
it should use something similar to wrap_content for the height, not to crop the height
z
Are you sure there's enough available space for the height of the image at that size? I don't know anything about your code or the rest of the content on your screen, so all I have to go off of us the fact that 
FillWidth
is cropping, and that makes it sound like there's not enough height.
p
okay now I changed Column to LazyColumn and they started to be painted correctly thank you very much
but now I have a question, why should I use FillWidth?
reading the doc, Fit should be the correct option
`ContentScale.Fit`: Scale the image uniformly, keeping the aspect ratio (default). If content is smaller than the size, the image is scaled up to fit the bounds. `ContentScale.FillWidth`: Scale the source maintaining the aspect ratio so that the bounds match the destination width.
z
So you made it scrollable
p
it seems that using a column was for some reason not allowing content bigger than the screen, it didn't worked like that in view system with linearlayour as I can remember
but using LazyColumn seems to allow more content than the height of the screen
but coming back to my question, why Fillwidth works and Fit not? maybe if I use a image with more height than width I can get problems if using fillWidth
c
Can you post screenshots of the before and after and the source code of your layout. I‘m really curious what you want to achieve. 😅
z
Yes, by default in compose layout the max constraints will always be the available space on the screen.
Using a scroll container (e.g. LazyColumn) will expand the max constraint on the dimension of scrolling to be infinite, since scroll containers by definition allow their content to be as big in that dimension as they want.
But using a scroll container as the solution to this problem means that your image is now scrollable. Maybe that's what you want, idk
If you are going that approach though, LazyColumn is the wrong scrollable for this since none of the content is lazy. It would be better to put 
Modifier.verticalScroll
on the image.
but coming back to my question, why Fillwidth works and Fit not? maybe if I use a image with more height than width I can get problems if using fillWidth
Just from reading the documentation, it's because 
Fit
will not scale the image larger than it can fit in both dimensions. In your case it seems it maxed out the height before it got to the full width. The docs say, "the image is scaled up to fit the bounds." That means "fit the bounds" in both dimensions. 
FillWidth
worked because it doesn't care about height. The docs say "so that the bounds match the destination width" and the example given on the docs page show an image that is too tall for the available space being cropped and centered so that the width matches.
p
oh, now I understand perfectly, maybe the documentation should be improved adding that perfect explanation from you "`Fit` will not scale the image larger than it can fit in both dimensions. In your case it seems it maxed out the height before it got to the full width"
that is much clearer
I don't understand that from the documentation
if you have the possibility to tell someone that improve that documentation with that, please, do it
I'm sure more people will have the same problem than me
thank you very very much
z
you can file a bug to google, they can update the docs. Issue tracker is in channel topic
p
on the other hand, why lazycolumn is not a good option here?
I though that is the best possible option because if I have for example 200 images, is better to use that than a simple column with scroll
isn't it?
this is an app that receives which images should draw on that screen, and in some cases can be one, but in some cases can be 200, 300 etc... so I think LazyColumn will be better than Column
z
if you have over 200, then yea, but if you only have one then it's not necessary
p
supposedly, as I learned on the codelabs, lazycolumn will only load the visible images
z
ok so then yea, lazy column makes sense
p
thank you!
great help here
Open in Slack
PreviousNext
Powered by