開発者コンソール
ログイン
ログイン
開発者コンソール

画面のレイアウトと解像度

画面のレイアウトと解像度

Fireタブレットは、さまざまな画面サイズ、ピクセル密度、縦横比で提供されています。各種のフォームファクターに対応するアプリを作成することは（特に別のタブレットやスマートフォンからアプリを移植する場合）、アプリ開発者にとって難しい問題です。このドキュメントでは、アプリでさまざまなFireタブレットの画面に対応するためのオプションと手法の概要について説明します。

アイコンの鮮明な外観の維持

Androidとの共通化のため、Fire OS 5とFire OS 6のランチャーはAPK内で指定したアプリアイコンを表示します。この点が以前のバージョンのFire OSとは異なります。以前は、アプリを申請するときに開発者ポータルにアップロードしたアプリアイコンがランチャーで使用されていました。必要なアイコンの解像度と寸法の詳細については、ランチャーアイコンのガイドラインを参照してください。

アプリを実行するさまざまなデバイスでアイコンをテストします。ブランドを積極的に示す明確かつ識別可能な画像をアイコンにするようにします。

以下の動画では、Fireタブレットでのアプリの表示を管理する方法について説明しています。動画で説明されている内容の詳細については、このトピックのフレキシブルレイアウトの使用、さまざまな画面に合う複数のレイアウトの用意、複数のグラフィックリソースの用意を参照してください。

フレキシブルレイアウトの使用

特定のデバイスの画面に合わせてアプリを設計すると、画面サイズ、縦横比、ピクセル密度が異なるデバイスで実行したときに、外観と動作が期待どおりにならない可能性があります。具体的には次のとおりです。

  • 特定の画面サイズのデバイスに合わせて設計されたテキストや画像は、異なる画面サイズでは適切にスケーリングされなかったり、スケーリングしたときにゆがんで見えたり、ブロックノイズが発生したりする場合があります。
  • テキストや画像が特定の縦横比のデバイスに合わせて設計された場合、異なる縦横比では、画面要素がゆがんで見えたりオーバーラップしたりすることがあります。
  • 特定の画面密度のデバイスに合わせて設計されたテキストや画像は、要素が期待したよりも大きくまたは小さく見え、アプリの外観と動作の両方に影響を及ぼす場合があります。

これらの問題に対処するには、アプリがフレキシブルレイアウトを使用するように設計します。フレキシブルレイアウトを使用すると、アプリのユーザーインターフェイス（UI）がランタイム時にさまざまな画面サイズ、密度、縦横比に合わせて動的にスケーリングします。

Androidに関する次のベストプラクティスに従って、各種の画面に対応するアプリを設計してください。

  • 絶対的なピクセルではなく、密度非依存ピクセル（dp）を使用してレイアウトを作成する。dpの単位は、160PPI（mdpi）のデバイスで1ピクセルにつき1dpが基準ですが、画面の密度が高いデバイスではランタイム時に自動的にスケーリングされます。また、テキストにはスケール非依存ピクセル（sp）を使用します。詳細については、密度非依存ピクセルを使用するを参照してください。
  • AndroidのConstraintLayoutクラスを使用してUIを構築し、要素の配置およびサイズを他の要素を基準に相対的に設定できるようにする。AbsoluteLayoutはAndroid 1.5（APIレベル3）で廃止されているため、使用しないでください。絶対レイアウトは各種の画面に合わせてスケーリングされません。詳細については、Constraint Layoutを使用する を参照してください。
  • XMLレイアウト要素内で、幅と高さを明示的に指定しない。Androidの属性値wrap_contentおよびmatch_parentを使用して、コンテンツと親に基づいて要素のサイズを動的に設定します。詳細については、"wrap_content"と"match_parent"を使用するを参照してください。

さらに、小さな画面から大きな画面にアプリを移植するときには、アプリのユーザーインターフェイスをすべて再設計することを検討してください。大きな画面サイズには、より多くのコンテンツを表示したり、縦方向モードと横方向モードをより有効に活用できるなどの利点があります。

さまざまな画面に合う複数のレイアウトの用意

