VectorDrawable: Invalid drawable tag gradient

Praveen Singh picture Praveen Singh · Dec 17, 2017 · Viewed 12k times · Source

I have been using the Android Asset Studio to generate vector drawables from SVG files exported from Zeplin for a while and except a few times, it works fine. But today I got this exception when I was trying to use a generated vector drawable.

android.view.InflateException: Binary XML file line #0: Error inflating class <unknown>

And in the same stacktrace:

Caused by: org.xmlpull.v1.XmlPullParserException: Binary XML file line #0: invalid drawable tag gradient

I do not know a lot about Vector drawables and SVGs in Android. Are gradients not supported in Vector drawables? Is there any fix for this issue or do I need to use PNGs?

I am using Support Library version:

com.android.support:support-v4:26.1.0

I am using

Android Studio 3.0

Here is the VectorDrawable file generated by Android Asset Studio:

<vector 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:aapt="http://schemas.android.com/aapt"
    android:width="360dp"
    android:height="110dp"
    android:viewportWidth="360.0"
    android:viewportHeight="110.0">
    <path
        android:pathData="M82,46H0v64h360V46h-81.88v-0.3h-26.21c-14.25,0 -38.69,-6.2 -46.95,-25.93C200.99,10.25 193.27,0.52 180,0.47c-13.27,-0.05 -20.04,9.24 -24.75,19.3 -8.22,17.55 -24.66,26.19 -49.34,25.93H82V46z"
        android:fillType="evenOdd">
        <aapt:attr name="android:fillColor">
            <gradient 
                android:startY="0.41999998688697815" 
                android:startX="0.0" 
                android:endY="110.0" 
                android:type="linear" 
                android:endX="360.0">
                <item android:offset="0.0" android:color="#FFCB09FF" />
                <item android:offset="1.0" android:color="#FF8A06FF" />
            </gradient>
        </aapt:attr></path>
</vector>

Link to original SVG file: https://drive.google.com/file/d/1Lj62xJv5IpYR5Lle7w1kMsFXh6y5PijK/view?usp=sharing

SVG contents when opened on Sublime:

<svg xmlns="http://www.w3.org/2000/svg" width="360" height="110" viewBox="0 0 360 110">
    <defs>
        <linearGradient id="a" x1="0%" y1="0%" y2="100%">
            <stop offset="0%" stop-color="#CB09FF"/>
            <stop offset="100%" stop-color="#8A06FF"/>
        </linearGradient>
    </defs>
    <path fill="url(#a)" fill-rule="evenodd" d="M82 46H0v64h360V46h-81.876v-.299h-26.208c-14.25 0-38.69-6.198-46.946-25.93C200.99 10.252 193.27.52 180 .474c-13.27-.047-20.04 9.238-24.75 19.295-8.217 17.55-24.662 26.194-49.336 25.931H82V46z"/>
</svg>

Answer

Abhishek Bansal picture Abhishek Bansal · Feb 14, 2019

This solution is working for us in build.gradle

defaultConfig {
vectorDrawables.useSupportLibrary = true
}

and use app:srcCompat instead of android:src when setting a vector drawable with gradient to a ImageView.