はじめに

Google Playの要件により、2025年8月31日までにアプリをAndroid API 35（Android 15）に対応させる必要があります。しかし、いざAPI 35にアップデートしてみると、「アプリバーがステータスバーと重なって表示がおかしい！」という問題に遭遇した方も多いのではないでしょうか。

この問題は、Android 15でEdge-to-edge表示がデフォルトで有効になったことが原因です。今回は、この問題の原因と具体的な解決方法を詳しく解説していきます。

対象読者

• React NativeでAndroidアプリを開発している方
• Android API 35へのアップデートを控えている方
• Edge-to-edge表示の問題でお困りの方

前提知識として、React NativeでのAndroid開発とstyles.xmlの基本的な理解があることを想定しています。

問題の概要

何が起きたのか

Android API 34から35にアップデートした際に、以下のような問題が発生しました。

• ステータスバーの余白が完全に消失
• アプリバーがステータスバーの位置から開始される
• 全体的にレイアウトが上にずれて表示される

原因の分析

この問題の根本原因は、Android 15でEdge-to-edge表示がデフォルトで有効になったことです。

従来のAPI 34では、この機能は明示的に有効にする必要がありましたが、API 35からはデフォルトで有効になったため、既存のアプリで表示崩れが発生するようになりました。

解決方法

Step 1: 基本設定の追加

まず、android/app/src/main/res/values/styles.xmlに以下の設定を追加します。

<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Edge-to-edge表示を無効化 -->
        <item name="android:windowOptOutEdgeToEdgeEnforcement">true</item>

        <!-- ステータスバーの設定 -->
        <item name="android:statusBarColor">@android:color/transparent</item>
        <item name="android:windowLightStatusBar">true</item>
    </style>
</resources>

設定項目の解説

• android:windowOptOutEdgeToEdgeEnforcement: Edge-to-edge表示を明示的に無効化
• android:statusBarColor: ステータスバーの背景色を透明に設定
• android:windowLightStatusBar: ステータスバーのアイコンを暗色に設定

Step 2: API 35専用設定の作成

API 35以降でのみ適用される設定ファイルを作成します。

android/app/src/main/res/values-v35/styles.xmlを新規作成し、以下の内容を記述します。

<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Edge-to-edge表示を無効化 -->
        <item name="android:windowOptOutEdgeToEdgeEnforcement">true</item>

        <!-- システムバーの描画を有効化 -->
        <item name="android:windowDrawsSystemBarBackgrounds">true</item>

        <!-- ナビゲーションバーの設定 -->
        <item name="android:navigationBarColor">@android:color/white</item>
        <item name="android:windowLightNavigationBar">true</item>
    </style>
</resources>

動作確認

設定が正しく適用されていることを確認するために、以下の点をチェックしてください。

✅ 確認項目

• ステータスバーとアプリバーの間に適切な余白があるか
• ステータスバーのアイコンが正しく表示されているか
• ナビゲーションバーが正常に表示されているか
• 他の画面でも同様に正しく表示されるか

トラブルシューティング

よくある問題と解決方法

問題1: 設定を追加しても変化がない

原因: Gradleキャッシュが残っている可能性があります。

解決方法:

./gradlew clean

問題2: ナビゲーションバーの色がおかしい

原因: values-v35/styles.xmlでナビゲーションバーの設定が不適切な可能性があります。

解決方法: android:navigationBarColorとandroid:windowLightNavigationBarの組み合わせを調整してください。

問題3: 一部の画面でのみ問題が発生する

原因: 特定の画面で独自のテーマを使用している可能性があります。

解決方法: 該当画面のAndroidManifest.xmlでテーマ設定を確認し、必要に応じて統一してください。

まとめ

Android API 35でのEdge-to-edge表示問題は、以下の対応で解決できます：

1. 基本設定: values/styles.xmlでwindowOptOutEdgeToEdgeEnforcementを追加
2. バージョン別設定: values-v35/styles.xmlでAPI 35専用の設定を作成
3. テスト: 複数の画面で正常に動作することを確認

Google Playの締切（2025年8月31日）も近づいているため、早めの対応をおすすめします。今回の設定により、従来通りの表示を維持しながら、Android 15の要件を満たすことができます。

将来的にEdge-to-edge表示を活用したい場合は、段階的にレイアウトを調整していくことを検討してみてください。