Use fillType="evenOdd" on Android 21

Question

I have an SVG image that I want to include in an Android project.

The minSdk version for the project is 9. Android Studio is generating PNG files for the SVG.

However, for API 21+, Android studio includes the SVG in a drawable-anydpi-v21 resource folder.

That means that any device running API 21 and up will use the SVG instead of the PNGs.

And that is the problem: my SVG requires android:fillType="evenOdd".

The PNG are properly generated, but for the SVG, because that attribute is API 24+, it is ignored on API 21 devices, and the image appears filled instead of being a wireframe-like image.

Is there anyway to convince Android studio to only include the PNG and drop the SVG completely?

Is there an other solution for this?

Solution 1

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 2

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

Solution 3

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'

Solution 4

you can convert your svg to xml files, that will solve your problem, Here is the link for converting svg to xml files svgToXML

View more solutions