[Poor image quality on rotated Icon] I have a comp...

# compose

[Csaba Szugyiczki]

[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
    )
)

[Arthur Gonzaga]

Have you tried to use a svg file?

[Csaba Szugyiczki]

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

[Arthur Gonzaga]

Huh 🤔 that's weird

[Albert Chang]

I would file a bug.

[Peter Mandeljc]

what if you try using Image instead of Icon maybe?

[Csaba Szugyiczki]

It makes no difference unfortunately 😕

[Tonic]

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.

[Andrey Kulikov]

cc @Nader Jawad

[Doris Liu]

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

[Nader Jawad]

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]

@Csaba Szugyiczki can you share the original vector asset so we can verify?

[Csaba Szugyiczki]

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

ic_map_compass.xml

[Csaba Szugyiczki]

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

[Albert Chang]

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

[Nader Jawad]

@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]

On which API level were you testing on @Csaba Szugyiczki?

[Csaba Szugyiczki]

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

[Csaba Szugyiczki]

@Nader Jawad Did it help in finding the root cause of the issue?

[Nader Jawad]

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.

[Csaba Szugyiczki]

@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…

[Nader Jawad]

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

[Csaba Szugyiczki]

wow… okay, I will give it a go

[Csaba Szugyiczki]

I got this result by scaling the vector up to 48 dp, and displaying it in 24 dp. Topmost image is from the original 24x24 vector. Below 48x48 resized with .size(24.dp), The bottom one is the same 48x48 vector resized with .sizeIn(maxWidth = 24.dp, maxHeight = 24.dp)
It did not improve much