各種の画面で優れた外観のアプリを提供するもう1つの方法は、さまざまな画面設定に合わせて複数のXMLレイアウトリソースを定義することです。ランタイム時にデバイスが設定を報告し、Androidがその画面に合った適切なレイアウトリソースを選択します。複数のレイアウトリソースセットを定義すると、さまざまな画面設定に合わせて柔軟に適応できるインターフェイスを備えた1つのアプリを作成できます。

画面設定は、次のように定義できます。

  • 一般的な画面サイズ。Androidにはsmall、medium、large、xlargeの4つの汎用サイズ修飾子が用意されています。すべてのFireタブレットはlargeまたはxlargeのデバイスと見なされます。
  • 最小画面幅。Android 3.2（Honeycomb）で追加された最小幅修飾子は、タブレットの短い方の幅をdp単位で定義します。この修飾子はswXXXdpの形式で表され、XXXは指定された幅を示します。指定の画面タイプをより具体的にターゲット設定できるため、汎用画面サイズ修飾子よりも最小幅修飾子を使用することをお勧めします。最小幅修飾子は、Android 2.3.3をベースとするKindle Fire（第1世代／2011）以外のすべてのFireタブレットが対応しています。これらの修飾子の詳細については、最小幅の修飾子を使用するを参照してください。

各種の画面に合わせて複数のレイアウトを定義するには、res/ディレクトリ内にレイアウトディレクトリを作成し、汎用サイズ修飾子と最小幅修飾子のどちらであるかを示すサフィックスをディレクトリ名に追加します。これらのディレクトリに、フォームファクターごとのレイアウトXMLファイルを格納します。たとえば、次の2つのディレクトリには、デフォルトレイアウトと画面サイズが「large」のカスタムレイアウトを作成できます。

res/layout res/layout-large

最小幅修飾子のレイアウトディレクトリも同じ規則に従います。最小幅修飾子はdp単位で、デバイスの密度に合わせてスケーリングされます。たとえば、Kindle Fire HDX 7"（第3世代／2013）の物理的なピクセル幅は1200ピクセルです。そのxhdpiの密度修飾子は、基準倍率2.0と同等です。dp単位では幅が2.0でスケーリング（除算）され、最小幅修飾子はsw600dpになります。Kindle Fire HDX 7"（または類似デバイス）に最適化されたレイアウトには、次のディレクトリを使用します。

res/layout-sw600dp

次の表は、各Fireタブレットの実際の画面解像度、汎用サイズ修飾子、基準倍率、最小幅修飾子を示します。Fireタブレットの画面サイズの詳細については、Fireタブレットのデバイス仕様：概要を参照してください。

タブレット 汎用サイズ修飾子 実際の画面寸法 基準倍率 汎用密度 実際のピクセル密度 最小幅修飾子
Fire 7（2019） large 1024px × 600px 1.0 mdpi 171 sw600dp
Fire HD 8（2018） large 1280px × 800px 1.33 tvdpi 189 sw600dp
Fire HD 10（2017） xlarge 1920px × 1200px ??? hdpi 223 sw800dp
Fire 7（2017） large 1024px × 600px 1.0 mdpi 171 sw600dp
Fire HD 8（2017） large 1280px × 800px 1.33 tvdpi 189 sw600dp
Fire HD 8（2016） large 1280px × 800px 1.33 tvdpi 189 sw600dp
Fire HD 10（2015） xlarge 1280px × 800px 1.0 mdpi 149 sw800dp
Fire HD 8（2015） large 1280px × 800px 1.33 tvdpi 189 sw600dp
Fire HD（2015） large 1024px × 600px 1.0 mdpi 171 sw600dp
Fire HDX 8.9（2014） xlarge 2560px × 1600px 2.0 xhdpi 339 sw800dp
Fire HD 7（2014） large 1280px × 800px 1.5 hdpi 216 sw533dp
Fire HD 6（2014） large 1280px × 800px 1.5 hdpi 252 sw511dp
Kindle Fire HDX 8.9"（2013） xlarge 2560px × 1600px 2.0 xhdpi 339 sw800dp
Kindle Fire HDX 7"（2013） large 1920px × 1200px 2.0 xhdpi 323 sw600dp
Kindle Fire HD 7"（2013） large 1280px × 800px 1.5 hdpi 216 sw533dp
Kindle Fire HD 8.9"（2012） xlarge 1920px × 1200px 1.5 hdpi 254 sw800dp
Kindle Fire HD 7"（2012） large 1280px × 800px 1.5 hdpi 216 sw533dp
Kindle Fire（2012） large 1024px × 600px 1.0 mdpi 169 sw600dp
Kindle Fire（2011） large 1024px × 600px 1.0 mdpi 169 該当なし

