androidアプリのデザイン・実装 素材サイズは何dp・px？

Question

androidアプリを制作しているのですが、素材はどんなサイズで用意したら良いのでしょうか？

はじめ、全く知識がなかったので、実機デバッグをしているスマホのサイズに合わせて作ることにしました。
実機のコンテンツ領域 ：1280-720px

そして、ある程度素材デザイン、実装を進めていてなぜか画像サイズが1対１で表示されていないことに気づきました。

よくよく調べるとandroidではdipという概念・サイズでやり取りをするのが良い、なぜなら端末ごとに解像度が違うから、ということを学びました。

ただ、dipの理解が今ひとつできてなく、よくわからなかったので質問です。

とりあえず一番大きいサイズに合わせて作るのが良さそう、という記事を拝見しました。
なのでxxxhdpi 360x640dpiに合わせて作るのが良いのでしょうか。

xxxhdpi（1dp = 4px）なので
ピクセルでいうと1440-2560pxで用意すれば良いのでしょうか？

dipの概念を知らなかった時、1280-720pxで素材を用意していましたが、実装すると、リサイズされて表示され変な大きさになっていました。
これってdpを基準に合わせないとandroid studioが自動でリサイズしているのでしょうか。

長々となってしまいましたがお教えいただけると幸いです。

Comments

[aja]

>dipの概念を知らなかった時、1280-720pxで素材を用意していましたが、実装すると、リサイズされて表示され変な大きさになっていました。

どういうコードを書いたのか、出してもらえれば具体的な説明をしてもらえるでしょうね

Answer 1

うちでは xxhdpi (1080 x 1920) サイズでデザインしています。
理由は xxhdpi が現在の Android スマホの主流だからです。
詳しい情報はこの辺の記事が参考になると思います。
http://qiita.com/nein37/items/0a622f7ebbbb92db93d5
(xhdpi もまだメジャーなので、iPhone に合わせて xhdpi (720 x 1280) でもいいと思います。
xxxhdpi はまだ少ないし、デザインファイルが巨大になるので、そこまでする必要はないと思います。)

また、コンテンツ領域は論理サイズを dp で考えてレイアウトするのがいいと思いますが、これも機種によってまちまち (詳しくは上記の記事をどうぞ) なので、基準のサイズは 360 x 640 として、それより大きかったり小さかったりした場合にどうするかも考えておく必要があります。
(さらに、機種によってナビゲーションバー (戻るボタンやホームボタンが配置されるエリア) が画面上にあったりなかったりするため、これによってもコンテンツ領域のサイズは変わります。)

実装する際には、
・Layout XML ファイルには dp で指定 (xxhdpi のデザイン上 300px であれば、3 で割って 100dp)
・画像リソースは hdpi, xhdpi, xxhdpi (アイコンなどは xxxhdpi も) の各サイズで書き出し、それそれ適切な drawable-???dpi ディレクトリに配置
・コードで指定する場合は dp から px に変換 (Resource クラスの getDimensionPixelSize および getDimensionPixelOffset メソッドを利用)
で行います。

画像のサイズは、例えば 100dp であれば、
・hdpi 150px (dp の 1.5 倍、xxhdpi の 1/2)
・xhdpi 200px (dp の 2 倍、xxhdpi の 2/3)
・xxhdpi 300px (dp の 3 倍)
・xxxhdpi 400px (dp の 4 倍、xxhdpi の 4/3)
になります。
(なお、xxhdpi でデザインする場合、1/2 と 2/3 にする必要があるので、ボタンなどの位置やサイズを 6 の倍数にしておくと綺麗です。)

そして、例えば 300px の画像を drawable-xxhdpi ディレクトリに格納すれば、100dp の画像ということになります。
画像を表示する際には、画面の解像度に対応する drawable-???dpi ディレクトリに画像ファイルが存在すればそれがそのまま使われますし、なければ他の解像度用のファイルを自動的に拡大縮小して使われます。
画像が思い通りの解像度で表示されないということは、画像の格納先が適切な drawable-???dpi になってない、または解像度を考えずに全て drawable ディレクトリに格納しているのではないでしょうか。

基本的に、元のデザインファイルをどのサイズで作っても、正しく実装すればデザインが崩れることはありません。
それより重要なのは、拡大縮小に強いツールとワークフローを確立することです。
うちでは Sketch (https://www.sketchapp.com/) というアプリを使っていますが、例えば 1000px の画像を貼り付けてリサイズしても、元の 1000px の情報量を保っていて、最終的に書き出すときにだけ目的のサイズに拡大縮小されます。

最近では VectorDrawable というものも使えるようになったので、使える場合は積極的に使うと良いでしょう。
http://qiita.com/konifar/items/bf581b8f23dea7b30f85
また、Nexus 5X や 6P は xxhdpi や xxxhdpi とはまた別の解像度だったり、Android N ではユーザーが解像度を変更できる (当然、コンテンツ領域の論理サイズも変わる) ようになりますので、特定の解像度に依存しないアプリを作ることがますます大切になると思います。

Comments

[masaakitsuyoshi]

ご回答ありがとうございます。
エンジニアとデザイナーでやりとりしながらアプリを作るのが初だったので、デザインは何サイズかわかりませんでした。

＞＞(なお、xxhdpi でデザインする場合、1/2 と 2/3 にする必要があるので、ボタンなどの位置やサイズを 6 の倍数にしておくと綺麗です。)

大変参考になります！

＞＞画像を表示する際には、画面の解像度に対応する drawable-???dpi ディレクトリに画＞＞像ファイルが存在すればそれがそのまま使われますし、なければ他の解像度用のファイ＞＞ルを自動的に拡大縮小して使われます。
＞＞画像が思い通りの解像度で表示されないということは、画像の格納先が適切な drawabl＞＞e-???dpi になってない、または解像度を考えずに全て drawable ディレクトリに格納＞＞しているのではないでしょうか。

当初、この部分を理解していず、ひとまず1280-720のサイズで作った１枚の画像をdpiがわからない実機でテストしていました。
何度か表示していると、あれ？サイズおかしくね？ということに気づき、androidって画面サイズ違うから自動でリサイズしてるんじゃ？？
じゃあ画面サイズごとに決まった比率で表示するには？？
と、調べていきました。

当然、「drawable-???dpi 」のディレクトリも作ってなかったのでandroid studioが自動的にリサイズしていたんですね。

ちなみに、そんな単純なことすら知らないのにこちらでもSketch3を採用していましたが、良いようですね！

その他の情報も大変参考になりました。
チームで共有しておきます。