すべてのデバイスに適合するAndroidスプラッシュ画面の画像サイズ

214

スプラッシュに表示したいフルスクリーンPNGがあります。そこに一つだけのエラー、と私は（すべての描画可能なフォルダに入れてどのようなサイズが分からないldpi、mdpi、hdpi、およびxhdpi）。私のアプリケーションは、すべての携帯電話とタブレットで正常に動作するはずです。スプラッシュがすべての画面で適切に表示されるようにするには、どのサイズ（ピクセル単位）を作成する必要がありますか？

android  png  screen  drawable  splash-screen 
— arielschon12
ソース
6
— CommonsWare
4
スプラッシュスクリーンを作成したい...
— arielschon12
1
@verybadallocより詳細かもしれませんが、約1年遅れて投稿されたのでOPが彼の問題を解決しなかったことを保証できます：p
— keyser
6
ええ、私はそれが彼を助けなかったと確信しています。自分で答えを見つけようとしたときにこのトピックを見つけ、別の答えを投稿して、PPLが私の後に同じことを行うのを助けることにしました。
— Lucas Cerro
同様の種類の質問に回答したことが役立つ場合があります。stackoverflow.com
— Ramesh K

回答:

394

免責事項

この回答は2013年のものであり、時代遅れです。Android 3.2以降、画面密度のグループは6つになりました。この回答は、できるだけ早く更新されますが、ETAはありません。現時点でのすべての密度については、公式ドキュメントを参照してください（特定のピクセルサイズに関する情報を見つけるのはいつものように困難です）。

これがtl / drバージョンです

  • 画面密度ごとに1つずつ、4つの画像を作成します。

    • xlarge（xhdpi）：640x960
    • 大（hdpi）：480x800
    • 中（mdpi）：320x480
    • 小（ldpi）：240x320

  • Androidデベロッパーガイドの9パッチイメージの概要を読む

  • 最終結果を損なうことなく安全に拡大できる領域を持つ画像を設計する

これにより、Androidはデバイスの画像密度に適したファイルを選択し、9パッチ規格に従って画像をストレッチします。

tlの終わり; dr。完全な投稿先

質問のデザイン関連の側面についてお答えします。私は開発者ではないので、提供されているソリューションの多くを実装するためのコードを提供することはできません。悲しいかな、私の意図は、初めてのAndroidアプリの開発を手伝ったときと同じように迷っているデザイナーを助けることです。

すべてのサイズにフィット

Androidを使用すると、企業はほぼすべてのサイズの携帯電話とテーブルを、ほぼすべての解像度で開発できます。そのため、固定画面解像度がないため、スプラッシュ画面の「適切な画像サイズ」はありません。これは、スプラッシュスクリーンを実装したい人にとって問題になります。

ユーザーは本当にスプラッシュスクリーンを見たいですか？

（余談ですが、スプラッシュスクリーンはユーザビリティ担当者の間でやや推奨されていません。ユーザーがタップしたアプリはユーザーがすでに知っており、スプラッシュスクリーンで画像をブランド化する必要はありません。 「広告」。ただし、ゲームなど、初期化時にかなりの読み込みが必要なアプリケーション（5秒以上）で使用する必要があります。これにより、ユーザーがアプリがクラッシュしたかどうかを疑問に思うことがなくなります。

画面密度; 4クラス

そのため、市場に出回っている携帯電話には非常に多くの異なる画面解像度があるため、Googleはいくつかの代替案と気の利いたソリューションを実装しました。最初に知っておくべきことは、Androidがすべての画面を4つの異なる画面密度に分割することです。

  1. 低密度（ldpi〜120dpi）
  2. 中密度（mdpi〜160dpi）
  3. 高密度（hdpi〜240dpi）
  4. 超高密度（xhdpi〜320dpi）（これらのdpi値は概算です。カスタムビルドのデバイスはさまざまなdpi値を持つためです）

これから知っておくべきこと（デザイナーの場合）は、Androidは基本的に、デバイスに応じて、表示する4つの画像から選択することです。したがって、基本的に4つの異なる画像をデザインする必要があります（ただし、ワイドスクリーン、ポートレート/ランドスケープモードなど、さまざまなフォーマット用にさらに多くの画像を開発できます）。

このことを念頭に置いて、これを知っておいてください。Androidで使用されるすべての単一解像度の画面を設計しない限り、画像は画面サイズに合わせて拡大されます。また、画像が基本的にグラデーションやぼかしでない限り、ストレッチすると望ましくない歪みが発生します。したがって、基本的に2つのオプションがあります。各画面サイズ/密度の組み合わせの画像を作成するか、4つの9パッチ画像を作成します。

