📱

AndroidアプリのXMLレイアウトでエッジtoエッジを回避する

に公開

XMLレイアウトでエッジtoエッジを回避する

概要

API Level 35 から、画面のエッジtoエッジが強制されます。つまり、ステータスバーやナビゲーションバーの部分に、デフォルトでアプリの画面が描画されるようになります。しかし、アプリによっては、引き続き、ステータスバーやナビゲーションバーの部分にアプリの画面を表示したくない場合もあると思います。そのような要求を XML レイアウト ( Android View システム) で回避する方法を記述していきます。

画面のルートとなる ViewGroup に android:fitsSystemWindows="true" 属性を指定する

画面のルートとなる ViewGroup によっては、自動的にインセットを確保してくれるため、何もしなくても、ステータスバーやナビゲーションバーの部分を避けるように画面を表示してくれます。自動的にシステム表示エリアを避けてくれる ViewGroup には、例えば、以下のものがあります。

  • BottomAppBar
  • BottomNavigationView
  • NavigationRailView
  • NavigationView

自動的にシステム表示エリアを避けてくれない ViewGroup については、 android:fitsSystemWindows="true" を指定することによって、インセットを確保してくれるようになります。自動的に避けてくれない ViewGroup には、例えば、以下のものがあります。

  • AppBarLayout
  • CoordinatorLayout
<androidx.coordinatorlayout.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">
    
</androidx.coordinatorlayout.widget.CoordinatorLayout>

システム描画エリアにテーマ属性で色を付ける

fitsSystemWindows 属性で、システム描画エリアを避けることができたら、次に、その部分に対してテーマ属性で色を付けることができます。ただし、色を付けることができるのはステータスバーのみだそうで、ナビゲーションバーに色を付けることはできないとのこと。 ( ChatGPT 情報)

ステータスバーに色を付けるには、以下のように statusBarBackground 属性を使用します。

    <style name="Theme.MyApp" parent="Theme.MaterialComponents.DayNight.NoActionBar">
        <item name="statusBarBackground">@color/lightBlue</item>
    </style>

【注意点】ルートの ViewGroup によっては、 statusBarBackground 属性が効かない

例えば、画面のルートとなる ViewGroup が ScrollView の場合は、 statusBarBackground 属性が効きません。

そのような場合は、 statusBarBackground 属性が効く、別の ViewGroup でラップすることで、ステータスバーに色をつけることが可能になります。

参考資料

Discussion