Android 15 でのエッジツーエッジの適用の処理

1. 始める前に

SociaLite は、ソーシャルネットワークアプリでよく見られる機能を実装するために Android プラットフォームの各種 API を使用する方法を示しています。さまざまな Jetpack API を使用して複雑な機能を実現することで、多くのデバイスで確実に動作し、必要なコードの量が少なくなるようにします。

この Codelab では、Android 15 でのエッジツーエッジの適用に対応した SociaLite アプリを作成するプロセスを説明します。また、アプリでのエッジツーエッジの適用を下位互換性がある形で実装します。エッジツーエッジの適用に対応した SociaLite は次のようになります。見た目はデバイスとナビゲーションモードによって変化します。


3 ボタンナビゲーションの SociaLite	ジェスチャーナビゲーションの SociaLite

大画面デバイスでの SociaLite アプリ。

大画面デバイスでの SociaLite

前提条件

Kotlin の基礎知識があること。
Android Studio の設定の Codelab を完了していること。または、Android Studio の利用と、Android 15 を実行するエミュレータまたは実機でのアプリのテストに慣れていること。

演習内容

Android 15 でのエッジツーエッジに関する変更を処理する方法。
下位互換性がある形でアプリをエッジツーエッジに対応させる方法。

必要なもの

Android Studio の最新バージョン。
Android 15 ベータ 1 以降を実行するテストデバイスまたはエミュレータ。
Android 15 ベータ 1 以降の SDK。

2. スターターコードを取得する

GitHub からスターターコードをダウンロードします。

または、リポジトリをクローンして codelab_improve_android_experience_2024 ブランチをチェックアウトします。

$ git clone git@github.com:android/socialite.git
$ cd socialite
$ git checkout codelab_improve_android_experience_2024

Android Studio で SociaLite を開き、Android 15 を実行するデバイスまたはエミュレータで SociaLite アプリを実行します。次のいずれかの画面に似たものが表示されます:


3 ボタンナビゲーション	ジェスチャーナビゲーション

大画面デバイスでの SociaLite。

大画面

[チャット] ページで、チャットの 1 つを選択します。たとえば犬とのチャットを選択します。


3 ボタンナビゲーションの犬とのチャットメッセージ	ジェスチャーナビゲーションの犬とのチャットメッセージ

3. Android 15 でアプリをエッジツーエッジ対応にする

エッジツーエッジとは

アプリがシステムバーの背後に描画を行うことで、洗練されたユーザーエクスペリエンスを提供し、表示スペースを最大限に活用できます。これをエッジツーエッジと呼びます。

アプリがエッジツーエッジに切り替わる様子の GIF 画像

Android 15 でのエッジツーエッジに関する変更を処理する方法

Android 15 以前では、アプリのデフォルトの UI は、ステータスバーやナビゲーションバーなどのシステムバーの領域を避けてレイアウトされるようになっていました。アプリはオプトインしてエッジツーエッジになっていました。アプリによって、オプトインは簡単であったり煩雑であったりしました。

Android 15 以降では、アプリはデフォルトでエッジツーエッジになります。デフォルトで以下のようになります:

3 ボタンナビゲーションバーは半透明です。
ジェスチャーナビゲーションバーは透明です。
ステータスバーは透明です。
コンテンツは、インセットかパディングが適用されない限り、ナビゲーションバー、ステータスバー、キャプションバーなどのシステムバーの背後に描画されます。

この変更により、アプリの品質を向上させる手段であるエッジツーエッジが見過ごされることがなくなります。また、アプリをエッジツーエッジに対応させるために必要な作業が少なくなります。ただし、この変更はアプリに悪影響を及ぼす可能性もあります。ターゲットの SDK を Android 15 にアップグレードすると、悪影響の例 2 つを SociaLite で確認できます。

ターゲットの SDK の値を Android 15 に変更する

SociaLite アプリの build.gradle ファイルで、ターゲットの SDK とコンパイル SDK のバージョンを Android 15 または VanillaIceCream に変更します。

