[Android] MaterialTheme 사용법 (Jetpack Compose)

MaterialTheme 기본 사용법

• MaterialTheme는 Compose에서 UI를 감싸는 컨테이너 역할을 한다.

 

@Composable
fun MyApp() {
    MaterialTheme {
        // 여기에 앱의 UI를 구성
        Surface(
            modifier = Modifier.fillMaxSize(),
            color = MaterialTheme.colorScheme.background
        ) {
            Text(
                text = "Hello, Material Theme!",
                color = MaterialTheme.colorScheme.primary,
                style = MaterialTheme.typography.bodyLarge
            )
        }
    }
}

• MaterialTheme.colorScheme.background → 테마에서 정의한 배경색\
• MaterialTheme.colorScheme.primary → 주요 색상
• MaterialTheme.typography.bodyLarge → 본문 스타일

 

MaterialTheme의 주요 요소

1. colorScheme (색상 테마)

• lightColorScheme()과 darkColorScheme()을 사용해 라이트/다크 테마를 만들 수 있다.

val customColors = darkColorScheme(
    primary = Color(0xFFBB86FC),
    secondary = Color(0xFF03DAC5),
    background = Color(0xFF121212),
    surface = Color(0xFF1E1E1E),
    onPrimary = Color.White,
    onSecondary = Color.Black
)

@Composable
fun MyApp() {
    MaterialTheme(
        colorScheme = customColors
    ) {
        // UI 코드
    }
}

 

2. typography (폰트 스타일)

• 폰트 스타일은 typography를 사용해 설정

val customTypography = Typography(
    bodyLarge = TextStyle(
        fontSize = 18.sp,
        fontWeight = FontWeight.Bold,
        color = Color.Black
    ),
    titleLarge = TextStyle(
        fontSize = 24.sp,
        fontWeight = FontWeight.ExtraBold,
        color = Color.Blue
    )
)

@Composable
fun MyApp() {
    MaterialTheme(
        typography = customTypography
    ) {
        Text(
            text = "커스텀 타이포그래피!",
            style = MaterialTheme.typography.titleLarge
        )
    }
}

 

 

 

3. shapes (모양 설정)

• 버튼, 카드 등의 모서리 스타일을 정의

val customShapes = Shapes(
    small = RoundedCornerShape(4.dp),
    medium = RoundedCornerShape(12.dp),
    large = RoundedCornerShape(24.dp)
)

@Composable
fun MyApp() {
    MaterialTheme(
        shapes = customShapes
    ) {
        Surface(
            modifier = Modifier.padding(16.dp),
            shape = MaterialTheme.shapes.large,
            color = MaterialTheme.colorScheme.primary
        ) {
            Text(
                text = "Rounded Shape 적용됨",
                modifier = Modifier.padding(16.dp),
                color = MaterialTheme.colorScheme.onPrimary
            )
        }
    }
}

 

다크 테마(모드) 지원

• isSystemInDarkTheme()을 활용하면 다크 테마(모드)를 자동으로 적용

@Composable
fun MyTheme(content: @Composable () -> Unit) {
    val darkTheme = isSystemInDarkTheme()

    val colors = if (darkTheme) {
        darkColorScheme(
            primary = Color(0xFFBB86FC),
            background = Color(0xFF121212)
        )
    } else {
        lightColorScheme(
            primary = Color(0xFF6200EE),
            background = Color.White
        )
    }

    MaterialTheme(colorScheme = colors) {
        content()
    }
}

 

 

 

MaterialTheme 적용 예제

Theme.kt (테마 정의)

@Composable
fun MyAppTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    content: @Composable () -> Unit
) {
    val colors = if (darkTheme) {
        darkColorScheme(
            primary = Color(0xFFBB86FC),
            background = Color(0xFF121212)
        )
    } else {
        lightColorScheme(
            primary = Color(0xFF6200EE),
            background = Color.White
        )
    }

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

 

MainActivity.kt (테마 적용)

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyAppTheme {
                MyApp()
            }
        }
    }
}