Androidのアイコンサイズ(2015.09更新) - ReDo

2012年2月 7日

Androidのアイコンサイズ(2015.09更新)


おにゅーなAndroid UI情報サイト、「Android Design」のアイコン情報のページがpxで書いてなくて微妙に不親切な気がしたので、px単位でのメモ。
Android Design:Iconography
http://developer.android.com/intl/ja/design/style/iconography.html

Material Design対応(Android 5.0から)時に前述のサイトは404になった(URLマッピングがうまくいってない?)模様なので、以下のページを参照する必要があります。

Material Design Style > Icon
http://www.google.com/design/spec/style/icons.html

<4.4以前との差分>
・Launcher等で使われる48dpのProduct Iconと、Action BarあらためApp bar(クラス名としてはToolbarになりましたが)等で使われる24dpのSystem Iconの二種類に集約されました。(Play向け512x512のPNGは変わらず必要です)
・どちらもSquare, Circle, Vertical rectangle, Horizontal rectangleの4つのKeyline shapesから選べます。
・Product IconはMaterial Design的なこまやかな影のルールにのっとって作成する必要があります。
・System Iconがモノクロなのは変わりませんが、Notification Barではマスク画像としてしか使われない(真っ白一色になる)のでShapeのedgeはpixelぴったりにする必要があります。

Android 4.4以前もサポートするのであれば、Compat Libraryを使って、古いバージョンのAndroidでもMaterial Designなアプリにしろよ、というのがGoogleの意向の模様です。古いAndroidでMaterial Designアプリが動作する違和感と比較すると、Action Barと少し太くなったApp barの両方のデザインをするコストの方が高いのでこれは妥当な話だと思います。(ややこしいなぁもう)

dpについては結局のところ公式(か翻訳)で良い気がします。
(具体的な国内端末と見た目サイズまで噛み砕いた見やすいページがあれば...)
http://developer.android.com/intl/ja/guide/practices/screens_support.html
http://www.techdoctranslator.com/android/practices/screens_support

android_design_icon_gn.png

○Launcher:ランチャーアイコン
 マットな質感でちょい3D、どんなタイプの背景にでも映える様にしろって言ってる。

・48x48dp
 ・画像サイズ48x48dpのエリア内いっぱいに描くべし。
 ・ ldpi:36x36px
 ・ mdpi:48x48px
 ・ hdpi:72x72px
 ・xhdpi:96x96px
 ・xxhdpi:144x144px
 ・xxxhdpi:192x192px
 ・別途Playマーケットのために512x512pxのアイコンが必要。

○Action Bar:アプリ上部(※)のアクションバーアイコン
 white系テーマのための濃い灰色アイコンと、black系テーマのための白アイコンの2種類ある。

・32x32dp
 ・ただしこれはエリアサイズであってアイコンの実描画は24x24dpに収めるべし。
 ・ ldpi:24x24px
 ・ mdpi:32x32px
 ・ hdpi:48x48px
 ・xhdpi:64x64px
 ・xxhdpi:96x96px
 ・xxxhdpi:128x128px

※「Split Action Bar」という機能によりたまに下部に表示される。

○Small/Contextual Icons:アプリ内で使う情報表示のアイコン
 アプリ内の話なので説明は省略。

○Notification Icon:ステータスバーアイコン
 モノクロが標準ルールなのがポイント。

・24x24dp
 ・ただしこれはエリアサイズであって、実描画は22dpに収めるべし。
 ・ ldpi:18x18px
 ・ mdpi:24x24px
 ・ hdpi:36x36px
 ・xhdpi:48x48px
 ・xxhdpi:72x72px
 ・xxxhdpi:96x96px

○余談

android_design_icon_dp.png

dpの説明、もうちょっと親切でもいいと思うんだけどなぁ...。

○追記
2013.02.26 xxhdpi追記。
2013.12.25 xxxhdpi追記。
2015.09.23 Material Design(Android 5.0)で変わったのでその旨記載、もうそろそろ寿命かな...

コメント(2)

制作中のAndroidアプリに通知機能を実装するにあたり、通知アイコンのサイズ等を調べるため参考にさせていただきました。

2.3(API 10)の頃は、(記憶は曖昧ですが)l/m/hdpiの3種類程度しかなかったような...

ここまで増えると、Inkscapeなどで作るxml形式のベクトル情報ファイルを1つ用意すれば、端末の画素密度に応じてOS側で適切なpng画像を表示してくれると助かるんですけどねぇ...

あと、このページも含め、私が調べた限り適切な情報にたどり着けなかったのは、白の半透明ピクセルの扱いについてです。

ググっても、使える/使えないと明言しているサイトが見つからず、ベクトル形式から変換したpng画像とにらめっこして、個々の半透明ピクセルを全透明にするか不透明白色にするか悩んでいて、結局、おおもと(GoogleのAndroidデザインガイドライン)の通知アイコン見本画像を拡大表示して、半透明ピクセルの存在を確認し、使用可能と(いまのところ個人的には)結論付けていますが、いまだ確信は持てていません。

この程度のコトはAndroid開発者なら当たり前の話で、悩んでいるのは私だけなのでしょうか?

ちなみに、当ページ内Notification Iconのpxサイズリストで、最後の2つがどちらも「xxhdpi」になっちゃってます。提供いただいた情報の見返りとして等価にはほど遠いと思いますが、ご参考まで。

>anIORIentさん
ベクタ画像対応については、Android 5.0からSVGベースのVector Drawableというものに対応しているのですが、Androidの描画リソースとしてはサイズ情報(?)が足りないのか、SVG直ではなくて少しwrapされたものですね。

# Vector Drawableはv7のCompatLibraryありますが、システムでサポートしてないのでアイコンには使えないと思われます。

>白の半透明ピクセル
http://developer.android.com/design/patterns/notifications.html
Notification Barだとマスクとしてしか使わない→edgeが多分落ちる
それ以外→画像として貼り付ける→アンチエイリアスが有効になる

多分こんな感じですね。全透明/半透明/真っ白で三分割したアイコンとか作ったらたぶんわかるんじゃないかと…

>xxhdpiのtypo
さっぱり気づいてませんでした、修正します。指摘ありがとうございます。

コメントする