Android 15 の安定版がリリースされる前にこの Codelab を受講している場合、コードは次のようになります:

android {
    namespace = "com.google.android.samples.socialite"
    compileSdkPreview = "VanillaIceCream"

    defaultConfig {
        applicationId = "com.google.android.samples.socialite"
        minSdk = 21
        targetSdkPreview = "VanillaIceCream"
        ...
    }
...
}

Android 15 の安定版がリリースされた後にこの Codelab を受講している場合、コードは次のようになります:

android {
    namespace = "com.google.android.samples.socialite"
    compileSdk = 35

    defaultConfig {
        applicationId = "com.google.android.samples.socialite"
        minSdk = 21
        targetSdk = 35
        ...
    }
...
}

SociaLite を再ビルドして、次の問題があることを確認します:

3 ボタンナビゲーションの背景保護がナビゲーションバーに適合しません。ジェスチャーナビゲーション用の [チャット] 画面は介入なしでエッジツーエッジで表示されます。ただし、3 ボタンナビゲーションの背景保護があり、これを削除する必要があります。


3 ボタンナビゲーションのチャット画面	ジェスチャーナビゲーションのチャット画面

UI が遮られます。チャットの下部の UI 要素がナビゲーションバーによって遮られます。これは 3 ボタンナビゲーションで最も明らかです。


3 ボタンナビゲーションの犬とのチャットメッセージ	ジェスチャーナビゲーションの犬とのチャットメッセージ

SociaLite を修正する

デフォルトの 3 ボタンナビゲーションの背景保護を削除する手順は次のとおりです:

MainActivity.kt ファイルで、window.isNavigationBarContrastEnforced プロパティを false に設定して、デフォルトの背景保護を削除します。

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        installSplashScreen()
        super.onCreate(savedInstanceState)
        setContent {
            // Add this block:
            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
                window.isNavigationBarContrastEnforced = false
            }
        }
    }
    ...
}

window.isNavigationBarContrastEnforced は、完全に透明な背景がリクエストされたときに、ナビゲーションバーに十分なコントラストがあることを保証します。この属性を false に設定すると、実質的に 3 ボタンナビゲーションの背景を透明に設定することになります。window.isNavigationBarContrastEnforced は 3 ボタンナビゲーションにのみ影響します。ジェスチャーナビゲーションには影響しません。

アプリを再実行し、Android 15 デバイスでチャットの 1 つを表示します。[タイムライン]、[チャット]、[設定] の画面はいずれもエッジツーエッジで表示されます。アプリの [タイムライン]、[チャット]、[設定] ボタンから NavigationBar を表示すると、システムの透明な 3 ボタンナビゲーションバーの背後に描画されます。


縞模様が削除された [チャット] 画面	ジェスチャーナビゲーションには変化なし

ただし、チャットの InputBar は依然としてシステムバーによって遮られています。こんの問題を解決するには、インセットを適切に処理する必要があります。


3 ボタンナビゲーションでの犬のチャット。下部の入力フィールドがシステムのナビゲーションバーによって遮られています。	ジェスチャーナビゲーションでの犬のチャット。下部の入力フィールドがシステムのナビゲーションバーによって遮られています。

SociaLite では InputBar が隠れています。実際には、回転して横表示に切り替えた場合や、大画面デバイスを使用している場合に、上下左右の要素が隠れる場合があります。これらのユースケースすべてでインセットをどのように処理するか、考慮する必要があります。SociaLite では、InputBar のタップ可能なコンテンツを上に移動させるために、パディングを適用します。

UI が遮られる問題を解決するためにインセットを適用する手順は次のとおりです:

ui/chat/ChatScreen.kt ファイルに移動して、178 行目あたりにある ChatContent コンポーザブルを探します。ここにはチャット画面の UI が含まれています。ChatContent は Scaffold を利用して UI を簡単に構築しています。デフォルトでは、システムバーの重なり順や、Scaffold のパディングの値（innerPadding パラメータ）を使用して消費できるインセットなど、Scaffold はシステム UI についての情報を提供します。Scaffold の innerPadding を使用して、InputBar にパディングを追加します。
ChatContent の 214 行目あたりで InputBar を探します。これは、ユーザーがメッセージを書くための UI を作成する、カスタムのコンポーザブルです。プレビューは次のようになります。

PreviewInputBar。

InputBar は contentPadding を受け取り、それを Row コンポーザブルのパディングとして適用します。このコンポーザブルには残りの UI が含まれています。パディングは Row コンポーザブルのすべての辺に適用されます。この動作に関する記述は 432 行目あたりにあります。参考に、InputBar コンポーザブルのコードを挙げます（このコードを追加しないでください）:

// Don't add this code because it's only for reference.
@Composable
private fun InputBar(
    contentPadding: PaddingValues,
    ...,
) {
    Surface(...) {
        Row(
            modifier = Modifier
                .padding(contentPadding)
            ...
        ) {
            IconButton(...) { ... } // take picture
            IconButton(...) { ... } // attach picture
            TextField(...) // write message
            FilledIconButton(...){ ... } // send message
            }
        }
    }
}

ChatContent 内の InputBar に戻り、contentPadding を変更して、システムバーのインセットを消費するようにします。これは 220 行目あたりにあります。

InputBar(
    ...
    contentPadding = innerPadding, //Add this line.
    // contentPadding = PaddingValues(0.dp), // Remove this line.
    ...
 )

Android 15 デバイスでアプリを再実行します。


インセットが正しく適用されていない 3 ボタンナビゲーションでの犬のチャット。	インセットが正しく適用されていないジェスチャーナビゲーションでの犬のチャット。

下部のパディングが適用され、ボタンがシステムバーによって遮られなくなりました。しかし、上にもパディングが適用されています。上のパディングは TopAppBar とシステムバーの重なり順にもおよびます。Scaffold はその内容にパディングの値を渡すので、上部のアプリバーとシステムバーを避けることができます。

上のパディングを修正するために、innerPadding PaddingValues のコピーを作成して、上のパディングを 0.dp に設定し、変更したコピーを contentPadding に渡します。

InputBar(
    ...
    contentPadding = innerPadding.copy(layoutDirection, top = 0.dp), //Add this line.
    // contentPadding = innerPadding, // Remove this line.
    ...
 )

Android 15 デバイスでアプリを再実行します。


インセットが正しく適用された 3 ボタンナビゲーションでの犬のチャット。	インセットが正しく適用されたジェスチャーナビゲーションでの犬のチャット。

お疲れさまでした。SociaLite を Android 15 プラットフォームでのエッジツーエッジに関する変更に対応させることができました。次に、SociaLite を下位互換性がある形でエッジツーエッジに対応させる方法を学びます。

4. SociaLite を下位互換性がある形でエッジツーエッジに対応させる

SociaLite は Android 15 ではエッジツーエッジに対応しましたが、古い Android デバイスではまだエッジツーエッジに対応していません。古い Android デバイスで SociaLite をエッジツーエッジに対応させるために、MainActivity.kt ファイルでコンテンツを設定する前に enableEdgeToEdge を呼び出します。

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        installSplashScreen()
        enableEdgeToEdge() // Add this line.
        window.isNavigationBarContrastEnforced = false
        super.onCreate(savedInstanceState)
        setContent {... }
    }
}

enableEdgeToEdge のインポートは import androidx.activity.enableEdgeToEdge です。依存関係は AndroidX Activity 1.8.0 以降です。

下位互換性がある形でアプリをエッジツーエッジに対応させる方法とインセットを処理する方法について詳しくは、以下のガイドをご覧ください。

Compose でのウィンドウインセット
アプリでコンテンツをエッジツーエッジで表示する

このパスウェイでのエッジツーエッジの適用に関する説明は以上です。次のセクションはオプションです。そちらでは、アプリによっては該当する可能性がある、エッジツーエッジに関する考慮事項について説明します。