Kindle Fire（第1世代／2011）は古いバージョンのAndroidをベースとしているため、最小幅修飾子は使用できません。デフォルトのlayoutまたはlayout-largeを使用してこのデバイスのレイアウトを指定してください。

複数のグラフィックリソースの用意

ビットマップドローワブル（アイコン、背景画像、その他グラフィックなど）を使用すると、さまざまな密度や縦横比の画面に対応するようにアプリの外観を管理する場合に、状況が特に複雑になります。1つの画面サイズまたは1つの画面タイプに対応する単一のビットマップリソースセットを指定した場合、Androidはそれらのグラフィックをデバイスに合わせてスケーリングします。ただし、最適とは言えない結果になる可能性があります。自動スケーリングの結果、グラフィックにゆがみ、ぼやけ、ギザギザが発生したり、テキストが読めなくなったりする可能性があります。

レイアウトと同様に、res/ディレクトリ内にグラフィックリソースの複数のドローワブルディレクトリを作成し、それらの設定に合わせてグラフィックを最適化できます。レイアウトと同様に、これらのドローワブルディレクトリにも、汎用修飾子および最小幅修飾子に応じた名前を付けることができます（例：res/drawable-large）。さらに、Androidには画面の密度（1インチあたりのドット数）を指定する修飾子が用意されており、ビットマップを使用する場合に便利です。

画面の密度については、Androidにはldpi、mdpi、hdpi、xhdpi、tvdpi（low、medium、high、extra high、TV）の5つの修飾子が用意されています。たとえば、デフォルトのドローワブルセットと高密度の画面用に最適化されたドローワブルの両方を指定するには、次のディレクトリ名を使用します。

res/drawable res/drawable-hdpi

また、ドローワブルやレイアウトの密度修飾子を、次のようにサイズ修飾子や最小幅修飾子と組み合わせることもできます。

res/layout-large-hdpi res/drawable-sw800dp-hdpi

レイアウトや画面サイズと同様に、ランタイム時にデバイスから報告される設定に基づいて、Androidが適切なリソースセットを選択します。

Androidの汎用密度修飾子は類似のデバイスをグループ化したものです。これを使用すると、同じクラスのデバイスのレイアウトやグラフィックを作成しやすくなります。ただし、密度修飾子が表すのはおおよその密度です。mdpiは160dpi、hdpiは240dpiですが、各デバイスの実際の密度はわずかに異なる場合があることにご注意ください。これらの汎用密度を使用しつつ、正確な物理寸法のユーザーインターフェイス要素を構築する場合でも、予期しない結果になる可能性もあります。たとえば、レイアウト要素のサイズや画面上の配置が間違っている場合があります。互換性を保証するために、必ず具体的なデバイスでアプリをテストしてください。汎用密度は、次のDPI値に対応しています。

  • mdpi： 160
  • hdpi： 240
  • xhdpi： 320
  • tvdpi： 213

マニフェストにおける画面サイズのサポート宣言

前述のガイドラインに従ってフレキシブルレイアウトを定義し、代替のレイアウトリソースやグラフィックリソースを指定した場合でも、Androidマニフェストで該当する要素を使用して、サポートしている画面サイズを宣言する必要があります。

たとえば、アプリがタブレット（「large」と「xlarge」の画面）にのみ対応し、最小幅が533dpであることを明示的に示すには、次のコードを使用します。

   <supports-screens
	android:smallScreens="false"
	android:normalScreens="false"
	android:largeScreens="true"
	android:xlargeScreens="true"
	android:requiresSmallestWidthDp="533"/>

