Thread
#compose
    Csaba Szugyiczki

    Csaba Szugyiczki

    1 year ago
    [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

    Arthur Gonzaga

    1 year ago
    Have you tried to use a svg file?
    Csaba Szugyiczki

    Csaba Szugyiczki

    1 year ago
    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

    Arthur Gonzaga

    1 year ago
    Huh 🤔 that's weird
    Albert Chang

    Albert Chang

    1 year ago
    I would file a bug.
    Peter Mandeljc

    Peter Mandeljc

    1 year ago
    what if you try using Image instead of Icon maybe?
    Csaba Szugyiczki

    Csaba Szugyiczki

    1 year ago
    It makes no difference unfortunately 😕
    t

    Tonic

    1 year ago
    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

    Andrey Kulikov

    1 year ago
    cc @Nader Jawad
    Doris Liu

    Doris Liu

    1 year ago
    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

    Nader Jawad

    1 year ago
    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.
    @Csaba Szugyiczki can you share the original vector asset so we can verify?
    Csaba Szugyiczki

    Csaba Szugyiczki

    1 year ago
    @Nader Jawad Sure thing! Here is the VectorDrawable I am using
    Csaba Szugyiczki

    Csaba Szugyiczki

    1 year ago
    @Nader Jawad Any updates? When can we expect the fix you mentioned?
    Albert Chang

    Albert Chang

    1 year ago
    I think the fix Nader mentioned is in 1.1.0-alpha01.
    Nader Jawad

    Nader Jawad

    1 year ago
    @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?
    Csaba Szugyiczki

    Csaba Szugyiczki

    1 year ago
    @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?
    Nader Jawad

    Nader Jawad

    1 year ago
    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

    Csaba Szugyiczki

    1 year ago
    @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

    Nader Jawad

    1 year ago
    Yes I was suggesting to scale up the original asset but rendering it with the same size
    Csaba Szugyiczki

    Csaba Szugyiczki

    1 year ago
    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