Kwaang Tech

[Kotlin] Compose system bar 설정 본문

Dev/TroubleShooting

[Kotlin] Compose system bar 설정

콰앙 2024. 1. 17. 14:52

Compose로 매우 간단한 이미지 프로필을 만들어보았다.

Column을 이용한 이미지 프로필

근데 위 상단 Status Bar 색상이 바뀌지 않아서, 무척 고생을 하였다.

멍청하게,, res/values/styles 쪽으로만 시스템바를 바꾸려고 한 것이였다...

방법은 매우 간단했다.

Color 설정

  • [ui.theme > Color.kt] 파일 열기

여기서 Black이 내가 설정한 Color 색이다.
이미지 프로필 배경색과 동일하게 바꿔 주고싶었기 때문이다.

Theme에 Color 설정

  • [ui.theme > Theme.kt] 파일 열기
  • primary 컬러를 수정해준다.
    private val LightColorScheme = lightColorScheme(
      primary = Black,
      secondary = PurpleGrey40,
      tertiary = Pink40

systembar - status bar 컬러 수정

  • [ui.theme > Theme.kt] 에서 하단으로 스크롤
    : 본인 설정한 프로젝트 명 + Theme 이름으로 되어있음 (ex. MyApplication -> MyApplicationTheme)
  • MaterialTheme 반환 전에 아래 코드 붙여넣기
val view = LocalView.current
    if (!view.isInEditMode) {
        SideEffect {
            val window = (view.context as Activity).window
            window.statusBarColor = colorScheme.primary.toArgb()
            WindowCompat.getInsetsController(window, view).isAppearanceLightStatusBars = darkTheme
        }
    }


쨘~ statusBar 변경 끝

반응형