最も難しい解決策は、解像度ごとに異なるスプラッシュ画面を設計することです。このページの最後にある表の解像度に従うことから始めることができます（さらにあります。例：960 x 720はここにリストされていません）。また、小さなテキストなど、画像に細部がある場合は、解像度ごとに複数の画面を設計する必要があります。たとえば、中程度の画面に表示されている480x800の画像は問題ないように見えるかもしれませんが、小さい画面（密度/ dpiが高い）では、ロゴが小さすぎたり、一部のテキストが読みにくくなる場合があります。

9パッチ画像

もう1つの解決策は、9パッチイメージを作成することです。これは基本的に画像の周囲の1ピクセルの透明な境界線であり、この境界線の上部と左側の領域に黒いピクセルを描くことにより、画像のどの部分を拡大できるかを定義できます。9パッチ画像がどのように機能するかについては詳しく説明しませんが、簡単に言うと、上部と左側の領域のマーキングに位置合わせされているピクセルが、画像をストレッチするために繰り返されるピクセルです。

いくつかの基本ルール

  1. これらの画像は、フォトショップ（または透明なpngを正確に作成できる画像編集ソフトウェア）で作成できます。
  2. 1ピクセルの境界線は完全に透明でなければなりません。
  3. 1ピクセルの透明な境界線は、上下左右だけでなく、画像全体に配置する必要があります。
  4. この領域には黒（＃000000）ピクセルしか描画できません。
  5. 上部と左側の境界線（画像の拡大を定義する）は、1ドット（1px x 1px）、2ドット（両方とも1px x 1px）、または1つの連続線（幅x 1pxまたは1px x高さ）のみを持つことができます。
  6. 2つのドットを使用することを選択した場合、画像は比例して拡大されます（したがって、各ドットは最終的な幅/高さに達するまで順番に拡大されます）
  7. 1pxの境界線は、目的のベースファイルの寸法に追加する必要があります。したがって、100x100の9パッチイメージには、実際には102x102（上下左右100x100 + 1px）が必要です。
  8. 9パッチ画像は* .9.pngで終わる必要があります

したがって、ロゴのどちらかの側（上部の境界）に1ドット、その上下（左側の境界）に1ドットを配置できます。これらのマークされた行と列だけがストレッチするピクセルになります。

例

これは9パッチの画像で、102x102px（最終的なサイズは100x100、アプリ用）です。

9パッチ画像、102x102px

次に、同じ画像を200％ズームします。

同じ画像、わかりやすくするために2倍に拡大

上下に1pxのマークがあり、どの行/列が展開されるかを示しています。

アプリ内のこの画像は100x100で次のようになります。

100x100にレンダリング

そして、これが460x140に拡張された場合、次のようになります。

460x140にレンダリング

考慮すべき最後の1つ。これらの画像は、モニター画面やほとんどの携帯電話では問題なく見えるかもしれませんが、デバイスの画像密度（dpi）が非常に高い場合、画像は小さすぎるように見えます。おそらく読みやすいですが、1920x1200の解像度のタブレットでは、画像は中央の非常に小さな正方形として表示されます。それで解決策は何ですか？それぞれが異なる密度セット用の4つの異なる9パッチランチャーイメージを設計します。縮小が発生しないようにするには、各密度カテゴリの共通解像度を最も低く設計する必要があります。9パッチはストレッチのみを考慮しているため、ここでは縮小は望ましくありません。縮小プロセスでは、小さなテキストやその他の要素が読みにくくなる可能性があります。

以下は、各密度カテゴリの最小で最も一般的な解像度のリストです。

  • xlarge（xhdpi）：640x960
  • 大（hdpi）：480x800
  • 中（mdpi）：320x480
  • 小（ldpi）：240x320

したがって、上記の解像度で4つのスプラッシュスクリーンを設計し、画像を拡大し、キャンバスの周りに1pxの透明な境界線を置き、どの行/列を伸縮可能にするかをマークします。これらの画像は密度カテゴリのすべてのデバイスで使用されるため、ldpi画像（240 x 320）は、画像密度が小さい（約120 dpi）特大のタブレットでは1024x600に拡大される可能性があることに注意してください。したがって、スプラッシュスクリーンに写真や複雑なグラフィックスが必要ない限り、9パッチがストレッチの最適なソリューションです（デザインを作成するときにこれらの制限に注意してください）。

繰り返しになりますが、このストレッチが発生しない唯一の方法は、解像度ごとに1つの画面を設計することです（または、高/低密度のデバイスで画像が小さすぎる/大きくなりすぎないようにする場合は、解像度と密度の組み合わせごとに1つ）、または引き伸ばさずに背景色が表示される画像は、引き伸ばされた場所に表示されます（Androidエンジンによってレンダリングされた特定の色は、カラープロファイルのため、フォトショップによってレンダリングされた同じ特定の色とは異なる場合があります）。

