Jetpack Composeを使ったAndroidアプリで、全画面表示をする方法です。

環境

• Kotlin 1.6.10
• Jetpack Compose 1.1.1

フルスクリーンで表示する

System UI Controller for Jetpack Composeのインストール

フルスクリーン表示には「System UI Controller for Jetpack Compose」を使用します。

build.gradleを編集し以下の行を追加します。

dependencies {
    implementation "com.google.accompanist:accompanist-systemuicontroller:0.23.1"
}

使用するバージョンは、使用するJetpack Composeのバーションによって変わります。

• Compose 1.0 (1.0.x) → 0.20.3
• Compose 1.1 (1.1.x) → 0.23.1
• Compose UI 1.2 (1.2.x) → 0.25.1
• Compose UI 1.3 (1.3.x) → 0.26.2-beta

詳しくはこちらをご覧ください。

使い方

WindowCompat.setDecorFitsSystemWindows()を使用して、
システムバーの領域にコンテンツが表示されるようにします。

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        // システムバーの領域にコンテンツが表示されるようにする
        WindowCompat.setDecorFitsSystemWindows(window, false)

システムバーを透明にします。

val systemUiController = rememberSystemUiController()
val useDarkIcons = !isSystemInDarkTheme()

DisposableEffect(systemUiController, useDarkIcons) {
    systemUiController.setSystemBarsColor(
        color = Color.Transparent,
        darkIcons = useDarkIcons
    )

    onDispose {}
}

サンプルプログラム

fillMaxSizeに指定したBoxがフルスクリーンで表示されます。

緑色の領域を画面上のナビゲーションバーや画面下のステータスバーの部分に描画できています。

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        WindowCompat.setDecorFitsSystemWindows(window, false)
        setContent {
            // Remember a SystemUiController
            val systemUiController = rememberSystemUiController()
            val useDarkIcons = !isSystemInDarkTheme()

            DisposableEffect(systemUiController, useDarkIcons) {
                // すべてのシステム バーの色を透明に更新し、明るいテーマの場合は暗いアイコンを使用します
                systemUiController.setSystemBarsColor(
                    color = Color.Transparent,
                    darkIcons = useDarkIcons
                )
                onDispose {}
            }

            FullScreenSampleTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colors.background
                ) {
                    MainContent()
                }
            }
        }
    }
}

@Composable
fun MainContent() {
    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(color = Color.Green)
    ) {
        Text(
            modifier = Modifier.align(alignment = Alignment.TopCenter),
            text = "Top"
        )
        Text(
            modifier = Modifier.align(alignment = Alignment.BottomCenter),
            text = "Bottom"
        )
        Text(
            modifier = Modifier.align(alignment = Alignment.CenterStart),
            text = "Start"
        )
        Text(
            modifier = Modifier.align(alignment = Alignment.CenterEnd),
            text = "End"
        )
    }
}

画面上のナビゲーションバーや画面下のステータスバーの部分を避ける

build.gradleを編集し以下の行を追加します。

dependencies {
    implementation "androidx.compose.foundation:foundation:1.2.1"
}

Modifier.statusBarsPadding()を追加し、ステータスバーのインセットに合わせてパディングを追加します。

modifier = Modifier
    // ステータスバーを避ける
    .statusBarsPadding()

Modifier.navigationBarsPadding()を追加し、ナビゲーションバーのインセットに合わせてパディングを追加します。

modifier = Modifier
    // ナビゲーションバーを避ける
    .navigationBarsPadding()

その他に、
ステータスバーとナビゲーションバーのインセットに合わせてパディングを追加するModifier.systemBarsPadding()、
ディスプレイのカットアウトに合わせてパディングを追加するModifier.displayCutoutPadding()、
などがある。

サンプルプログラム

青色の領域をステータスバーとナビゲーションバーを避けて描画できています。

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        // システムバーの領域にコンテンツが表示されるようにする
        WindowCompat.setDecorFitsSystemWindows(window, false)
        setContent {
            // Remember a SystemUiController
            val systemUiController = rememberSystemUiController()
            val useDarkIcons = !isSystemInDarkTheme()

            DisposableEffect(systemUiController, useDarkIcons) {
                // すべてのシステム バーの色を透明に更新し、明るいテーマの場合は暗いアイコンを使用します
                systemUiController.setSystemBarsColor(
                    color = Color.Transparent,
                    darkIcons = useDarkIcons
                )
                onDispose {}
            }

            FullScreenSampleTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colors.background
                ) {
                    MainContent()
                }
            }
        }
    }
}

@Composable
fun MainContent() {
    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(color = Color.Green)
    ) {
        Box(
            modifier = Modifier
                // ステータスバーを避ける
                .statusBarsPadding()
                // ナビゲーションバーを避ける
                .navigationBarsPadding()
                .fillMaxSize()
                .background(color = Color.Cyan)
        ) {
            Text(
                modifier = Modifier.align(alignment = Alignment.TopCenter),
                text = "Top"
            )
            Text(
                modifier = Modifier.align(alignment = Alignment.BottomCenter),
                text = "Bottom"
            )
            Text(
                modifier = Modifier.align(alignment = Alignment.CenterStart),
                text = "Start"
            )
            Text(
                modifier = Modifier.align(alignment = Alignment.CenterEnd),
                text = "End"
            )
        }
    }
}