https://kotlinlang.org logo
#compose
Title
# compose
a

Akram

04/03/2020, 5:41 PM
Hello, I'm just starting with Jetpack compose and I'm having a problem with image scaling
Copy code
@Composable
fun TravelPlaceCard(place:Place ,  modifier: Modifier = Modifier.None){
    Column (modifier = modifier.preferredWidthIn(maxWidth = 150.dp)){
        val imageModifier = Modifier.preferredHeight(180.dp).preferredWidth(150.dp).clip(RoundedCornerShape(4.dp))
        Image(asset = place.image , modifier = imageModifier , scaleFit = ScaleFit.FillWidth)
        Spacer(modifier = Modifier.preferredHeight(3.dp))
        val emphasisLevels = EmphasisAmbient.current
        ProvideEmphasis(emphasis = emphasisLevels.high) {
            Text(text = place.name , style = MaterialTheme.typography.subtitle1 , modifier = Modifier.fillMaxWidth(), maxLines = 2 )
        }
        ProvideEmphasis(emphasis = emphasisLevels.medium) {
            Text(text = place.location , style = MaterialTheme.typography.subtitle2 )
        }
        
    }
}
here is the result
s

Siyamed

04/03/2020, 5:42 PM
it looks like the mid image filled the width?
it is the mid image that has the problem, is it correct?
a

Akram

04/03/2020, 5:45 PM
yeah i have tried the
Copy code
ScaleFit.FillHeight
but the other images will have a bad width
l

Leland Richardson [G]

04/03/2020, 6:52 PM
cc @Nader Jawad
👌 1
s

Siyamed

04/03/2020, 6:54 PM
looking at the ratios of the images they dont look like fill height or fill width
i didnt use it before but it sounds like FillMinDimension
n

Nader Jawad

04/03/2020, 6:55 PM
Yes we fixed this issue with ScaleFit.FillMaxDimension in a newer release
It should go out with the next drop
🎉 2
s

Siyamed

04/03/2020, 6:55 PM
oohh 🙂 didnt know FillMin/MaxDimension is new
n

Nader Jawad

04/03/2020, 6:56 PM
Actually it's technically not new, just fixed in a new release :-)
As a workaround you can create your own ScaleFit instance and take the maximum of the result between ScaleFit.FillWidth and ScaleFit.FillHeight
❤️ 1
Copy code
val Crop = object: ScaleFit {
    override fun scale(srcSize: PxSize, dstSize: PxSize): Float {
        return max(
            ScaleFit.FillWidth.scale(srcSize, dstSize)
            ScaleFit.FillHeight.scale(srcSize, dstSize),
        )
    }
}
a

Akram

04/03/2020, 7:31 PM
Thank you @Nader Jawad that worked for me
n

Nader Jawad

04/03/2020, 7:32 PM
Excellent, glad to hear it. You hopefully shouldn't need that work around in a future release
❤️ 1
2 Views