Thread
#compose
    s

    ste

    1 year ago
    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. ???
    cb

    cb

    1 year ago
    Could you use a variable font instead?
    s

    ste

    1 year ago
    Hmm, I don't get how that would help. Let me show an example:
    @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?
    Nader Jawad

    Nader Jawad

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

    ste

    1 year ago
    @Nader Jawad Thanks, I'll wait for those APIs then. Theme local parameters won't help unfortunately!