How to add an icon to canvas in Jetpack Compose?

Question

I am trying to add and icon from resource in Canvas DrawScope. The nearest solution I found is drawImage(), but it doesn't work for my case. Also I cannot use the normal Icon() composable inside the DrawScope. So is there any work around to display an icon inside canvas, similarly to the way we do it with composable:

import androidx.compose.material.Icon

Icon(Icons.Rounded.Menu, contentDescription = "Localized description")

score 0 · Answer 1 · answered Sep 15 '22 at 07:28

0

Icons.Rounded.Menu is a VectorImage and you can wrap it into a VectorPainter. You can use something like:

val painter = rememberVectorPainter(Icons.Rounded.Menu)
Canvas(modifier = Modifier.fillMaxSize()) {
    with(painter) {
        draw(painter.intrinsicSize)
    }
}

answered Sep 15 '22 at 07:28

Gabriele Mariotti

320,139
94
887
841

Thanks, I've tried this way, but is it possible to many any modifications to the icon(like change color, size etc. ) – Vasil Test Sep 16 '22 at 04:34
1

the draw method has the size, alpha and colorFilter parameters – Gabriele Mariotti Sep 16 '22 at 06:04

score 0 · Answer 2 · answered Oct 25 '22 at 10:48

Drawscope extension for abstract class Painter has size, alpha and colorFilter params. You can change these params. If you wish to change draw position of Icon, it' drawn top left (0,0) by default you can use translate function or other functions such as rotate or scale for further operations

val painter = rememberVectorPainter(Icons.Rounded.Menu)
Canvas(modifier = Modifier.fillMaxSize()) {
    translate(left = 0f, top = 0f) {
        with(painter) {
         //   draw(size = painter.intrinsicSize)
            draw(
                size = Size(40.dp.toPx(), 40.dp.toPx()),
                alpha = 1f,
                colorFilter = ColorFilter.tint(Color.Red)
            )
        }
    }
}

How to add an icon to canvas in Jetpack Compose?

2 Answers2