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

ste

06/11/2021, 11:57 AM
Hi guys! Silly question here 🙋‍♂️ I want to make my lineal icons line thickness customizable. There are two possibilities: 1. Craft the icons "by code" using
Canvas
: compose-like approach, very customizable solution but it will be a pain for complex icons (this is what I'm currently doing) 2. Ship N drawables with different line thickness: not very customizable, increases app size, feels like a waste 3. ???
c

cb

06/11/2021, 12:00 PM
Could you use a variable font instead?
s

ste

06/11/2021, 12:45 PM
Hmm, I don't get how that would help. Let me show an example:
Copy code
@Composable
fun InvertIcon(modifier: Modifier = Modifier) {

    Icon(modifier = modifier.fillMaxSize()) {

        val diagonal = chosenSize * sqrt(2f)

        val circleRadius = diagonal / 4f

        val circle1Center = Offset(
            x = circleRadius + lineSize / 2,
            y = circleRadius + lineSize / 2
        )

        val circle2Center = Offset(
            x = chosenSize - circleRadius - lineSize / 2,
            y = chosenSize - circleRadius - lineSize / 2
        )

        val angle1 = (PI / 3f).toFloat()
        val angle2 = angle1 / 2

        val offset1 = Offset(x = circleRadius * sin(angle1), y = circleRadius * cos(angle1))
        val offset2 = Offset(x = circleRadius * sin(angle2), y = circleRadius * cos(angle2))

        drawCircle(radius = circleRadius, center = circle1Center)

        drawCircle(radius = circleRadius, center = circle2Center)

        drawLine(start = circle1Center + offset1, end = circle2Center - offset2)

        drawLine(start = circle2Center - offset1, end = circle1Center + offset2)
    }
}
This is the code for the following icon (
Icon
is just a wrapper-helper,
chosenSize
is the canvas width or height and
lineSize
is the size (thickness) of the line
As you can see, programmatically drawing an icon is quite difficult - and it will be even harder for more complex icon - but i guess this is the only chance have nice customization (line thickness, line color, etc) in a compose-like way... am i correct?
n

Nader Jawad

06/11/2021, 8:15 PM
With the experimental animated vector graphics APIs we have a system that allows for overriding of values that are named within the internal vector asset. This would allow for a single asset that at runtime can have some of their properties changed. This is not exposed publicly yet. Someone else asked a similar question and their solution was to have their vector image rely on theme parameters and dynamically change the theme local whenever they wanted to change the values
❤️ 2
s

ste

06/12/2021, 9:48 AM
@Nader Jawad Thanks, I'll wait for those APIs then. Theme local parameters won't help unfortunately!
3 Views