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

Csaba Szugyiczki

07/30/2021, 11:12 AM
[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?
Copy code
Icon(
    painterResource(R.drawable.ic_map_compass),
    contentDescription = stringResource(R.string.map_compass_button_content_desription),
    tint = Color.Unspecified,
    modifier = Modifier.rotate(
        -bearing
    )
)
👀 14
a

Arthur Gonzaga

07/30/2021, 11:26 AM
Have you tried to use a svg file?
c

Csaba Szugyiczki

07/30/2021, 11:42 AM
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
a

Arthur Gonzaga

07/30/2021, 11:45 AM
Huh 🤔 that's weird
a

Albert Chang

07/30/2021, 1:38 PM
I would file a bug.
p

Peter Mandeljc

07/30/2021, 1:39 PM
what if you try using Image instead of Icon maybe?
c

Csaba Szugyiczki

07/30/2021, 2:10 PM
It makes no difference unfortunately 😕
t

Tonic

07/30/2021, 2:20 PM
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.
😬 1
a

Andrey Kulikov

07/30/2021, 2:40 PM
cc @Nader Jawad
d

Doris Liu

07/30/2021, 6:33 PM
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
👍 3
n

Nader Jawad

07/30/2021, 6:50 PM
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.
🙏🏼 1
🙏 2
@Csaba Szugyiczki can you share the original vector asset so we can verify?
c

Csaba Szugyiczki

08/02/2021, 6:35 AM
@Nader Jawad Sure thing! Here is the VectorDrawable I am using
c

Csaba Szugyiczki

08/05/2021, 12:01 PM
@Nader Jawad Any updates? When can we expect the fix you mentioned?
a

Albert Chang

08/05/2021, 1:21 PM
I think the fix Nader mentioned is in 1.1.0-alpha01.
n

Nader Jawad

08/05/2021, 11:30 PM
@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.
On which API level were you testing on @Csaba Szugyiczki?
c

Csaba Szugyiczki

08/06/2021, 6:50 AM
@Nader Jawad I had this result on a Xiaomi Mi A1 with Android 9
@Nader Jawad Did it help in finding the root cause of the issue?
n

Nader Jawad

08/10/2021, 6:04 PM
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.
c

Csaba Szugyiczki

08/11/2021, 6:43 AM
@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…
n

Nader Jawad

08/11/2021, 6:34 PM
Yes I was suggesting to scale up the original asset but rendering it with the same size
c

Csaba Szugyiczki

08/12/2021, 7:06 AM
wow… okay, I will give it a go
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
4 Views