<gradient> tag inside XML causes Android to crash

Question

I have an icon that has a gradient component.

<vector xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:aapt="http://schemas.android.com/aapt"
        android:width="100dp"
        android:height="100dp"
        android:viewportWidth="100.0"
        android:viewportHeight="100.0">
    <path
        android:pathData="M68.13,36.74L68.13,36C68.13,30.48 63.65,26 58.13,26L58.13,26L25,26L25,26C19.48,26 15,30.48 15,36L15,36L15,64C15,69.52 19.48,74 25,74L58.13,74C63.65,74 68.13,69.52 68.13,64L68.13,64L68.13,60.74L77.17,69.79L77.17,69.79C77.92,70.54 78.94,70.96 80,70.96C82.21,70.96 84,69.17 84,66.96L84,30.52C84,29.46 83.58,28.44 82.83,27.69C81.27,26.13 78.74,26.13 77.17,27.69L68.13,36.74Z"
        android:strokeColor="#00000000"
        android:fillType="evenOdd"
        android:strokeWidth="1">
        <aapt:attr name="android:fillColor">
<gradient

        android:startY="60.028559008"
        android:startX="41.416262106"
        android:endY="100.0"
        android:endX="81.32660406299999"
        android:type="linear">
<item android:offset="0.0" android:color="#FFFA8561" />
<item android:offset="1.0" android:color="#FFFC5D5D" />
            </gradient></aapt:attr></path>
    <path
        android:pathData="M53.93,51.56C53.57,47.09 51.34,44.29 49.38,41.81C47.57,39.52 46,37.54 46,34.63C46,34.39 45.86,34.18 45.64,34.07C45.42,33.96 45.15,33.98 44.95,34.12C42,36.09 39.54,39.42 38.69,42.6C38.09,44.81 38.01,47.29 38,48.94C35.28,48.39 34.67,44.58 34.66,44.54C34.63,44.34 34.5,44.17 34.31,44.07C34.12,43.98 33.9,43.97 33.71,44.06C33.57,44.13 30.21,45.73 30.01,52.11C30,52.32 30,52.54 30,52.75C30,58.95 35.38,64 42,64C48.64,63.98 54,58.94 54,52.75C54,52.44 53.93,51.56 53.93,51.56Z"
        android:strokeColor="#00000000"
        android:fillType="nonZero"
        android:fillColor="#FFFFFF"
        android:strokeWidth="1"/>
</vector>

I am trying to use this XML as an icon inside my app.

However, for some reason, when I do

<ImageView src="@drawable/icon"/>

Running on API 23, My app would immediately crashes on me.

However, on API level 19, the same app runs without any issues.

If I remove that <gradient> tag, the API 23 runs fine as well.

What should I do so that the app in API 23 without any issue?

Answer 1

The main problem here is that you are trying to use gradient and properties defined for API 24 such android:fillType and android:startY in a device with API 19.

The solution is:

Create 2 drawables folders

• drawable
• drawable-v24

