Compose status bar transparent - 상태 바 색 변경

상태 바 색 변경

Compose에서 상태 바 색을 변경하기 위해서는 Theme.kt 파일에서 코드 몇 줄을 추가해 주면 된다.

Theme.kt 파일을 보면 프로젝트 명에 따라서 "<프로젝트 명>Theme" 함수가 있는데, 그 함수에서 아래 코드를 추가해 주면 된다.

val view = LocalView.current
if (!view.isInEditMode) {
    SideEffect {
        val window = (view.context as Activity).window
        window.statusBarColor = Color(255, 194, 71, 255).toArgb()
        window.navigationBarColor = Color(255, 194, 71, 255).toArgb()
        WindowCompat.getInsetsController(window, view).isAppearanceLightStatusBars = !darkTheme
    }
}

여기서 window.statusBarColor 부분이 상태 바의 색을 지정하는 부분으로 위처럼 특정 색을 지정해 줄 수 있다.

혹은 Color.Transparent로 색을 지정하거나 colorScheme.primary를 사용하여 애플리케이션에서 정의된 색으로 색을 지정할 수 있다.

이중에는 Light/Dark 테마에 따라서 그에 맞는 상태 창 색을 지정하거나 해당 애플리케이션의 퍼스널 컬러를 지정하므로 주로 colorScheme의 있는 색으로 지정하곤 한다.

그림1. statusBarColor

다음으로 window.navigationBarColor 부분은 화면 아랫부분에 위치한 네비게이션 바의 색을 지정한다.

이는 기종에 따라서 다르게 나타나지만, 의도한 대로 화면이 나타나게 하고 싶으면 이 부분도 설정해주는 것이 좋다.

그림2. naviagationBarColor

다음으로 .isAppearanceLightStatusBars = !darkTheme 부분인데 이 부분은 상태 바의 아이콘이나 텍스트 색상을 변경해준다.

상태 바의 아이콘 색은 상태 바의 배경 색과 대비되어야만 잘 나타나게 되는데

초기화 하는 값을 보면 !darkTheme 값으로 초기화 하는 것을 볼 수 있는다.

이는 만약 darkThemem=false (라이트 테마일 경우)면 isAppearanceLightStatusBars=true가 된다.

이렇게 하면 상태 바의 아이콘과 텍스트가 어두운 색상으로 나타나게 되어 밝은 테마에서 대비되어 아이콘과 텍스트가 잘 보여지도록 할 수 있다.

그림3. Light Theme 경우

반대로 darkThemem=true (다크 테마일 경우)면 isAppearanceLightStatusBars=false가 된다.

그러면 상태 바의 아이콘과 텍스트가 밝은 색상으로 나타나게 되어 어두운 테마와 대비되어 잘 보여지도록 된다.

그림4. Dark Theme 경우

참고

전체 코드 | Github