Jetpack Compose - Material Theme[codelab]

Compose 앱에 Material Theming 적용

안드로이드에는 Light Mode 와 Dark Mode를 설정할 수 있다.

색상 팔레트 생성하기

• 기본 테마를 이용하는 방법과 커스텀 테마를 이용하는 방법이 있다.
• 커스텀 테마를 생성하기 위해 Material 테마 빌더 로 이동해서 커스텀 테마 색상을 지정하고 Export로 추출할 수 있다.

• Surface = 배경, 화면의 크고 낮은 강조 영역.
• Primary 색상은 UI에서 주요 구성요소에 사용된다.
• Secondary 색상은 UI에서 눈에 덜 띄는 구성요소에 사용된다
• Tertiary 색상은 기본 색상과 보조 색상의 균형을 맞추거나 입력란과 같은 특정 요소로 관심을 유도하는데 사용할 수 있는 대비 강조를 위해 사용된다.
• on 색상 요소는 팔레트의 색상 위에 나타나며, 주로 텍스트,아이콘,획에 적용된다. 색상 팔레트에는 Surface색상 위에 나타나는 OnSurface 색상과 Primary색상 위에 나타나는 OnPrimary 색상이 있다.

자세한 내용은 Material3 에서 확인할 수 있다.

---

테마에 색상 팔레트 추가하기

Material 테마 빌더에서 다운로드한 파일 압축을 풀면 Color.kt, Theme.kt파일이 생성되고 Color.kt 파일의 내용을 안드로이드 ui.theme디렉토리의 Color.kt에 복사, 생성된 Theme.kt파일의 내용을 ui.theme디렉토리의 Theme.kt파일에 복사해준다.

---

색상이 바뀐 것을 확인할 수 있다.
도형 모형은 ui.theme디렉토리에 Shape.kt파일을 생성한 뒤

val Shapes = Shapes(
    small = RoundedCornerShape(50.dp),
    medium = RoundedCornerShape(bottomStart = 16.dp, topEnd = 16.dp)
)

내가 원하는 값을 지정해준 뒤 Theme.kt파일로 이동해서 MaterialTheme에 Shapes를 적용해주면 된다.

@Composable
fun Android_ComposeCamp_CodelabTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    dynamicColor: Boolean = false,
    content: @Composable () -> Unit
) {
    val colorScheme = when {
        dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> {
            val context = LocalContext.current
            if (darkTheme) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context)
        }

        darkTheme -> DarkColors
        else -> LightColors
    }
    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
        }
    }

    MaterialTheme(
        colorScheme = colorScheme,
        shapes = Shapes,
        typography = Typography,
        content = content
    )
}

---

참고문헌

Material3
Compose Codelab_Material Theming