SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

DeveloperZine(デベロッパージン)- エンジニアの意思決定を支える技術情報メディア ProductZine

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

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

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を選択
図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倍になったニコニコマーク

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

次のページ
新しいInstant Run

この記事は参考になりましたか?

Android Studioの新バージョン2.3をCheck It Out!連載記事一覧
この記事の著者

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

WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。 2026年時点での登録メンバは約50名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS X: @WingsPro_info(公式)、@WingsPro_info/wings(メンバーリスト) Facebook <個人紹介>WINGSプロジェクト所属のテクニカルライター。Web系製作会社のシステム部門、SI会社を経てフリーランスとして独立。屋号はSarva(サルヴァ)。HAL大阪の非常勤講師を兼務。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

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

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるLaravel実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

CodeZine(コードジン)
https://codezine.jp/article/detail/10120 2017/06/07 19:36

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー