Draw pixel art in Jetpack Compose

Question

I need to disable filtering in Image to display pixel art properly. How can I do it?

I used to do it like in this answer:

val DRAW_FILTER = PaintFlagsDrawFilter(Paint.FILTER_BITMAP_FLAG, 0)

@SuppressLint("RestrictedApi")
class AliasingDrawableWrapper(wrapped: Drawable) : DrawableWrapper(wrapped) {
    override fun draw(canvas: Canvas) {
        val oldDrawFilter = canvas.drawFilter
        canvas.drawFilter = DRAW_FILTER
        super.draw(canvas)
        canvas.drawFilter = oldDrawFilter
    }
}

and

imageView.setImageDrawable(AliasingDrawableWrapper(drawable)

I didn't even know we have this option with ImageView, can you post some code on how you used to do that, to give us a point to start? — Vitor Ramos, Sep 17 '20 at 22:44
Can you post an image to be shown? What sort of scale are you performing in the image? I'm searching in Compose's source code and wanted a test image to try some things — Vitor Ramos, Nov 04 '20 at 13:12
@VitorRamos any pixel art image. For example: [tea_leaves.webp](https://ithersta.github.io/tea_leaves.webp). I'm scaling it to fixed size like 16dp by 16dp and don't want it to appear blurry — ithersta, Nov 04 '20 at 20:12

score 4 · Answer 1 · answered Nov 05 '20 at 00:35

At least fort now, you can't. Jetpack Compose uses a shared Paint created with the anti alias flag on.

I opened an issue asking for the possibility to set our own flags: https://issuetracker.google.com/issues/172473708

Here's the Compose's declaration in AndroidPaint.kt:

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

score 2 · Accepted Answer · answered Aug 06 '21 at 13:30

2

Since Compose 1.1.0-alpha01 Image takes an optional FilterQuality parameter. Use FilterQuality.None for pixel art:

Image(
    ...,
    filterQuality = FilterQuality.None
)

answered Aug 06 '21 at 13:30

ithersta

158
2
13

Draw pixel art in Jetpack Compose

2 Answers2