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)

user_8894262 · Answer

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)

user_13164665 · Answer

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

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

Draw pixel art in Jetpack Compose

2 Answers