5. オプション: エッジツーエッジに関する追加の考慮事項

アーキテクチャ間でのインセットの処理

コンポーネント

SociaLite のコンポーネントの多くは、ターゲットの SDK の値を変更した後に変化しませんでした。SociaLite はベストプラクティスに沿って構築されているため、このプラットフォームの変更を簡単に行うことができます。ベストプラクティスの一部を次に示します:

マテリアルデザイン 3 のコンポーネントを使用する（androidx.compose.material3）。TopAppBar、BottomAppBar、NavigationBar などがこれに該当します。これらはインセットを自動的に適用します。
アプリが Compose でマテリアルデザイン 2 のコンポーネント（androidx.compose.material）を使用している場合、コンポーネントはインセットを自動的には処理しません。ただし、インセットにアクセスして手動で適用することはできます。androidx.compose.material 1.6.0 以降では、windowInsets パラメータを使用して、BottomAppBar、TopAppBar、BottomNavigation、NavigationRail にインセットを手動で適用します。同様に、Scaffold には contentWindowInsets パラメータを使用します。別の方法としては、インセットをパディングとして手動で設定することもできます。
アプリでビューとマテリアルコンポーネント（com.google.android.material）を使用する場合、ビューベースのマテリアルコンポーネントの多く（BottomNavigationView、BottomAppBar、NavigationRailView、NavigationView など）はインセットを処理します。追加の作業は不要です。ただし、AppBarLayout を使用する場合は android:fitsSystemWindows="true" を追加する必要があります。
アプリがビューと BottomSheet、SideSheet、またはカスタムコンテナを使用する場合、ViewCompat.setOnApplyWindowInsetsListener を使用してパディングを適用します。RecyclerView については、このリスナーを使用してパディングを適用して、さらに clipToPadding="false" を追加します。
複雑な UI に対しては、Surface ではなく Scaffold（または NavigationSuiteScaffold あるいは ListDetailPaneScaffold）を使用します。Scaffold を使用すると、TopAppBar、BottomAppBar、NavigationBar、NavigationRail を簡単に配置できます。

コンテンツをスクロールする

アプリにリストがある場合、Android 15 での変更に伴い、リストの最後のアイテムがシステムのナビゲーションバーによって遮られることがあります。

3 ボタンナビゲーションでリストの最後のアイテムが遮られているアプリ。

3 ボタンナビゲーションでリストの最後のアイテムが遮られている例です。

Compose でコンテンツをスクロールする

TextField を使っている場合を除き、Compose で LazyColumn の contentPadding を使用して、最後のアイテムにスペースを追加します:

Scaffold { innerPadding ->
    LazyColumn(
        contentPadding = innerPadding
    ) {
        // Content that does not contain TextField
    }
}

3 ボタンナビゲーションでリストの最後のアイテムが遮られていないアプリ。

3 ボタンナビゲーションでリストの最後のアイテムが遮られていない例です。

TextField については、LazyColumn で Spacer を使用して最後の TextField を描画します。詳しくは、インセットの消費をご覧ください。

LazyColumn(
    Modifier.imePadding()
) {
    // Content with TextField
    item {
        Spacer(
            Modifier.windowInsetsBottomHeight(
                WindowInsets.systemBars
            )
        )
    }
}

ビューでコンテンツをスクロールする

RecyclerView または NestedScrollView には、android:clipToPadding="false" を追加します。

<androidx.recyclerview.widget.RecyclerView
    android:id="@+id/recycler"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:clipToPadding="false"
    app:layoutManager="LinearLayoutManager" />

setOnApplyWindowInsetsListener を使用して、ウィンドウインセットから左、右、下のパディングを提供します:

ViewCompat.setOnApplyWindowInsetsListener(binding.recycler) { v, insets ->
    val i = insets.getInsets(
        WindowInsetsCompat.Type.systemBars() + WindowInsetsCompat.Type.displayCutout()
    )
    v.updatePadding(
        left = i.left,
        right = i.right,
        bottom = i.bottom + bottomPadding,
    )
    WindowInsetsCompat.CONSUMED
}

