エンジニアの頭の中

フリーランスエンジニアが書く技術系ブログです。

マテリアルデザインのアイコンをAndroidアプリに簡単に使用する方法

最近のAndroidアプリといったら、マテリアルデザインが主流です。

知っている人も多いと思いますが、マテリアルデザインのアイコンは、Googleが公開しているサイトからゲットして、自分のAndroidアプリに簡単に取り込むことができます。

その手順を説明します。 

 

アイコンは、以下のサイトから取得することができます。

material.io

このサイトでは、たくさんのマテリアルデザインのアイコンを公開していて、Androidアプリに限らず、iOS用、ウェブサイト用のアイコンを入手することも可能です。

アイコン入手手順

まず、ブラウザで上記のサイトへアクセスします。

f:id:mitsu3204:20170408190633p:plain

画面をスクロールしていくと、以下のように入手可能なアイコンの一覧を確認できます。

f:id:mitsu3204:20170408190614p:plain

使用したいアイコンの名前がわかっているのであれば、「Search」と表示されているテキストフィールドに、テキストを入力して、表示されるアイコンを絞り込むことができます。名前がわからないのであれば、普通にスクロールして、目的のアイコンを探しましょう。

 

アイコンが見つかったら、そのアイコンをクリックします。クリックすると画面下部に青いバーが表示されます。

f:id:mitsu3204:20170408191022p:plain

 

アイコンのdpを選択します。アイコンの使用箇所によって、24dpや48dpなど適切なものを選択してください。

アイコンの色も黒か白かを選択可能です。(例では48dpで黒を選択します)

選択したら、PNGSをクリックすると、指定したアイコンのpng画像をダウンロードできます。

f:id:mitsu3204:20170408191347p:plain

例の画像の通りに入力すると、ic_settings_black_48dp.zip というファイルがダウンロードできます。

イコン画像zipファイルの構成

zipファイルを展開すると、以下の構成になっています。androidios、webと3つのディレクトリがありますが、今回使用するのは、androidディレクトリです。

$ tree ic_settings_black_48dp
ic_settings_black_48dp
├── android
│   ├── drawable-hdpi
│   │   └── ic_settings_black_48dp.png
│   ├── drawable-mdpi
│   │   └── ic_settings_black_48dp.png
│   ├── drawable-xhdpi
│   │   └── ic_settings_black_48dp.png
│   ├── drawable-xxhdpi
│   │   └── ic_settings_black_48dp.png
│   └── drawable-xxxhdpi
│       └── ic_settings_black_48dp.png
├── ios
│   └── ic_settings_48pt.imageset
│       ├── Contents.json
│       ├── ic_settings_48pt.png
│       ├── ic_settings_48pt_2x.png
│       └── ic_settings_48pt_3x.png
└── web
    ├── ic_settings_black_48dp_1x.png
    └── ic_settings_black_48dp_2x.png

9 directories, 11 files

androidディレクトリの配下を見ると、mdpiからxxxhdpiに至るまで、各dpのアイコンが揃っています。

アイコンをそれぞれ作るのは面倒な作業なので、これは助かります。 

Androidアプリへの適用方法

ic_settings_black_48dp/androidディレクトリの中にある、以下のディレクトリをまとめてリソースディレクトリへコピーするだけです。

以下を全てコピーして

  • drawable-hdpi
  • drawable-mdpi
  • drawable-xhdpi
  • drawable-xxhdpi
  • drawable-xxxhdpi

アプリのリソース用ディレクトリ(app/src/main/res/)の配下へペーストしましょう。

これだけで完了です。