Use fillType="evenOdd" on Android 21

Attribute android:fillType is only used in API level 24 and higher. For below API level, follow these steps.

1. add this to your Gradle file.

   //Gradle Plugin 2.0+android {  defaultConfig {     ...     vectorDrawables.useSupportLibrary true  }}

2. If you are using ImageView, change its property android:src to app:srcCompat.

3. If you are using as android:drawableStart or android:drawableEnd in TextView, change it to app:drawableStartCompat or app:drawableEndCompat.

Solution 1

Flattern image in Sketch and use this site to convert SVG to xml for Android

Solution 2

I use nonZero instead of evenOdd and open it in Sketch to reverse Order after reverse it will change pathData and remove android:fillType and everything work fine on Android 21+.

Solution 3

PNG

TLDR

After some research I found that there are two fill-rule property methods for Vector graphics, SVGs, the “evenodd” vs “nonzero”

I opened the SVG icon in Sketch and inspected the hole at the top of the icon. As expected it uses fill-rule:evenodd property. Now I have to change the fill-rule to use “nonzero” property. How? Select the path. In the right side, there is a settings icon at the “Fills” property. Click it and choose “non-zero”.

From the main menu, choose Layer → Paths → Reverse Order. I got the hole back at the top of the icon and got the hole in the app, too.

For more detail

SVGs with filltype="evenOdd" seems to work and display properly now with Android gradle plugin 3.2. You may also need to use Support Library 28 or AndroidX 1.0.

Make sure it's at least this version in your top level build.gradle:

classpath 'com.android.tools.build:gradle:3.2.0'