Android Studio2.3の新機能をCheck It Out！

Android Studioの新バージョン2.3をCheck It Out！ 前編

マテリアルアイコン

　次はマテリアルアイコンの追加機能を紹介します。

　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］と選択してください。

図8　Vector Assetを選択

　すると、図9のダイアログが表示されます。［Material Icon］が選択されていることを確認して、［Icon］の横のボタンをクリックします。

図9　Asset Studio画面

　すると、マテリアルアイコン選択ダイアログが表示されます。

図10　マテリアルアイコン選択画面

　左上に検索窓があるので、そこに「sa」と入力するだけで、該当するマテリアルアイコンが絞られます。この状態で、「sentiment_satisfied」を選択し、［OK］をクリックしてください。

図11　ニコニコマークを選択

　元のAsset Studio画面に戻るので、［Next］→［Finish］とボタンをクリックして画面を進めてください。

　「res/drawable」フォルダ内に「ic_sentiment_satisfied_black_24dp.xml」ファイルが追加されているはずです。これが先ほど選択したニコニコマークのベクタードローアブルXMLファイルです。

　では、このファイルをImageViewとして表示させてみましょう。activity_new_features.xmlのTextViewタグと、海の画像のImageViewタグの間に以下のソースを追加してください。

リスト3　activity_new_features.xmlに追記

      ～省略～
    android:text="@string/title"/>

<ImageView
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:src="@drawable/ic_sentiment_satisfied_black_24dp"/>

<ImageView
      ～省略～

　この状態で一度アプリを再起動してください。図12のように、ニコニコマークが表示されていると思います。

図12　ニコニコマークが表示されたアプリ

　「android:src」属性を見るとわかるように、ファイルの実態はXMLでも、PNGやJPEG、WebP画像と同じような感覚で、1つの画像として扱うことができます。さらに、ベクター画像なので、拡大しても画像は荒くなりません。例えば、このニコニコマークのImageViewタグのlayout_widthとlayout_heightを縦横それぞれ3倍にしてみてください。

android:layout_width="150dp"
android:layout_height="150dp"

　図13のように、画像が荒くなっていないことが確認できるでしょう。

図13　縦横それぞれ3倍になったニコニコマーク

　このように、アプリ内で使うアイコン類は、積極的にマテリアルアイコンのベクタードローアブルを使っていきましょう。