Put this as your_logo.xml in the drawable folder (I've used #FFFA8561 took from the gradient)

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="100dp"
    android:height="100dp"
    android:viewportWidth="100.0"
    android:viewportHeight="100.0">
    <path
        android:pathData="M68.13,36.74L68.13,36C68.13,30.48 63.65,26 58.13,26L58.13,26L25,26L25,26C19.48,26 15,30.48 15,36L15,36L15,64C15,69.52 19.48,74 25,74L58.13,74C63.65,74 68.13,69.52 68.13,64L68.13,64L68.13,60.74L77.17,69.79L77.17,69.79C77.92,70.54 78.94,70.96 80,70.96C82.21,70.96 84,69.17 84,66.96L84,30.52C84,29.46 83.58,28.44 82.83,27.69C81.27,26.13 78.74,26.13 77.17,27.69L68.13,36.74Z"
        android:strokeColor="#00000000"
        android:fillColor="#FFFA8561"
        android:strokeWidth="1">
    </path>
    <path
        android:pathData="M53.93,51.56C53.57,47.09 51.34,44.29 49.38,41.81C47.57,39.52 46,37.54 46,34.63C46,34.39 45.86,34.18 45.64,34.07C45.42,33.96 45.15,33.98 44.95,34.12C42,36.09 39.54,39.42 38.69,42.6C38.09,44.81 38.01,47.29 38,48.94C35.28,48.39 34.67,44.58 34.66,44.54C34.63,44.34 34.5,44.17 34.31,44.07C34.12,43.98 33.9,43.97 33.71,44.06C33.57,44.13 30.21,45.73 30.01,52.11C30,52.32 30,52.54 30,52.75C30,58.95 35.38,64 42,64C48.64,63.98 54,58.94 54,52.75C54,52.44 53.93,51.56 53.93,51.56Z"
        android:strokeColor="#00000000"
        android:fillColor="#FFFFFF"
        android:strokeWidth="1"/>
</vector>

Create this gradient_logo.xml file and put it on the drawable-v24 folder (don't worry about Android Studio complaining about this file, it will compile fine even if marked with red)

<?xml version="1.0" encoding="utf-8"?>
<gradient xmlns:android="http://schemas.android.com/apk/res/android"
    android:startY="60.028559008"
    android:startX="41.416262106"
    android:endY="100.0"
    android:endX="81.32660406299999"
    android:startColor="#FFFA8561"
    android:endColor="#FFFC5D5D"
    android:type="linear" />

Put this different version of your_logo.xml in the drawable-v24 folder

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="100dp"
    android:height="100dp"
    android:viewportWidth="100.0"
    android:viewportHeight="100.0">
    <path
        android:pathData="M68.13,36.74L68.13,36C68.13,30.48 63.65,26 58.13,26L58.13,26L25,26L25,26C19.48,26 15,30.48 15,36L15,36L15,64C15,69.52 19.48,74 25,74L58.13,74C63.65,74 68.13,69.52 68.13,64L68.13,64L68.13,60.74L77.17,69.79L77.17,69.79C77.92,70.54 78.94,70.96 80,70.96C82.21,70.96 84,69.17 84,66.96L84,30.52C84,29.46 83.58,28.44 82.83,27.69C81.27,26.13 78.74,26.13 77.17,27.69L68.13,36.74Z"
        android:strokeColor="#00000000"
        android:fillType="evenOdd"
        android:fillColor="@drawable/gradient_logo"
        android:strokeWidth="1">
    </path>
    <path
        android:pathData="M53.93,51.56C53.57,47.09 51.34,44.29 49.38,41.81C47.57,39.52 46,37.54 46,34.63C46,34.39 45.86,34.18 45.64,34.07C45.42,33.96 45.15,33.98 44.95,34.12C42,36.09 39.54,39.42 38.69,42.6C38.09,44.81 38.01,47.29 38,48.94C35.28,48.39 34.67,44.58 34.66,44.54C34.63,44.34 34.5,44.17 34.31,44.07C34.12,43.98 33.9,43.97 33.71,44.06C33.57,44.13 30.21,45.73 30.01,52.11C30,52.32 30,52.54 30,52.75C30,58.95 35.38,64 42,64C48.64,63.98 54,58.94 54,52.75C54,52.44 53.93,51.56 53.93,51.56Z"
        android:strokeColor="#00000000"
        android:fillType="nonZero"
        android:fillColor="#FFFFFF"
        android:strokeWidth="1"/>
</vector>

Use the AppCompatImageView to add the image

<android.support.v7.widget.AppCompatImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:srcCompat="@drawable/your_logo"/>

Conclusions: In this way your project will compile fine, but you will notice that you will end up with 2 slightly different logos, one for API >= 24 and another one for API <=23.

I don't know if this is acceptable to you, but if you care about your logo not to be the exactly the same on every platform, the solutions available are those ones:

1. Don't use vectors for your logo. Use the classic PNG set distributed in the mipmap folders.
2. Don't use a gradient in your logo and go for the flat version which is compatible with API >=19