AndroidでSVGを画像としてImageViewに表示する(Support Library 26編)

こんにちは。

以前、「AndroidでSVGを画像としてImageViewに表示する」と題して投稿しました。
ところが、Support Library 26.0.0が2017年7月にリリースされまして、前投稿とは異なるアプローチで実現することができことが確認できましたので、再度投稿した次第です。

環境

Android Studio

Android Studioのメニュー「Help」から「About」をクリックすると、自己紹介してくれるので便利です。

Android Studio 3.0 Beta 5
Build #AI-171.4316950, built on September 6, 2017
JRE: 1.8.0_152-release-915-b01 amd64
JVM: OpenJDK 64-Bit Server VM by JetBrains s.r.o
Windows 10 10.0

Support Library

build.gradle

apply plugin: 'com.android.application'

android {
    compileSdkVersion 26
    buildToolsVersion "26.0.1"
    defaultConfig {
        applicationId "jp.co.casareal.svgsupportlibrary26"
        minSdkVersion 14
        targetSdkVersion 26
        versionCode 1
        versionName "1.0"
    }
}

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'com.android.support:appcompat-v7:26.0.2'
}

26.0.2のSupport Libraryを使うことにしました。このSupport LibraryのminSdkVersionは「14（Android 4.0、4.0.1、4.0.2/ICE_CREAM_SANDWICH）」です。ということで、私もそのエミュレータで試してみたかったのですが、もはやそのイメージの配信が廃止（ハイシンがハイシ、なんちゃって）になってるっぽく、仕方なくAPI level 16のエミュレータで試すことにします。これにはアルプスの少女ハイジもビックリの背信行為。さあ、あとどれだけ駄洒落が出ることやら。

SVGファイル

SVGファイルは、こんなイメージです。

長～くなっちゃいますが、掲載しておきますね。

wakwak_circle_color.svg

<?xml version="1.0" ?><!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.0//EN'  'http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd'><svg height="110px" style="enable-background:new 0 0 110 110;" version="1.0" viewBox="0 0 110 110" width="110px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="Artboard"/><g id="Multicolor"><g><circle cx="54.976" cy="55.024" r="55" style="fill:#FABC3D;"/></g><g><path d="M83,76c-0.615-1.333-1.698-2.394-3.043-2.982L65,69v-6l-5.105,3.995    C59.326,67.634,58.511,68,57.655,68H55h-2.655c-0.856,0-1.671-0.366-2.24-1.005L45,63v6l-14.957,4.018    C28.698,73.606,27.615,74.667,27,76l-4,11h32h32L83,76z" style="fill:#3E3E3F;"/><path d="M72,47.258c0-1.111-1-2.222-2-2.222s-1,1.111-1,1.111v-1.111c-0.018-9-1.024-15-14-15    s-13.982,6-14,15V53l4,10l5.105,3.995C50.674,67.634,51.489,68,52.345,68H55h2.655c0.856,0,1.671-0.366,2.24-1.005L65,63    l3.193-7.982C71.039,54.827,72,50.517,72,47.258z" style="fill:#FBC8C8;"/><path d="M41,45v1.111c0,0,0-1.111-1-1.111s-2,1.111-2,2.222c0,3.259,0.961,7.568,3.807,7.76L45,62.964    l5.105,3.995c0.569,0.64,1.384,1.005,2.24,1.005H55V30C42.024,30,41.018,36,41,45z" style="fill:#FBD7D7;"/><path d="M69.268,36.391C71.997,32.495,72,28,72,28H55h-6.866c-2.58,0-5.038,1.099-6.759,3.021    c-1.721,1.922-2.542,4.486-2.256,7.051l2.896,17.467L45,63l5.105,3.995C50.674,67.634,51.489,68,52.345,68H55h2.655    c0.856,0,1.671-0.366,2.24-1.005L65,63l2.984-7.461l2.288-16.629c0.175-0.699,0.018-1.441-0.426-2.009    C69.685,36.694,69.483,36.53,69.268,36.391z M68,45.036l-2,10v0.031l-3,6h-1l-1.316-3.949c-0.408-1.225-1.555-2.051-2.846-2.051    H55h-2.838c-1.291,0-2.438,0.826-2.846,2.051L48,61.067h-1l-3-6v-0.031l-2-10V36c0,0,0.011,5.447,13,5.958    C55.638,41.983,56.297,42,57,42c5.351,0,8.786-1.784,11-4.076V45.036z" style="fill:#F37A10;"/><path d="M42.016,55.539L45,63l5.105,3.995C50.674,67.634,51.489,68,52.345,68H55V55.067h-2.838    c-1.291,0-2.438,0.826-2.846,2.051L48,61.067h-1l-3-6v-0.031l-2-10V36c0,0,0.011,5.447,13,5.958V28h-6.866    c-2.58,0-5.038,1.099-6.759,3.021c-1.721,1.922-2.542,4.486-2.256,7.051" style="fill:#F99134;"/><g><path d="M51,58h8c0,0,0,3-4,3S51,58,51,58z" style="fill:#FBD7D7;"/></g><path d="M61.5,42.625c-2.438,0-4.875,1.625-4.875,1.625H55h-1.625c0,0-2.438-1.625-4.875-1.625    c-4.063,0-6.5,1.625-6.5,1.625v0.813h0.812c0,4.875,1.625,7.312,5.857,7.312c4.231,0,5.112-4.062,5.112-5.189    c0-1.127,1.219-1.311,1.219-1.311s1.219,0.184,1.219,1.311c0,1.127,0.88,5.189,5.112,5.189c4.232,0,5.857-2.437,5.857-7.312H68    V44.25C68,44.25,65.562,42.625,61.5,42.625z" style="fill:#3E3E3F;"/><g><g><path d="M48.5,44.25c-2.244,0-4.062,1.006-4.062,3.25c0,0.908,0.301,1.743,0.804,2.419l5.318-5.318      C49.955,44.366,49.253,44.25,48.5,44.25z" style="fill:#9E9FA0;"/></g></g><g><g><path d="M61.579,44.25c-2.244,0-4.062,1.006-4.062,3.25c0,0.908,0.301,1.743,0.804,2.419l5.318-5.318      C63.034,44.366,62.331,44.25,61.579,44.25z" style="fill:#9E9FA0;"/></g></g></g></g></svg>

