CodeZine(コードジン)

特集ページ一覧

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

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

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2017/05/09 14:00
目次

マテリアルアイコン

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

 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を選択
図8 Vector Assetを選択

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

図9 Asset Studio画面
図9 Asset Studio画面

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

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

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

図11 ニコニコマークを選択
図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 ニコニコマークが表示されたアプリ
図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倍になったニコニコマーク
図13 縦横それぞれ3倍になったニコニコマーク

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


  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:Android Studioの新バージョン2.3をCheck It Out!

著者プロフィール

  • WINGSプロジェクト 齊藤 新三(サイトウ シンゾウ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きた...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5