Change only one image color to another

Issue

I have an xml vector like this one:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="16dp"
        android:height="16dp"
        android:viewportWidth="16.0"
        android:viewportHeight="16.0">
    <path
        android:fillColor="#FFFFFF"
        android:pathData="M8,14c-3.3,0 -6,-2.7 -6,-6s2.7,-6 6,-6s6,2.7 6,6S11.3,14 8,14z"/>
    <path
        android:fillColor="#000000"
        android:pathData="M8,4c2.2,0 4,1.8 4,4s-1.8,4 -4,4s-4,-1.8 -4,-4S5.8,4 8,4M8,0C3.6,0 0,3.6 0,8c0,4.4 3.6,8 8,8c4.4,0 8,-3.6 8,-8C16,3.6 12.4,0 8,0L8,0z"/>
</vector>

which renders to this:

Note that the inner part is white, and the outside is transparent ( we just can't notice on stackoverflow because the page background is white ).

I want to only change the color of the black part to some other color (ex. BLUE ), while retaining the white and tranparent part as is.

I tried using:

imageView.setColorFilter(newColor, PorterDuff.Mode.SRC_ATOP);

but this makes the black and white parts blue.

Is there a way in android to change only the black part ?

Solution

For anyone having a similar problem, this is the workaround I ended up using:

I removed the white part of the vector ( so I had a black ring ), and I set it as the image resource.
Then I made a white circle shape, and set it as the background of the ImageView.

Now when I set the color filter, it only changed the color of the foreground - the ring.

Answered By - Rick Sanchez