Vector Drawableのgradientの挙動にハマった件

グラデーションを表現したSVGファイルをVector DrawableとしてインポートしてViewのBackgroundに配置したときに、Androidのバージョンで差が出たのでそのときの対応メモです。

やりたい表現

Android 8.0 (API 26)以上であればOK

drawable

これをImageViewのbackgroundへ配置

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:aapt="http://schemas.android.com/aapt"
    android:width="200dp"
    android:height="200dp"
    android:viewportWidth="100"
    android:viewportHeight="100">

    <path
        android:pathData="M0,0 L200,0 L200,200 L0,200 Z"
        >
        <aapt:attr name="android:fillColor">
            <gradient
                android:gradientRadius="50"
                android:centerX="50"
                android:centerY="50"
                android:type="radial">
                <item android:offset="0" android:color="#FF0066BA"/>
                <item android:offset="0.47648278" android:color="#FF024D8B"/>
                <item android:offset="1" android:color="#00000000"/>
            </gradient>
        </aapt:attr>
    </path>

</vector>

うまくいかなかった例

Android 5.1.1 - Android 7.1.x (API 22 - 25)

何かおかしい...透過が効いていない？

どのバージョンでもうまくいった例

3つ目の android:offset を2つ目のカラーコードと同じにしてアルファの値のみ0に変更

drawable

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:aapt="http://schemas.android.com/aapt"
    android:width="200dp"
    android:height="200dp"
    android:viewportWidth="100"
    android:viewportHeight="100">

    <path
        android:pathData="M0,0 L200,0 L200,200 L0,200 Z"
        >
        <aapt:attr name="android:fillColor">
            <gradient
                android:gradientRadius="50"
                android:centerX="50"
                android:centerY="50"
                android:type="radial">
                <item android:offset="0" android:color="#FF0066BA"/>
                <item android:offset="0.47648278" android:color="#FF024D8B"/>
                <item android:offset="1" android:color="#00024D8B"/>
            </gradient>
        </aapt:attr>
    </path>

</vector>

結果

まとめ

Vector Drawableの一部の属性がAPI 25以下だと対応していなかったり、アルファ値の扱いが異なるのかもしれません。

Drawable Resource でもだいぶ色々な表現が可能になっていますが、仕様的に表現しきれない部分もあります。一方、Vector Drawableであればデザイナーがイラレ等で用意してくれたSVGファイルをインポートするだけで豊かな表現が可能です。しかし、こちらもインポートが完全ではなく表現が抜け落ちるところは同様にあります。

Vector Drableのインポートで抜け落ちたところは手動設定でカバーすることも可能ですが、設定は大変難しく、将来的にインポート精度が向上するか、もっと簡単に表現できるようになると嬉しいですね。