Jetpack Compose - Image antialiasing not as smooth as native ImageView when scaled

Viewed 489

I'm refactoring a screen to use jetpack compose. It had an ImageView that sits over the top of the background containing a large 1920x795dp PNG image (mdpi and hdpi buckets) which gets scaled down. After changing to use an Image it now has noticably jaggier edges.

ImageView:

<ImageView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:scaleType="fitXY"
    android:layout_marginBottom="-90dp"
    android:src="@drawable/ic_swoosh"/>

ImageView

ImageView

Image:

Image(
    modifier = Modifier
        .fillMaxWidth()
        .offset(y = 90.dp)
        .align(Alignment.BottomCenter),
    painter = painterResource(R.drawable.ic_swoosh),
    contentDescription = null,
    contentScale = ContentScale.Fit,
)

Compose Image

Compose Image

Drilling into the source of Image, it uses AndroidPaint which supposedly has it enabled:

internal fun makeNativePaint() =
    android.graphics.Paint(android.graphics.Paint.ANTI_ALIAS_FLAG)

If I wrap ImageView in AndroidView the problem is not present. I can also verify that it is positioned and sized exactly the same as the Image version, but it is anti-aliased correctly.

AndroidView(
    modifier = Modifier
        .fillMaxWidth()
        .offset(y = 90.dp)
        .align(Alignment.BottomCenter),
    factory = {
        ImageView(it).apply {
            scaleType = android.widget.ImageView.ScaleType.FIT_XY
            setImageResource(R.drawable.ic_swoosh)
        }
    }
)

If I remove scaling with contentScale = ContentScale.None the image is also smooth, so it does appear to be due to being scaled down. Removing contentScale entirely shows the same problem because the image is automatically scaled down to fit the view.

Edit: If I remove the hdpi variant it also becomes smooth!

0 Answers
Related