サイトロゴ

Androidアプリ開発　ステータスバーとナビゲーションバーの背景色を変える

著者画像
Toshihiko Arai
投稿日: 2024-03-07

Composableを使ったUI開発の場合

Androidアプリのステータスバー（端末のにある時計とか表示される部分）とナビゲーションバー（下部の操作ボタンのある部分）の背景色を変更する方法をご紹介いたします。

最善な方法かどうかわかりませんが、WindowCompat を使ってステータスバーとナビゲーションバーを変えることができます。



@Composable
fun SystemUiController(color: Color, nightMode: Boolean = true) {
    val context = LocalContext.current
    val window = (context as? Activity)?.window

    SideEffect {
        window?.let {
            // ステータスバーの色を設定
            WindowCompat.getInsetsController(it, it.decorView)?.let { controller ->
                controller.isAppearanceLightStatusBars = !nightMode // ステータスバーのアイコンの色を暗くする場合はtrue
                it.statusBarColor = color.toArgb()
            }

            // ナビゲーションバーの色を設定
            it.navigationBarColor = color.toArgb()
            WindowCompat.getInsetsController(it, it.decorView)?.let { controller ->
                controller.isAppearanceLightNavigationBars = !nightMode // ナビゲーションバーのアイコンの色を暗くする場合はtrue
            }
        }
    }
}

上記のSystemUiController関数呼び出しはsetContent内でないと動きません。

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


    setContent {
        val prefRepo = UserPreferencesRepository(context = this)
        val nightMode by prefRepo.nightModeFlow.collectAsState(initial = true)

        TaskMemoTheme(useNightTheme = nightMode) {
            SystemUiController(color = LocalCustomColors.current.main, nightMode = nightMode)
            TaskMemoApp()
        }
    }
}

従来のUI開発の場合

従来のUI開発では onCreate に次のような実装をすることでステータスバーおよびナビゲーションバーの色を変えることができます。Activity毎に実装しなければならないため、BaseActivity.kt を作って全てのActivityに継承させるようにしています。

open class BaseActivity: AppCompatActivity() {

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

        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            // ステータスバーの色を変更
            window.statusBarColor = ContextCompat.getColor(this, R.color.settingBackgroundColor)
            // ナビゲーションバーの色を変更
            window.navigationBarColor = ContextCompat.getColor(this, R.color.settingBackgroundColor)
        }
    }
}