Search code examples
androidsvgvectortrimprogress

Modifying shape of vector asset at runtime (like cut some part from top) to display user progress in Android. Is that possible?

I'd like to display player progress by using vector asset in Android. I'd like to use only one vector asset file because 'progress percentage' may vary. For example it can be very different, like 8%, 51%, etc.

When I had plain colored background I used additional rectangular layer same color as background to hide part of SVG accordingly to progress, but now I can't - started using nice images as a background.

Please see pictures below to understand what I try to achieve:

20% progress - SVG cut by 80%

40% progress - SVG cut by 60%

10% progress - original .SVG

A were reading this https://medium.com/androiddevelopers/understanding-androids-vector-image-format-vectordrawable-ab09e41d5c68 , searched on Google , on stackOverflow - but still no answer.

Guys, do you have any ideas? Thanks in advance..

Solution 
  • /** @IntRange(from=0,to=10000)
 *  0 means hidden 10000 means totally visible*/
fun clipDrawable(level: Int) {
    if (drawable is ClipDrawable){
        drawable.level = level
    } else {
        val clippedDrawable = ClipDrawable(drawable, Gravity.TOP, HORIZONTAL)
        setImageDrawable(clippedDrawable)
        (drawable as? ClipDrawable)?.level = level
    }
}

    you can create your custom image view and add this method there, or modify it a bit and add it inside of your fragment/activity