注： リソースディレクトリの最小幅修飾子と同様に、requiresSmallestWidthDp属性はAndroid 3.2以上でのみ使用できます。このため、Kindle Fire（第1世代）では使用できません。

この要素の詳細については、<supports-screens>を参照してください。

2画面表示機能（マルチウィンドウ）のサポート宣言

2画面表示モード（マルチウィンドウ）は、2つのアプリを左右または上下に並べて、同時に実行できる機能です。これにより、動画を視聴しながらEメールを確認することも可能になります。

2画面表示モードにおける時刻の表示と天気の確認
2画面表示モードにおける時刻の表示と天気の確認

2画面表示機能を有効／無効にする方法

2画面表示を有効または無効にするには、マニフェストの<activity>または<application>要素（AndroidManifest.xml）に次の属性を設定します。

android:resizeableActivity=["true" | "false"]
  • true： アクティビティを2画面表示モードとフリーフォームモードで起動できます。
  • false： アクティビティは2画面表示モードをサポートしません。ユーザーが2画面表示モードでアクティビティを起動しようとすると、アクティビティは全画面モードで表示されます。

Fire OS 7（API 28）以降では、この値はデフォルトで「true」に設定されます。

許容される最小サイズの指定方法など、構成に関する詳細については、マルチウィンドウのサポートを参照してください。

全画面モードがレイアウトに及ぼす影響を把握する

Fireタブレットで、アプリは次の3つの画面モードで動作します。

  • 標準モード（画面にステータスバーとソフトキーバーが表示される)。
  • 全画面モード（ステータスバーを非表示にし、ソフトキーバーを最小化する)。小さな「全画面のハンドル」のみが表示されます。全画面のハンドルをタップまたは画面の下から上にスワイプすることで両方のツールバーが表示されます。以下に、全画面モードのフラグの例を示します。
@Override
    protected void onCreate(final Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        getWindow().addFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN);
    }
  • スーパー全画面モード（全画面のハンドルも非表示になる。Android 4.0、Ice Cream Sandwich、API 14のみ）。画面にツールバーは表示されません。全画面モードと同様に、画面をタップすると両方のツールバーが表示されます。以下に、スーパー全画面モードのフラグの例を示します。
@Override
    protected void onCreate(final Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        getWindow().addFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN);

        // このフラグはAPIレベル14以降でのみ使用可。
        getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_HIDE_NAVIGATION);
    }

ステータスバーとソフトキーバーの表示は、特に全画面モードでアプリを設計する場合に、レイアウトにさまざまな影響を与える可能性があります。具体的には次のとおりです。

  • 標準モードでは、ステータスバーとソフトキーバーにより、バーの高さまたは幅の分だけレイアウトの位置がずれる。レイアウトのサイズについて（View.getWidth()またはView.getHeight()）でクエリを実行した場合、レイアウトでは両方のツールバーが考慮されるため、これらの値は全体的な表示よりも小さくなります。
  • 全画面モードでは、全画面のハンドルがレイアウトの上に描画される。スーパー全画面モードでは、ツールバーとハンドルが表示されません。
  • 両方の全画面モードで、画面をタップしてツールバーを表示すると、ステータスバーとソフトキーバーの両方がレイアウトの上に描画され、その下にあるすべての要素を覆い隠す。レイアウトのサイズは変更されません。この場合、レイアウトの寸法に対してクエリを実行すると、Fireタブレットは画面の全体的な寸法を返します。

アプリでは、全画面モードでツールバーが表示されるかどうかは制御できません。その動作はユーザーが行います。アプリのレイアウトが、ツールバーが表示される場合も含め、常に全画面モードで表示されることを前提としている場合、ツールバーのサイズを考慮するようにレイアウトを調整してください。各Kindle Fireタブレットのステータスバーとソフトキーバーのサイズは、ユーザーエクスペリエンスの仕様で確認できます。

Last updated: 2021年4月27日