LAYOUT_IN_DISPLAY_CUTOUT_MODE_ALWAYS を使用する

ターゲットの SDK が 35 以前の場合、SociaLite は横向きではこのように表示されました。左端には、カメラカットアウトを考慮した大きな白いボックスが表示されました。3 ボタンナビゲーションでは、ボタンは右側にあります。

横向きの SociaLite アプリ。

ターゲットの SDK が 35 以降の場合、SociaLite はこのように表示されます。左端のカメラカットアウトを考慮した大きな白いボックスはなくなりました。この効果を実現するために、Android は LAYOUT_IN_DISPLAY_CUTOUT_MODE_ALWAYS を自動的に設定します。横向きの SociaLite アプリ。

アプリによっては、インセットをここで処理できます。

SociaLite の場合は、次の手順を行います:

ui/ContactRow.kt ファイルで Row コンポーザブルを見つけます。
ディスプレイカットアウトを考慮してパディングを変更します。

@Composable
fun ChatRow(
   chat: ChatDetail,
   onClick: (() -> Unit)?,
   modifier: Modifier = Modifier,
) {
   // Add layoutDirection, displayCutout, startPadding, and endPadding.
   val layoutDirection = LocalLayoutDirection.current
   val displayCutout = WindowInsets.displayCutout.asPaddingValues()
   val startPadding = displayCutout.calculateStartPadding(layoutDirection)
   val endPadding = displayCutout.calculateEndPadding(layoutDirection)
   Row(
       modifier = modifier
           ...
           // .padding(16.dp) // Remove this line.
           // Add this block:
           .padding(
               PaddingValues(
                   top = 16.dp,
                   bottom = 16.dp,
                   // Ensure content is not occluded by display cutouts
                   // when rotating the device.
                   start = startPadding.coerceAtLeast(16.dp),
                   end = endPadding.coerceAtLeast(16.dp)
               )
           ),
       ...
   ) { ... }

ディスプレイカットアウトを処理した SociaLite はこのように表示されます:

横向きの SociaLite アプリ。

[ディスプレイカットアウト] の下の [開発者向けオプション] で、ディスプレイカットアウトのさまざまな設定をテストできます。

アプリに非フローティングウィンドウ（アクティビティなど）があり、それが LAYOUT_IN_DISPLAY_CUTOUT_MODE_DEFAULT、LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER、または LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES を使用している場合、Android 15 ベータ 2 以降では、Android はこれらのカットアウトモードが LAYOUT_IN_DISPLAY_CUTOUT_MODE_ALWAYS であると解釈します。以前の Android 15 ベータ 1 では、アプリはクラッシュしました。

システムバーの一種であるキャプションバー

キャプションバーもシステムバーの一種です。キャプションバーは、上部のタイトルバーなど、フリーフォームウィンドウのシステム UI ウィンドウの装飾を説明します。Android Studio のデスクトップエミュレータ内でキャプションバーを表示できます。以降のスクリーンショットでは、キャプションバーはアプリの上部にあります。

キャプションバーを表示しているエミュレータ。

Compose では、Scaffold の PaddingValues、safeContent、safeDrawing、または組み込みの WindowInsets.systemBars を使用している場合、アプリは想定どおりに表示されます。ただし、statusBar でインセットを処理している場合、アプリのコンテンツが想定どおりに表示されない可能性があります。これは、ステータスバーがキャプションバーを考慮しないためです。

ビューでは、WindowInsetsCompat.systemBars を使用してインセットを手動で処理している場合、アプリは想定どおりに表示されます。WindowInsetsCompat.statusBars を使用してインセットを手動で処理している場合、アプリは想定どおりに表示されない可能性があります。これは、ステータスバーはキャプションバーではないためです。

イマーシブモードのアプリ

イマーシブなアプリはすでにエッジツーエッジになっているため、イマーシブモードの画面は、Android 15 でのエッジツーエッジの適用からほとんど影響を受けません。

システムバーを保護する

アプリのジェスチャーナビゲーションでは透明なバー、3 ボタンナビゲーションでは半透明または不透明のバーを使いたい場合があるかもしれません。

Android 15 では、半透明の 3 ボタンナビゲーションがデフォルトです。これは、プラットフォームで window.isNavigationBarContrastEnforced プロパティが true に設定されるためです。ジェスチャーナビゲーションは透明なままです。

3 ボタンナビゲーションのアプリ。

3 ボタンナビゲーションはデフォルトで半透明です。

一般には半透明の 3 ボタンナビゲーションで十分です。ただし、場合によってはアプリに不透明の 3 ボタンナビゲーションが必要です。まず、window.isNavigationBarContrastEnforced プロパティを false に設定します。次に、ビューには WindowInsetsCompat.tappableElement、Compose には WindowInsets.tappableElement を使用します。これらが 0 の場合、ユーザーはジェスチャーナビゲーションを使用しています。0 でない場合は、ユーザーは 3 ボタンナビゲーションを使用しています。ユーザーが 3 ボタンナビゲーションを使用している場合は、ナビゲーションバーの背後にビューまたはボックスを描画します。Compose の例はこのようになります:

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            window.isNavigationBarContrastEnforced = false
            MyTheme {
                Surface(...) {
                    MyContent(...)
                    ProtectNavigationBar()
                }
            }
        }
    }
}