height="110px"とwidth="110px"という中途半端な大きさです。

Android Studioの機能「Vector Asset」

右クリックして「New」そして「Vector Asset」をクリックします。

そうしたら、標準で提供されているMaterial Iconから選択してもいいのですが、自前のSVGファイルで楽しみたいです。「Override」にチェックを入れると、SVG内のheight="110px"とwidth="110px"を見に行ってくれるようです（デフォルト値は24dp×24dp）。

「Next」ボタンをクリックします。

SVGファイルの先頭に「ic_」が付き、拡張子が「xml」になり、リソースフォルダに格納されます。
できたXMLファイルがこちらです。

ic_wakwak_circle_color.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="110dp"
        android:height="110dp"
        android:viewportWidth="110.0"
        android:viewportHeight="110.0">
    <path
        android:pathData="M54.98,55.02m-55,0a55,55 0,1 1,110 0a55,55 0,1 1,-110 0"
        android:fillColor="#FABC3D"/>
    <path
        android:pathData="M83,76c-0.62,-1.33 -1.7,-2.39 -3.04,-2.98L65,69v-6l-5.11,3.99C59.33,67.63 58.51,68 57.65,68H55h-2.65c-0.86,0 -1.67,-0.37 -2.24,-1L45,63v6l-14.96,4.02C28.7,73.61 27.61,74.67 27,76l-4,11h32h32L83,76z"
        android:fillColor="#3E3E3F"/>
    <path
        android:pathData="M72,47.26c0,-1.11 -1,-2.22 -2,-2.22s-1,1.11 -1,1.11v-1.11c-0.02,-9 -1.02,-15 -14,-15s-13.98,6 -14,15V53l4,10l5.11,3.99C50.67,67.63 51.49,68 52.35,68H55h2.65c0.86,0 1.67,-0.37 2.24,-1L65,63l3.19,-7.98C71.04,54.83 72,50.52 72,47.26z"
        android:fillColor="#FBC8C8"/>
    <path
        android:pathData="M41,45v1.11c0,0 0,-1.11 -1,-1.11s-2,1.11 -2,2.22c0,3.26 0.96,7.57 3.81,7.76L45,62.96l5.11,3.99c0.57,0.64 1.38,1 2.24,1H55V30C42.02,30 41.02,36 41,45z"
        android:fillColor="#FBD7D7"/>
    <path
        android:pathData="M69.27,36.39C72,32.49 72,28 72,28H55h-6.87c-2.58,0 -5.04,1.1 -6.76,3.02c-1.72,1.92 -2.54,4.49 -2.26,7.05l2.9,17.47L45,63l5.11,3.99C50.67,67.63 51.49,68 52.35,68H55h2.65c0.86,0 1.67,-0.37 2.24,-1L65,63l2.98,-7.46l2.29,-16.63c0.17,-0.7 0.02,-1.44 -0.43,-2.01C69.68,36.69 69.48,36.53 69.27,36.39zM68,45.04l-2,10v0.03l-3,6h-1l-1.32,-3.95c-0.41,-1.23 -1.55,-2.05 -2.85,-2.05H55h-2.84c-1.29,0 -2.44,0.83 -2.85,2.05L48,61.07h-1l-3,-6v-0.03l-2,-10V36c0,0 0.01,5.45 13,5.96C55.64,41.98 56.3,42 57,42c5.35,0 8.79,-1.78 11,-4.08V45.04z"
        android:fillColor="#F37A10"/>
    <path
        android:pathData="M42.02,55.54L45,63l5.11,3.99C50.67,67.63 51.49,68 52.35,68H55V55.07h-2.84c-1.29,0 -2.44,0.83 -2.85,2.05L48,61.07h-1l-3,-6v-0.03l-2,-10V36c0,0 0.01,5.45 13,5.96V28h-6.87c-2.58,0 -5.04,1.1 -6.76,3.02c-1.72,1.92 -2.54,4.49 -2.26,7.05"
        android:fillColor="#F99134"/>
    <path
        android:pathData="M51,58h8c0,0 0,3 -4,3S51,58 51,58z"
        android:fillColor="#FBD7D7"/>
    <path
        android:pathData="M61.5,42.63c-2.44,0 -4.88,1.63 -4.88,1.63H55h-1.63c0,0 -2.44,-1.63 -4.88,-1.63c-4.06,0 -6.5,1.63 -6.5,1.63v0.81h0.81c0,4.88 1.63,7.31 5.86,7.31c4.23,0 5.11,-4.06 5.11,-5.19c0,-1.13 1.22,-1.31 1.22,-1.31s1.22,0.18 1.22,1.31c0,1.13 0.88,5.19 5.11,5.19c4.23,0 5.86,-2.44 5.86,-7.31H68V44.25C68,44.25 65.56,42.63 61.5,42.63z"
        android:fillColor="#3E3E3F"/>
    <path
        android:pathData="M48.5,44.25c-2.24,0 -4.06,1.01 -4.06,3.25c0,0.91 0.3,1.74 0.8,2.42l5.32,-5.32C49.96,44.37 49.25,44.25 48.5,44.25z"
        android:fillColor="#9E9FA0"/>
    <path
        android:pathData="M61.58,44.25c-2.24,0 -4.06,1.01 -4.06,3.25c0,0.91 0.3,1.74 0.8,2.42l5.32,-5.32C63.03,44.37 62.33,44.25 61.58,44.25z"
        android:fillColor="#9E9FA0"/>
</vector>

単一パスではなく、複数パスに対応できています。

画面

レイアウトはこちら。前投稿のとあまり変わりません。ポイントはもちろん、<ImageView>のandroid:src属性値ですね。

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FFFFFF"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin">

    <ImageView
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:src="@drawable/ic_wakwak_circle_color" />

    <ImageView
        android:layout_width="72dp"
        android:layout_height="72dp"
        android:src="@drawable/ic_wakwak_circle_color" />

    <ImageView
        android:layout_width="96dp"
        android:layout_height="96dp"
        android:src="@drawable/ic_wakwak_circle_color" />

    <ImageView
        android:layout_width="144dp"
        android:layout_height="144dp"
        android:src="@drawable/ic_wakwak_circle_color" />

</LinearLayout>

Activityは、掲載するほどのものでもありません。

MainActivity.java

package jp.co.casareal.svgsupportlibrary26;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}

表示結果

綺麗に表示されました。

はい、しゅうりょうです。