これが理にかなっているといいのですが。幸運を！

— ルーカスセロ
ソース
1
これで私の命を救ってくれました。この回答をどうもありがとう。
— theGrayFox 2013
7
実際に見つけたもの。9パッチ画像を使用する場合、サポートする最小画面よりも小さくする必要があります。なお、画像はスケールアップすることが表示されますが、クリッピングを起こし、収縮しない...そして、... fitXYに設定する必要があるように思われる
— ショーン・エイトケンに
コメントをありがとう、CleverCoder。問題を回避するためにどれだけ小さいのが理想的かについて詳しく説明できますか？幅と高さを2px小さくすれば十分だと思いますか？
— Lucas Cerro
1
「xlarge（xhdpi）：640x960」とおっしゃっていましたが、ドキュメントではxlargeは少なくとも960dp x 720dpであるため、xhdpi密度のxlarge画面は1920px x 1440pxである必要があります。密度とサイズは異なる概念です。
— fikr4n 2015年
1
@LucasCerro：最初の行で、そうでなければ素晴らしい回答を編集することを検討する必要があります。これは、回答が古く、Android 3.2以降、利用可能な画面幅に基づいて6つのグループがあることを示しています。
— イェンス
119

ポートレートモード

MDPIは320x480 dp = 320x480px（1x）

LDPIは0.75 x MDPI = 240x360px

HDPIは1.5 x MDPI = 480x720px

XHDPIは2 x MDPI = 640x960px

XXHDPIは3 x MDPI = 960x1440px

XXXHDPIは4 x MDPI = 1280x1920px

横長モード

MDPIは480x320 dp = 480x320px（1x）

LDPIは0.75 x MDPI = 360x240px

HDPIは1.5 x MDPI = 720x480px

XHDPIは2 x MDPI = 960x640px

XXHDPIは3 x MDPI = 1440x960px

XXXHDPIは4 x MDPI = 1920x1280px

編集：

2019年にこれを読んでいる場合は、スプラッシュスクリーンにLottieを使用することをお勧めします

— アジマルサリム
ソース
1
すごい！これを探していました
— Lion789
最も有用な解決策
— Farzad YZ
6
これらの値は正しくないようです。XXHDPIは1920x1080と想定されています。
— user2966445
はい！これが私が探していたものですありがとうございます！どうもありがとう！
— theHellyar 2017
タブレットサイズのplsはどうですか？
— Beking Jk
29

ポートレート

LDPI：200x320px

MDPI：320x480ピクセル

HDPI：480x800px

XHDPI：720px1280px

風景

LDPI：320x200ピクセル

MDPI：480x320px

HDPI：800x480ピクセル

XHDPI：1280x720px

— JRE.exe
ソース
2
物理的な画面サイズと解像度は独立した概念です。ピクセル単位の画像のサイズは、両方の積です。
— ヘンリー
1
XXHDPI、XXXHDPIのサイズを教えて
— hitesh141
この回答の値は、ここで提供される情報に比例していないようです：stackoverflow.com/a/19661363/1617737。受け入れられた答えは古いですが、正しい可能性が高いと思います。
— ban-geoengineering 2015年
12

PNGを使用するのはあまり良い考えではありません。実際には、パフォーマンスに関してはコストがかかります。Facebookの背景など、描画可能なXMLファイルを使用できます。

これにより、パフォーマンスをスムーズかつ高速化し、ロゴには.9パッチイメージを使用できます。

— ニシャント・シャー
ソース
10 
Density buckets

LDPI    120dpi    .75x
MDPI    160dpi    1x
HDPI    240dpi    1.5x
XHDPI   320dpi    2x
XXHDPI  480dpi    3x
XXXHDPI 640dpi    4x

px / dp = dpi / 160 dpi
— ゼロ
ソース
4

私の場合、style.xmlでリストドローアブルを使用しました。描画可能なレイヤーリストを使用すると、すべての画面サイズに対して1つのPNGが必要になります。

<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name="AppTheme" parent="android:Theme.Holo.Light.DarkActionBar">
    <item name="android:windowNoTitle">true</item>
    <item name="android:windowBackground">@drawable/flash_screen</item>
    <item name="android:windowTranslucentStatus" tools:ignore="NewApi">true</item>
</style>

ドローアブルフォルダーのflash_screen.xml。

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@android:color/white"></item>
    <item>
        <bitmap android:src="@drawable/background_noizi" android:gravity="center"></bitmap>
    </item>
</layer-list>

「background_noizi」は、ドローアブルフォルダー内のpngファイルです。これがお役に立てば幸いです。

