[Kotlin] Compose system bar 설정 (with. AppBar)

compose 프로젝트 생성

• Empty Compose Activity로 생성
  
• 이름 설정 후 Run (ctrl+R)
  

Color 설정

• [ui.theme > Color.kt] 파일 열기
  
• 컬러 파일 복제 후 수정
  
  

  저는 아래와 같이 추가 했습니다

  ...
  val MyColor = Color(0xFFCC03DA)

Theme에 Color 설정

• [ui.theme > Theme.kt] 파일 열기
  
• primary 컬러 수정

  private val LightColorPalette = lightColors(
    primary = MyColor,
    primaryVariant = Purple700,
    secondary = Teal200

바뀐 primary 컬러 확인 (with. AppBar)

다시 MainActivity.kt 돌아와서 run으로 돌려보고 확인

왜 안바뀌었어요?
A. 그려진 부분이 Text 뿐이라 primary 컬러를 보여주는 부분이 없어요

저 위에 파란 바는 뭐예요?
A. 안드로이드 systembar 중에 statusBar예요. (안드로이드 기본 상태표시줄)

Scaffold의 AppBar 그리기

• 기본으로 만들어준 DefaultPreview는 지움
  (Preview 목적이라 실행 때 나오는 화면과 별개임)

• 기본으로 만들어준 Greeting에서 Text를 지우고 Scaffold를 그림

  • Scaffold 선언하면 자동으로 PaddingValues를 사용하라하는데
    
  • 이땐 Quick Fix[opt+enter]를 이용해 아노테이션을 추가
    

Appbar(TopAppBar) Code

code:

@SuppressLint("UnusedMaterialScaffoldPaddingParameter")
@Composable
fun Greeting(name: String) {
    Scaffold(topBar = {
        TopAppBar(
            title = { Text(text = stringResource(id = R.string.app_name)) },
        )
    }) {
        Text("Hello!")
    }
}

systembar 중 status bar 컬러 수정

• [ui.theme > Theme.kt] 파일 열고 하단으로 스크롤
  : 본인 설정한 프로젝트 명 + Theme 이름으로 되어있음 (ex. Bora -> BoraTheme)
  

• MaterialTheme 반환 전에 아래 코드 붙여넣기

    // system bar (statusBar, navigationBar)
    val view = LocalView.current
    if (!view.isInEditMode) {
        SideEffect {
            val window = (view.context as Activity).window
            window.statusBarColor = colors.primary.toArgb()
            // window.navigationBarColor = colors.primary.toArgb()
        }
    }

• 결과
  

하단에 있는 navigationBarColor를 변경하고 싶다면
// window.navigationBarColor = colors.primary.toArgb() 주석 풀어주시면 됩니다.