マテリアルアイコン
次はマテリアルアイコンの追加機能を紹介します。
Android端末の画面サイズや解像度は機種によってさまざまです。アプリ内で画像を扱う場合も、それぞれの解像度に対応させる必要があります。通常は「ldpi」「mdpi」「hdpi」「xhdpi」「xxhdpi」「xxxhdpi」という、6種類の画面密度の画像を用意します(詳細はAPI Guidesを参照してください)。
この問題を一挙に解決できるのがベクター画像です。SVGを始めとするベクター画像は画面解像度に依存しないため、ビットマップ画像を使ったアプリに比べて、アプリのサイズを縮小できます。
Androidはバージョン5.0(APIレベル21)より、ベクター画像をXML形式で記述して、それを「ドローアブル リソース」として扱えるようになりました(これを「ベクタードローアブル」といいます)。さらにAndroid Studioには、これらベクタードローアブルXMLを扱うための「Vector Asset Studio」という機能があり、Android Studio 1.4よりSVGのインポート機能をサポートしています(現在はPSDファイルのインポート機能もあります)。その一部として、マテリアルアイコンのベクタードローアブルインポート機能も含まれています。
マテリアルアイコンとは、Googleが提唱しているマテリアルデザインで推奨されるアイコン群です。こちらにそのリストがあります。なお、マテリアルデザインに関しては、「Android Studio 2で始めるアプリ開発入門 第16回」を参照してください。
Android Studio 2.3では、このマテリアルアイコンのインポート画面にカテゴライズ機能やフィルタ機能が付き、よりインポートしやすくなりました。それを体感してみましょう。
[res]フォルダを右クリックし、表示されたメニューから[New]→[Vector Asset]と選択してください。
すると、図9のダイアログが表示されます。[Material Icon]が選択されていることを確認して、[Icon]の横のボタンをクリックします。
すると、マテリアルアイコン選択ダイアログが表示されます。
左上に検索窓があるので、そこに「sa」と入力するだけで、該当するマテリアルアイコンが絞られます。この状態で、「sentiment_satisfied」を選択し、[OK]をクリックしてください。
元のAsset Studio画面に戻るので、[Next]→[Finish]とボタンをクリックして画面を進めてください。
「res/drawable」フォルダ内に「ic_sentiment_satisfied_black_24dp.xml」ファイルが追加されているはずです。これが先ほど選択したニコニコマークのベクタードローアブルXMLファイルです。
では、このファイルをImageViewとして表示させてみましょう。activity_new_features.xmlのTextViewタグと、海の画像のImageViewタグの間に以下のソースを追加してください。
~省略~
android:text="@string/title"/>
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:src="@drawable/ic_sentiment_satisfied_black_24dp"/>
<ImageView
~省略~
この状態で一度アプリを再起動してください。図12のように、ニコニコマークが表示されていると思います。
「android:src」属性を見るとわかるように、ファイルの実態はXMLでも、PNGやJPEG、WebP画像と同じような感覚で、1つの画像として扱うことができます。さらに、ベクター画像なので、拡大しても画像は荒くなりません。例えば、このニコニコマークのImageViewタグのlayout_widthとlayout_heightを縦横それぞれ3倍にしてみてください。
android:layout_width="150dp" android:layout_height="150dp"
図13のように、画像が荒くなっていないことが確認できるでしょう。
このように、アプリ内で使うアイコン類は、積極的にマテリアルアイコンのベクタードローアブルを使っていきましょう。