// Use only if required.
@Composable
fun ProtectNavigationBar(modifier: Modifier = Modifier) {
   val density = LocalDensity.current
   val tappableElement = WindowInsets.tappableElement
   val bottomPixels = tappableElement.getBottom(density)
   val usingTappableBars = remember(bottomPixels) {
       bottomPixels != 0
   }
   val barHeight = remember(bottomPixels) {
       tappableElement.asPaddingValues(density).calculateBottomPadding()
   }

   Column(
       modifier = modifier.fillMaxSize(),
       verticalArrangement = Arrangement.Bottom
   ) {
       if (usingTappableBars) {
           Box(
               modifier = Modifier
                   .background(MaterialTheme.colorScheme.background)
                   .fillMaxWidth()
                   .height(barHeight)
           )
       }
   }
}

3 ボタンナビゲーションのアプリ。

不透明な 3 ボタンナビゲーション

6. 解答コードを確認する

MainActivity.kt ファイルの onCreate メソッドはこのようになります:

class MainActivity : ComponentActivity() {
   override fun onCreate(savedInstanceState: Bundle?) {
       installSplashScreen()
       enableEdgeToEdge()
       window.isNavigationBarContrastEnforced = false
       super.onCreate(savedInstanceState)
       setContent {
           Main(
               shortcutParams = extractShortcutParams(intent),
           )
       }
   }
}

ChatScreen.kt ファイル内の ChatContent コンポーザブルはインセットを処理する必要があります:

private fun ChatContent(...) {
   ...
   Scaffold(...) { innerPadding ->
       Column {
           ...
           InputBar(
               input = input,
               onInputChanged = onInputChanged,
               onSendClick = onSendClick,
               onCameraClick = onCameraClick,
               onPhotoPickerClick = onPhotoPickerClick,
               contentPadding = innerPadding.copy(
                    layoutDirection, top = 0.dp
                ),
               sendEnabled = sendEnabled,
               modifier = Modifier
                   .fillMaxWidth()
                   .windowInsetsPadding(
                       WindowInsets.ime.exclude(WindowInsets.navigationBars)
                    ),
            )
       }
   }
}

解答コードは main ブランチから取得できます。SociaLite をダウンロード済みの場合:

git checkout main

そうでない場合、コードを再度ダウンロードして、直接または git を介して main ブランチを表示できます:

git clone git@github.com:android/socialite.git