CODEWITHSUNDEEP
android
Jakub Anioła
Jakub Anioła

Reputation: 330

Change color of one path in VectorDrawable programmatically

Is there any possibility to change programmatically one path in whole SVG/VectorDrawable object?

I saw some solutions for small VectorDrawables which includes adding new xml files (VectorDrawables) with other colour on paths.

I want to avoid that because I am using big VectorDrawable with 30 paths (image of skeleton with bones) and I want to change colour of exact path (bone) which is chosen on click (so of course, I don't want to add 30 different xml files to drawable).

Is there any solution/library which can help me with in that case?

Example photos:

https://i.sstatic.net/Qj9CL.png

https://i.sstatic.net/YaHZU.png

Upvotes: 5

Views: 2974

Answers (1)

JorgeMuci
JorgeMuci

Reputation: 697

I know this question is old but maybe someone finds the answer useful. Yes, you can dynamically achieve coloring specific paths for vectorDrawables. But it's no that straight forward. You will have to use theme attributes in your vectorDrawables paths like this: 

<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24"
android:viewportHeight="24">
<path
    android:fillColor="?attr/colorIconPrimaryAlpha"
    android:pathData="M13.17,6l-0.59,-0.59L11.17,4L6,4v12h16L22,6h-8.83zM17.5,10.5L21,15L7,15l4.5,-6 3.5,4.51 2.5,-3.01z" />
<path
    android:fillColor="?attr/colorPrimary"
    android:pathData="M2,6L0,6v5h0.01L0,20c0,1.1 0.9,2 2,2h18v-2L2,20L2,6zM7,15h14l-3.5,-4.5 -2.5,3.01L11.5,9zM22,4h-8l-2,-2L6,2c-1.1,0 -1.99,0.9 -1.99,2L4,16c0,1.1 0.9,2 2,2h16c1.1,0 2,-0.9 2,-2L24,6c0,-1.1 -0.9,-2 -2,-2zM22,16L6,16L6,4h5.17l1.41,1.41 0.59,0.59L22,6v10z" />

Notice how we color the paths: 

android:fillColor="?attr/colorPrimary"

Once you have that in place you can define your own app themes and apply them only to a single vectorDrable. In your case you can define as many themes as parts of your skeleton you want to paint individually. Say you have this theme define in your styles.xml file: 

    <style name="IconHighlightedTheme" parent="MyAppTheme">
    <item name="colorPrimary">@color/green</item>
    <item name="colorIconPrimaryAlpha">@color/green_transparent</item>
</style>

Then from your code you can apply themes to your vectorDrawable easily: 

private fun changeSingleIconTheme(imageView: ImageView, @DrawableRes drawableId: Int) {
    val wrapper = ContextThemeWrapper(this, R.style.IconHighlightedTheme)
    val drawable = ResourcesCompat.getDrawable(resources, drawableId, wrapper.theme)
    imageView.setImageDrawable(drawable)

}

And that would be it. Now you can dynamically color each path seamlessly. Just define a new theme for each combination of colors.

If you want to see the full sample code I have an opensource github repo: https://github.com/JorgeMucientes/assetsPlayground

And also a medium post were I explain it more in depth: https://medium.com/makingtuenti/managing-your-android-app-iconography-a2f4aa9cb49d

Hope it helps someone! ;)

Upvotes: 4

Related Questions