VectorDrawable image show not correct in the android.support.v7.preference.Preference

Question

Android studio 3.6

Here VectorDrawable ( res/drawable/ic_phone_bw.xml )

<vector android:height="24dp" android:viewportHeight="294.8"
    android:viewportWidth="294.8" android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
    <path android:fillColor="#FFFFFF" android:pathData="M147.4,147.4m-141.73,0a141.73,141.73 0,1 1,283.46 0a141.73,141.73 0,1 1,-283.46 0"/>
    <path android:fillColor="#FF000000" android:pathData="M147.4,147.4m-131.99,0a131.99,131.99 0,1 1,263.98 0a131.99,131.99 0,1 1,-263.98 0"/>
    <path android:fillColor="#FFFFFF" android:pathData="M200.62,248.9H94.19c-1.39,0 -2.52,-1.13 -2.52,-2.52V49.48c0,-1.39 1.13,-2.52 2.52,-2.52h106.43c1.39,0 2.52,1.13 2.52,2.52v196.9C203.13,247.77 202.01,248.9 200.62,248.9z"/>
    <path android:fillColor="#FF000000" android:pathData="M102.7,75.7h89.39v149.58h-89.39z"/>
</vector>

I want to use it in Preference like this:

But here result:

Why icon show not correct (black dot)?

Answer 1

For reference, here is a SVG equivalent of your VectorDrawable.

 <svg width="240px" height="240px" viewBox="0 0 294.8 294.8"> <path fill="#FFFFFF" d="M147.4,147.4m-141.73,0a141.73,141.73 0,1 1,283.46 0a141.73,141.73 0,1 1,-283.46 0"/> <path fill="#000000" d="M147.4,147.4m-131.99,0a131.99,131.99 0,1 1,263.98 0a131.99,131.99 0,1 1,-263.98 0"/> <path fill="#FFFFFF" d="M200.62,248.9H94.19c-1.39,0 -2.52,-1.13 -2.52,-2.52V49.48c0,-1.39 1.13,-2.52 2.52,-2.52h106.43c1.39,0 2.52,1.13 2.52,2.52v196.9C203.13,247.77 202.01,248.9 200.62,248.9z"/> <path fill="#000000" d="M102.7,75.7h89.39v149.58h-89.39z"/> </svg>

Note that there are two black and two white paths in this icon.

---

There could be several things happening here:

1. There is something in the white third path that Android doesn't like (doesn't parse correctly), causing that path to not be drawn properly. This is unlikely.

2. I notice that the icons in your screenshots have a tint to them. They are grey rather than black. My guess is that you are tinting or setting the colour of the icon in a way that is setting all the paths to grey - including the white ones.

Assuming #2 is correct, thereare a couple of solutions:

1. Change the way you are recolouring the icons
2. Redraw this icon so that it consists of just one or two black paths. The parts that are white now, should instead just be holes in the black parts. Then you colour the icon, there will no longer be any white parts that get recoloured.