Android - How to change the colour of a drawable's path?

Question

I have a vector like this

<vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="16dp"
    android:height="16dp"
    android:viewportWidth="16"
    android:viewportHeight="16">
    <path
        android:pathData="M8,8m-8,0a8,8 0,1 1,16 0a8,8 0,1 1,-16 0"
        android:fillColor="#1c1c1c" />
    <path
        android:pathData="m6.7,12 l-3.7,-3.3 1.3,-1.5 2.3,2 4.9,-5.3 1.5,1.3z"
        android:fillColor="#fff" />
</vector>

which by default looks like this:

and I want to change the colour of the circle programatically (basically the fillColor of the first path) and keeping the tick white.

I was trying to change the tint of the drawable (by using marker.setTint(tintColor) and marker.setTintMode(PorterDuff.Mode.XOR) or any other variation of tintMode) but no matter what I chose or what tintMode combination I tried I was not able to change the colour of the circle.

Either the colour of the tick was changed, or the correct colour was applied but then the shape of the vector (basically the square) was also shown.

Atick Faisal · Answer 1 · 2023-06-21T11:28:00.357

0

You can create two different versions of the drawable by changing the fillColor attribute of the first path and use either one of them based on your condition.

For example, create a check_primary.xml with:

    android:fillColor="@color/primary"

and check_error.xml with:

    android:fillColor="@color/error"

Then use them in the code as necessary:

if (some_condition)
    setDrawable(check_primary)
else
    setDrawable(check_error)

edited Jun 21 '23 at 11:28

answered Jun 21 '23 at 11:15

Atick Faisal

1,086
1
6
13

That's a good idea but I got told that i supposed to change a vector's colour instead of adding new XML files to the project. So I wonder is it possible or it is just a waste of time? – No_Name Jun 21 '23 at 11:30
If you only want to switch between two colors, it makes sense to create another drawable. However, if you want more control, check out this: https://stackoverflow.com/questions/33126904/change-fillcolor-of-a-vector-in-android-programmatically – Atick Faisal Jun 21 '23 at 11:35

score 0 · Answer 2 · answered Jun 21 '23 at 11:42

0

here you can change using android:fillColor:-
<vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="16dp"
    android:height="16dp"
    android:viewportWidth="16"
    android:viewportHeight="16">
    <path
        android:pathData="M8,8m-8,0a8,8 0,1 1,16 0a8,8 0,1 1,-16 0"
        android:fillColor="#FF0000" /> <!-- Change the fill color here -->
    <path
        android:pathData="m6.7,12 l-3.7,-3.3 1.3,-1.5 2.3,2 4.9,-5.3 1.5,1.3z"
        android:fillColor="#00FF00" /> <!-- Change the fill color here -->
</vector>

answered Jun 21 '23 at 11:42

Tofik Patel

1

I want to change it progrematically – No_Name Jun 21 '23 at 11:43
Drawable drawable = ContextCompat.getDrawable(context, R.drawable.your_vector_drawable); drawable = DrawableCompat.wrap(drawable).mutate(); // Wrap the drawable to support tinting on older Android versions DrawableCompat.setTint(drawable, Color.RED); // Set the desired color // Apply the modified drawable to an ImageView or any other view imageView.setImageDrawable(drawable); – Tofik Patel Jun 21 '23 at 11:46
First, we retrieve the drawable using ContextCompat.getDrawable(). Then, we wrap the drawable using DrawableCompat.wrap() to support tinting on older Android versions. Next, we mutate the drawable to create a new instance that can be modified independently. – Tofik Patel Jun 21 '23 at 11:46
Finally, we set the desired color using DrawableCompat.setTint(). In this example, we set the color to red (Color.RED), but you can replace it with any color value you prefer. – Tofik Patel Jun 21 '23 at 11:47
The problem with this is my tick disappears – No_Name Jun 21 '23 at 11:55
can you provide code of Class file ? – Tofik Patel Jun 22 '23 at 08:42

Android - How to change the colour of a drawable's path?

2 Answers2