Android 15 の edge-to-edgeに対応する

kyamada,•Androidedge-to-edge
Back

概要

Android 15にアップデートすると、ステータスバーの文字が消えたり、ステータスバーの下にマージンができてしまうという問題がおきました。 原因は edge-to-edge に対応していないことだったので、対応した時の変更点を記載します。

重要: Android 15（API レベル 35）以降では、アプリが SDK 35 をターゲットとすると、エッジ ツー エッジ表示が適用されます。アプリがまだ端から端まで表示されていない場合は、アプリの一部が隠れる可能性があるため、インセットを処理する必要があります。アプリによっては、この作業が大幅な変更になる場合もあれば、そうでない場合もあります。 引用: アプリでコンテンツをエッジ ツー エッジで表示する (opens in a new tab)

環境

変更箇所

ハイライト行が変更箇所です。

composeApp/src/androidMain/AndroidManifest.xml
    <application
        android:allowBackup="false"
        android:icon="@mipmap/ic_launcher"
        android:label="${app_name}"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.App"
composeApp/src/androidMain/kotlin/app/shinagawa/hoge/MainActivity.kt
import androidx.core.view.WindowCompat
 
class MainActivity : ComponentActivity() {
 
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        INSTANCE = this
        setupMobileAds()
        WindowCompat.setDecorFitsSystemWindows(window, false)
        setContent {
            App()
        }
composeApp/src/androidMain/res/values/themes.xml
<resources>
 
    <style name="Theme.App" parent="Theme.AppCompat.DayNight.NoActionBar">
        <item name="android:statusBarColor">@android:color/transparent</item>
        <item name="android:navigationBarColor">@android:color/transparent</item>
        <item name="android:windowLightStatusBar">true</item>
    </style>
</resources>
composeApp/src/androidMain/res/values-night/themes.xml
<resources>
 
    <style name="Theme.App" parent="Theme.AppCompat.DayNight.NoActionBar">
        <item name="android:statusBarColor">@android:color/transparent</item>
        <item name="android:navigationBarColor">@android:color/transparent</item>
        <item name="android:windowLightStatusBar">false</item>
    </style>
</resources>
composeApp/src/commonMain/kotlin/app/shinagawa/hoge/ui/screens/MainScreen.kt
        Box(
            modifier = Modifier
                .fillMaxSize()
                .padding(WindowInsets.systemBars.asPaddingValues())
                .consumeWindowInsets(WindowInsets.systemBars.asPaddingValues())
        ) {
            TabNavigator(TtsTab) {
                Scaffold(
                    snackbarHost = {
                        SnackbarHost(snackHostState)
                    },
                    content = { innerPadding ->
                        Box(modifier = Modifier.padding(innerPadding)) {
                            CurrentTab()
                        }
                    },
                    ...
        }

BottomSheetNavigatorで表示する画面にpaddingをセット

BottomSheetNavigatorで表示する画面は、3ボタンナビゲーションのときに画面下部が隠れてしまうので、paddingをセットします。

TextSelectionScreen.kt
import androidx.compose.foundation.layout.WindowInsets
import androidx.compose.foundation.layout.asPaddingValues
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.systemBars
 
@Composable
fun TextSelectionContent() {
    LazyColumn(
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier = Modifier
            .wrapContentHeight()
            .padding(bottom = WindowInsets.systemBars.asPaddingValues().calculateBottomPadding())
            .background(MaterialTheme.colorScheme.background),
    ) {

動作確認

[ジェスチャーナビゲーション] と [3 ボタン ナビゲーション]の両方で動作確認をする必要があります。 以下の場所で切り替えることができます。

© 品川アプリ.RSS