[Poor image quality on rotated Icon] I have a compass icon that I want to rotate so that it is always pointing to north. When the rotation is 0 everything is nice, my icon is displayed sharp. But when the rotation value is different, the icon becomes heavily pixelated. The icon is a vector image loaded with

painterResource

Is it possible to apply antialiasing or something similar to improve image quality?

Icon(
    painterResource(R.drawable.ic_map_compass),
    contentDescription = stringResource(R.string.map_compass_button_content_desription),
    tint = Color.Unspecified,
    modifier = Modifier.rotate(
        -bearing
    )
)

Have you tried to use a svg file?

ic_map_compass is a vector drawable, which is created from an svg file. I was using the built in "Asset Studio" in Android Studio

Huh 🤔 that's weird

I would file a bug.

what if you try using Image instead of Icon maybe?

It makes no difference unfortunately 😕

I'd say the rotation is being done after rasterisation. Look into applying before that step. Maybe look at drawing the vector drawable into a canvas with a transform, and use that for your icon.

cc @Nader Jawad

This seems to me like a post-rasterization rotation as well. In the upcoming release, we have added a new experimental API that will help with this issue. The new API allows vector property values (i.e. rotation, alpha, translation, trimPathStart/End/Offset, etc) defined in a static VD resource to be overwritten at runtime: https://android-review.googlesource.com/c/platform/frameworks/support/+/1753821/10/compose/u[…]/androidx/compose/ui/graphics/vector/VectorPainter.kt

Hmm in this case the Icon is being rotated by the internal graphicsLayer used with

Modifier.rotate

So this is not specific to VectorGraphics. Because all vector graphics are rendered into an intermediate bitmap, this should be already addressed in an upcoming compose release by another fix to use bilinear filtering when drawing bitmaps which should affect how they appear when scaled or rotated. I would imagine the same issue would occur when drawing a regular rasterized asset instead of a vector based asset.

@Nader Jawad Sure thing! Here is the VectorDrawable I am using

@Nader Jawad Any updates? When can we expect the fix you mentioned?

I think the fix Nader mentioned is in 1.1.0-alpha01.

@Csaba Szugyiczki just saw that you had attached the asset. It looks like it is dependent on the API level. I was testing on a few different emulators and they seemed to render fine both with and without the filter bitmap flag enabled. However, when testing on an Android L device I notice some aliasing even with the filter bitmap flag enabled. I was adjusting values on the underlying asset you attached and it is much less noticeable after changing the default width/height values to something larger than 24dp. Other vector assets I have tried do not have this issue but we're still investigating.

@Nader Jawad I had this result on a Xiaomi Mi A1 with Android 9

Still investigating. I think it might have something to do with the flags used internally for View backed graphicsLayers vs regular RenderNodes. @Csaba Szugyiczki I did notice if I changed the size of the vector image it rendered much clearer even after a transformation. It might also do with rounding errors as a smaller viewport is scaled up. Scaling up the size of the vector graphic might give you better results in the near term.

@Nader Jawad This is an indicator over a map. We have limited screen-space, so scaling it up is not really a solution for us. Or do you mean scaling up just the vector itself, and rendering it on the same size? It would be really surprising if it worked…

Yes I was suggesting to scale up the original asset but rendering it with the same size

wow… okay, I will give it a go