— user3295573
ソース
背景画像が大きすぎる場合は拡大します
— ShadeToD '17
2

SplashScreenをAPI21からAPI23を含むすべてのAPIで見栄えよくする編集済みソリューション

APIs24 +のみをターゲットにしている場合は、次のようにxmlファイルで直接ベクトルドローアブルを縮小できます。

<vector xmlns:android="http://schemas.android.com/apk/res/android" xmlns:aapt="http://schemas.android.com/aapt"
android:viewportWidth="640"
android:viewportHeight="640"
android:width="240dp"
android:height="240dp">
<path
    android:pathData="M320.96 55.9L477.14 345L161.67 345L320.96 55.9Z"
    android:strokeColor="#292929"
    android:strokeWidth="24" />
</vector>

上記のコードでは、640x640のキャンバスに描画したドローアブルを240x240に再スケーリングしています。次に、スプ​​ラッシュスクリーンのドローアブルにそのように配置するだけで、うまく機能します。

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" android:opacity="opaque"
android:paddingBottom="20dp" android:paddingRight="20dp" android:paddingLeft="20dp" android:paddingTop="20dp">

<!-- The background color, preferably the same as your normal theme -->
<item>
    <shape>
        <size android:height="120dp" android:width="120dp"/>
        <solid android:color="@android:color/white"/>
    </shape>
</item>

<!-- Your product logo - 144dp color version of your app icon -->
<item
    android:drawable="@drawable/logo_vect"
    android:gravity="center">

</item>
</layer-list>

私のコードは実際には下の図の三角形のみを描画していますが、ここではこれで何ができるかがわかります。ビットマップを使用したときに得られたピクセル化されたエッジとは対照的に、最終的に解像度は素晴らしいです。そのため、ベクタードローアブルを必ず使用してください（専用のソフトウェアをダウンロードする手間をかけずに鉱山を作成するために使用していたvectrというサイトがあります）。

API21-22-23でも機能するように編集します

上記のソリューションはAPI24 +を実行するデバイスで機能しますが、API22を実行するデバイスにアプリをインストールした後、私は本当にがっかりしました。スプラッシュスクリーンが再びビュー全体を埋めようとしているように見え、たわごとのように見えました。私の眉毛を半日引き裂いた後、私はついに完全な意志力によって解決策を総当たりした。

スプラッシュスクリーンxml（例：splash_screen.xml）とまったく同じ名前の2番目のファイルを作成し、それをdrawable-v22およびdrawable-v21と呼ばれる2つのフォルダーに配置する必要があります。プロジェクトビューをAndroidからProjectに変更する必要があります）。これは、関連するデバイスがドローアブルフォルダーの-vXXサフィックスに対応するAPIを実行するたびに、これらのフォルダーに配置されたファイルにリダイレクトするように携帯電話に指示するのに役立ちます。このリンクを参照してください。これらのフォルダーに作成するsplash_screen.xmlファイルのLayer-listに次のコードを配置します。

<item>
<shape>
    <size android:height="120dp" android:width="120dp"/>
    <solid android:color="@android:color/white"/>
</shape>
</item>

<!-- Your product logo - 144dp color version of your app icon -->
<item android:gravity="center">
    <bitmap android:gravity="center"
        android:src="logo_vect"/>

</item>

これらはフォルダがどのように見えるかです

これらのAPIのいくつかの理由により、ドローアブルを機能させるためにビットマップでラップし、最終的な結果を同じに見えるようにする必要があります。問題は、splash_screen.xmlファイルの2番目のバージョンにより、23を超えるAPIを実行しているデバイスでスプラッシュスクリーンがまったく表示されなくなるため、アプローチを追加のドローアブルフォルダーで使用する必要があることです。また、 androidのデフォルトとして、splash_screen.xmlの最初のバージョンをdrawable-v24に追加します。これは、リソース用に見つけることができる最も近いdrawable-vXXフォルダーにデフォルトで設定されます。お役に立てれば

私のスプラッシュスクリーン

— quealegriamasalegre
ソース
0

Lucas Cerroからのこの回答に基づいて、回答のベースラインを使用して、Android docsの比率を使用して寸法を計算しました。これが他の誰かがこの投稿に役立つことを願っています！

  • xxxlarge（xxxhdpi）：1280x1920（4.0x）
  • xxlarge（xxhdpi）：960x1440（3.0x）
  • xlarge（xhdpi）：640x960（2.0x）
  • 大（hdpi）：480x800（1.5x）
  • 中（mdpi）：320x480（1.0xベースライン）
  • 小（ldpi）：240x320（0.75x） 
— ビクトリア・ゴンダ
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.