Jetpack Compose는 Material Design 3 구현을 제공합니다. 차세대 머티리얼 디자인입니다. Material 3에는 업데이트된 테마 설정, 동적 색상과 같은 Material You 맞춤설정 기능과 Android 12의 새로운 시각적 스타일 및 시스템 UI와 일관되도록 설계 이상
아래에서는 Material Design 3 구현을 보여줍니다. Reply 샘플 앱을 예로 들어보겠습니다. Reply 샘플은 머티리얼 디자인 3을 기반으로 합니다.
<ph type="x-smartling-placeholder">
종속 항목
Compose 앱에서 Material 3을 사용하려면 Compose Material 3을 추가하세요.
종속 항목을 build.gradle 파일에 추가합니다.
implementation "androidx.compose.material3:material3:$material3_version"
종속 항목이 추가되면 Material Design 시스템을 추가할 수 있습니다. 앱에 적용할 수 있습니다.
실험용 API
일부 M3 API는 실험용으로 간주됩니다. 이러한 경우 ExperimentalMaterial3Api 주석을 사용하여 함수 또는 파일 수준에서 선택해야 합니다.
// import androidx.compose.material3.ExperimentalMaterial3Api
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun AppComposable() {
// M3 composables
}
Material Theming
M3 테마에는 색 구성표와 같은 하위 시스템이 포함되어 있습니다. 서체와 도형입니다. 맞춤설정할 경우 이러한 값을 지정하면 변경사항이 자동으로 생성된 M3 구성요소에 몇 가지 옵션을 제공합니다.
<ph type="x-smartling-placeholder">
Jetpack Compose는 M3 MaterialTheme를 사용하여 이러한 개념을 구현합니다.
구성 가능한 함수:
MaterialTheme(
colorScheme = /* ...
typography = /* ...
shapes = /* ...
) {
// M3 app content
}
애플리케이션 콘텐츠의 테마를 지정하려면 색 구성표, 서체, 사용할 수 있습니다.
색 구성표
색 구성표의 기반은 5가지 주요 색상 세트입니다. 이러한 각 색상은 Material 3에서 사용하는 13가지 색조의 색조 팔레트와 관련이 있습니다. 구성할 수 있습니다. 예를 들어, 다음은 밝은 테마의 색 구성표입니다. 답장:
<ph type="x-smartling-placeholder">
색 구성표 및 색 역할에 관해 자세히 알아보세요.
색 구성표 생성
맞춤 ColorScheme을 수동으로 만들 수도 있지만 브랜드의 소스 색상을 사용하여 생성하는 것이 더 쉬울 때가 많습니다. Material 테마
Builder 도구를 사용하면 이러한 작업을 할 수 있으며 원하는 경우 내보낼 수 있습니다.
Compose 테마 설정 코드 다음과 같은 파일이 생성됩니다.
Color.kt에는 다음에 정의된 모든 역할이 있는 테마의 색상이 있습니다. 밝은 테마 색상과 어두운 테마 색상을 모두 사용할 수 있습니다.
val md_theme_light_primary = Color(0xFF476810) val md_theme_light_onPrimary = Color(0xFFFFFFFF) val md_theme_light_primaryContainer = Color(0xFFC7F089) // .. // .. val md_theme_dark_primary = Color(0xFFACD370) val md_theme_dark_onPrimary = Color(0xFF213600) val md_theme_dark_primaryContainer = Color(0xFF324F00) // .. // ..
Theme.kt에는 밝은 색 및 어두운 색 구성표와 앱을 위한 설정이 포함되어 있습니다. 있습니다.
private val LightColorScheme = lightColorScheme(
primary = md_theme_light_primary,
onPrimary = md_theme_light_onPrimary,
primaryContainer = md_theme_light_primaryContainer,
// ..
)
private val DarkColorScheme = darkColorScheme(
primary = md_theme_dark_primary,
onPrimary = md_theme_dark_onPrimary,
primaryContainer = md_theme_dark_primaryContainer,
// ..
)
@Composable
fun ReplyTheme(
darkTheme: Boolean = isSystemInDarkTheme(),
content: @Composable () -> Unit
) {
val colorScheme =
if (!darkTheme) {
LightColorScheme
} else {
DarkColorScheme
}
MaterialTheme(
colorScheme = colorScheme,
content = content
)
}
밝은 테마와 어두운 테마를 지원하려면 isSystemInDarkTheme()를 사용합니다. 기준:
시스템 설정에서 사용할 색 구성표(밝게 또는 어둡게)를 정의합니다.
동적 색 구성표
동적 색상은 Material You의 핵심 부분으로, 알고리즘이 사용자의 배경화면에서 맞춤 색상을 가져와 배경화면에 앱 및 시스템 UI가 포함됩니다. 이 색상 팔레트는 밝은 색과 어두운 색 구성표.
동적 색상은 Android 12 이상에서 사용할 수 있습니다. 동적 색상을 사용할 수 있다면 동적 ColorScheme을 설정할 수 있습니다. 그렇지 않은 경우
맞춤 밝기 또는 어둡게 ColorScheme를 사용할 수도 있습니다.
ColorScheme는 동적 광원 또는
어두운 색 구성표:
// Dynamic color is available on Android 12+
val dynamicColor = Build.VERSION.SDK_INT >= Build.VERSION_CODES.S
val colors = when {
dynamicColor && darkTheme -> dynamicDarkColorScheme(LocalContext.current)
dynamicColor && !darkTheme -> dynamicLightColorScheme(LocalContext.current)
darkTheme -> DarkColorScheme
else -> LightColorScheme
}
색상 사용
다음을 통해 앱에서 Material 테마 색상에 액세스할 수 있습니다.
MaterialTheme.colorScheme:
Text(
text = "Hello theming",
color = MaterialTheme.colorScheme.primary
)
각 색상 역할은 구성요소의 구성에 따라 다양한 위치에서 사용될 수 있습니다. 강조와 가시도의 조합으로 구성됩니다.
- 기본 색상은 기본 색상으로, 눈에 잘 띄는 기본 구성요소에 사용됩니다. 활성 상태, 고조된 표면의 색조 등을 조정할 수 있습니다.
- 보조 키 색상은 UI에서 눈에 덜 띄는 구성요소에 사용됩니다(예: 필터 칩으로 사용할 수 있고 색상 표현의 기회를 확장합니다.
- 3차 키 색상은 기본 색상과 보조 색상의 균형을 맞추거나 색상을 보정할 수 있습니다. 주의를 끌 수 있습니다.
Reply 샘플 앱 디자인은 기본 컨테이너 색상을 기본 컨테이너는 선택한 항목을 강조합니다.
<ph type="x-smartling-placeholder">
Card(
colors = CardDefaults.cardColors(
containerColor =
if (isSelected) MaterialTheme.colorScheme.primaryContainer
else
MaterialTheme.colorScheme.surfaceVariant
)
) {
Text(
text = "Dinner club",
style = MaterialTheme.typography.bodyLarge,
color =
if (isSelected) MaterialTheme.colorScheme.onPrimaryContainer
else MaterialTheme.colorScheme.onSurface,
)
}
여기서는 답장 탐색 창에서 2차 및 3차 강조와 강조를 위해 사용되는 컨테이너 색상입니다.
<ph type="x-smartling-placeholder">
서체
Material Design 3는 텍스트 스타일을 포함한 서체 스케일을 정의합니다. 머티리얼 디자인 2에서 조정한 것입니다. 이름 지정과 그룹화는 표시, 헤드라인, 제목, 본문, 라벨로 간소화되었고 각각 대, 중, 소 크기가 있습니다.
<ph type="x-smartling-placeholder">
| M3 | 기본 글꼴 크기/줄 간격 |
displayLarge |
Roboto 57/64 |
displayMedium |
Roboto 45/52 |
displaySmall |
Roboto 36/44 |
headlineLarge |
Roboto 32/40 |
headlineMedium |
Roboto 28/36 |
headlineSmall |
Roboto 24/32 |
titleLarge |
New- Roboto Medium 22/28 |
titleMedium |
Roboto Medium 16/24 |
titleSmall |
Roboto Medium 14/20 |
bodyLarge |
Roboto 16/24 |
bodyMedium |
Roboto 14/20 |
bodySmall |
Roboto 12/16 |
labelLarge |
Roboto Medium 14/20 |
labelMedium |
Roboto Medium 12/16 |
labelSmall |
New Roboto Medium, 11/16 |
서체 정의
Compose는 기존Typography
TextStyle 및 글꼴 관련 클래스: Material 3 유형 모델링
제공합니다 Typography 생성자는 각 스타일의 기본값을 제공하므로 생략할 수 있습니다.
맞춤설정하지 않을 매개변수:
val replyTypography = Typography(
titleLarge = TextStyle(
fontWeight = FontWeight.SemiBold,
fontSize = 22.sp,
lineHeight = 28.sp,
letterSpacing = 0.sp
),
titleMedium = TextStyle(
fontWeight = FontWeight.SemiBold,
fontSize = 16.sp,
lineHeight = 24.sp,
letterSpacing = 0.15.sp
),
// ..
)
// ..
<ph type="x-smartling-placeholder">
Material Design의 15가지 기본 스타일 모두가 제품에 필요한 것은 아닙니다. 서체 스케일 이 예에서는 축소된 세트에 5개의 크기가 선택되고 나머지는 생략됩니다.
TextStyle의 기본값을 변경하여 서체를 맞춤설정할 수 있습니다.
글꼴 관련 속성(예: fontFamily, letterSpacing)
bodyLarge = TextStyle(
fontWeight = FontWeight.Normal,
fontFamily = FontFamily.SansSerif,
fontStyle = FontStyle.Italic,
fontSize = 16.sp,
lineHeight = 24.sp,
letterSpacing = 0.15.sp,
baselineShift = BaselineShift.Subscript
),
Typography를 정의한 후에는 M3 MaterialTheme에 전달합니다.
MaterialTheme(
typography = replyTypography,
) {
// M3 app Content
}
텍스트 스타일 사용
다음을 수행하여 M3 MaterialTheme 컴포저블에 제공된 서체를 검색할 수 있습니다.
MaterialTheme.typography 사용:
Text(
text = "Hello M3 theming",
style = MaterialTheme.typography.titleLarge
)
Text(
text = "you are learning typography",
style = MaterialTheme.typography.bodyMedium
)
자료 가이드라인에 대한 자세한 내용은 서체
도형
Material 표면은 다양한 도형으로 표시할 수 있습니다. 도형은 주의를 집중시킵니다. 구성요소를 식별하고 상태를 전달하며 브랜드를 표현할 수 있습니다.
도형 배율은 컨테이너 모서리의 스타일을 정의하며, 다양한 도형을 제공합니다. 정사각형에서 완전한 원형으로 둥글게 만들 수 있습니다.
도형 정의
Compose는 M3 Shapes 클래스에 확장 매개변수를 제공하여 지원합니다.
새로운 M3 도형입니다. M3 도형 스케일은 서체 스케일과 비슷하며
를 사용하여 UI에서 다양한 도형을 표현할 수 있습니다.
도형에는 다양한 크기가 있습니다.
- XS
- 사이즈: S
- 보통
- 크게
- XL
기본적으로 각 도형에는 기본값이 있지만 사용자가 재정의할 수 있습니다.
val replyShapes = Shapes(
extraSmall = RoundedCornerShape(4.dp),
small = RoundedCornerShape(8.dp),
medium = RoundedCornerShape(12.dp),
large = RoundedCornerShape(16.dp),
extraLarge = RoundedCornerShape(24.dp)
)
Shapes를 정의한 후에는 M3 MaterialTheme에 전달할 수 있습니다.
MaterialTheme(
shapes = replyShapes,
) {
// M3 app Content
}
도형 사용
MaterialTheme에서 모든 구성요소의 도형 배율을 맞춤설정할 수 있습니다.
구성 요소별로 수행할 수 있습니다.
기본값으로 중간 및 큰 도형 적용:
Card(shape = MaterialTheme.shapes.medium) { /* card content */ }
FloatingActionButton(
shape = MaterialTheme.shapes.large,
onClick = {
}
) {
/* fab content */
}
<ph type="x-smartling-placeholder">
다른 두 도형도 있습니다. RectangleShape와 CircleShape는
살펴보겠습니다 직사각형 도형에는 테두리 반경이 없으며 원 도형에는 전체가 표시됩니다.
원 가장자리:
Card(shape = RectangleShape) { /* card content */ }
Card(shape = CircleShape) { /* card content */ }
아래 예는 기본 도형 값이 있는 몇 가지 구성요소를 보여줍니다. 적용됩니다.
<ph type="x-smartling-placeholder">
자료 가이드라인에 대한 자세한 내용은 도형을 만듭니다.
강조
M3에서 강조는 색상 변형 및 on-color를 사용하여 제공됩니다. 조합할 수 있습니다. M3에서 UI를 강조하는 방법에는 두 가지가 있습니다.
- on-surface와 함께 표면, 표면 변형, 배경을 사용합니다. on-surface-variant는 확장된 M3 색상 시스템에서 색상을 처리합니다. 예를 들어 표면은 on-surface-variant와 함께 사용할 수 있고, 표면-변형은 사용할 수 있습니다. 다양한 강조 수준을 제공합니다.
</ph>
- 텍스트에 서로 다른 글꼴 두께 사용 위에서 설명한 바와 같이 다른 강조를 제공하기 위해 서체 스케일로 맞춤 가중치를 추가했습니다.
bodyLarge = TextStyle(
fontWeight = FontWeight.Bold
),
bodyMedium = TextStyle(
fontWeight = FontWeight.Normal
)
고도
머티리얼 3는 주로 색조 색상 오버레이를 사용하여 고도를 나타냅니다. 새로운 톤을 증가시켜 컨테이너와 표면을 서로 구별하는 방법입니다. 고도에서는 그림자 외에 더욱 눈에 띄는 색조를 사용합니다.
<ph type="x-smartling-placeholder">
어두운 테마의 고도 오버레이도 Material 3 오버레이 색상은 기본 색상 슬롯에서 가져옵니다.
<ph type="x-smartling-placeholder">
대부분의 M3 구성요소의 지원 컴포저블인 M3 Surface 색조 고도 지원과 그림자 고도 지원이 모두 포함됩니다.
Surface(
modifier = Modifier,
tonalElevation = /*...
shadowElevation = /*...
) {
Column(content = content)
}
Material 구성요소
Material Design은 다양한 Material 구성요소 집합과 함께 제공됩니다. (예: 버튼, 칩, 카드, 탐색 메뉴) 이미 Material을 따릅니다. 멋진 Material Design 앱을 만드는 데 도움이 되는 테마를 설정합니다. Cloud Shell에서 구성요소를 바로 사용할 수 있습니다.
Button(onClick = { /*..*/ }) {
Text(text = "My Button")
}
M3는 다양한 역할에서 사용되는 동일한 구성요소의 여러 버전을 제공합니다. 강조와 관심에 따라 표현됩니다.
<ph type="x-smartling-placeholder">
- </ph>
- 가장 높은 강조 작업을 위한 확장된 플로팅 작업 버튼:
ExtendedFloatingActionButton(
onClick = { /*..*/ },
modifier = Modifier
) {
Icon(
imageVector = Icons.Default.Edit,
contentDescription = stringResource(id = R.string.edit),
)
Text(
text = stringResource(id = R.string.add_entry),
)
}
- 강조 작업을 위해 채워진 버튼:
Button(onClick = { /*..*/ }) {
Text(text = stringResource(id = R.string.view_entry))
}
- 강조가 낮은 작업을 위한 텍스트 버튼:
TextButton(onClick = { /*..*/ }) {
Text(text = stringResource(id = R.string.replated_articles))
}
Material 버튼 및 기타 구성요소에 관해 자세히 알아보세요. Material 3는 버튼, 앱, 앱과 같은 다양한 구성요소 모음을 제공합니다. 탐색을 위해 특별히 설계된 탐색 구성요소 케이스 및 화면 크기
탐색 구성요소
Material은 개발자가 구현하는 데 도움이 되는 여러 탐색 구성요소도 제공합니다. 탐색 메뉴(예: 다양한 화면 크기 및 상태에 따라 다름)
5개 이하를 타겟팅하려는 경우 소형 기기에 NavigationBar가 사용됩니다.
대상 유형:
NavigationBar(modifier = Modifier.fillMaxWidth()) {
Destinations.entries.forEach { replyDestination ->
NavigationBarItem(
selected = selectedDestination == replyDestination,
onClick = { },
icon = { }
)
}
}
NavigationRail은(는)
가로 모드 사용자에게 인체공학을 제공하고 사용자 환경을 개선합니다.
할 수 있습니다.
NavigationRail(
modifier = Modifier.fillMaxHeight(),
) {
Destinations.entries.forEach { replyDestination ->
NavigationRailItem(
selected = selectedDestination == replyDestination,
onClick = { },
icon = { }
)
}
}
<ph type="x-smartling-placeholder">
BottomNavigationBar님의 답글 쇼케이스 (왼쪽) 및 NavigationRail (오른쪽)모든 사용자에게 몰입형 사용자 환경을 제공하기 위해 기본 테마 설정에서 두 가지를 모두 사용하여 답장 기기 크기
NavigationDrawer은(는)
세부사항을 표시할 수 있는 충분한 공간이 있습니다. PermanentNavigationDrawer 또는
NavigationRail 및 ModalNavigationDrawer
PermanentNavigationDrawer(modifier = Modifier.fillMaxHeight(), drawerContent = {
Destinations.entries.forEach { replyDestination ->
NavigationRailItem(
selected = selectedDestination == replyDestination,
onClick = { },
icon = { },
label = { }
)
}
}) {
}
<ph type="x-smartling-placeholder">
탐색 옵션은 사용자 환경, 인체공학, 도달 가능성을 개선합니다. Material 탐색 구성요소에 관한 자세한 내용은 Compose 적응형 Codelab
구성요소의 테마 맞춤설정
M3는 맞춤설정과 유연성을 장려합니다. 모든 구성요소에는 적용되지만 유연한 API를 노출하여 색상을 맞춤설정할 수 있습니다. 필요합니다.
카드, 버튼과 같은 대부분의 구성요소는 색상을 노출하는 기본 객체를 제공합니다. 수정 가능한 고도 인터페이스가 있습니다.
val customCardColors = CardDefaults.cardColors(
contentColor = MaterialTheme.colorScheme.primary,
containerColor = MaterialTheme.colorScheme.primaryContainer,
disabledContentColor = MaterialTheme.colorScheme.surface,
disabledContainerColor = MaterialTheme.colorScheme.onSurface,
)
val customCardElevation = CardDefaults.cardElevation(
defaultElevation = 8.dp,
pressedElevation = 2.dp,
focusedElevation = 4.dp
)
Card(
colors = customCardColors,
elevation = customCardElevation
) {
// m3 card content
}
Material 3 맞춤설정에 관해 자세히 알아보세요.
시스템 UI
Material You의 일부 측면은 Android 12 이상 변화가 있는 두 가지 주요 영역은 오버스크롤입니다. 이러한 변경사항을 구현하기 위해 추가 작업을 하지 않아도 됩니다.
물결 효과
이제 물결 효과를 누르면 은은한 반짝임이 적용되어 표면이 밝아집니다. Compose 머티리얼 물결 효과는 내부적으로 플랫폼 RippleDrawable을 사용합니다. Android: 반짝이 물결 효과는 Android 12 이상에서 모든 머티리얼에 사용할 수 있습니다. 구성할 수 있습니다.
<ph type="x-smartling-placeholder">
오버스크롤
이제 오버스크롤이 스크롤 컨테이너 가장자리에서 스트레치 효과를 사용합니다.
스크롤 컨테이너 컴포저블에서 스트레치 오버스크롤이 기본적으로 사용 설정됩니다.
예: LazyColumn, LazyRow, LazyVerticalGrid —
Compose Foundation 1.1.0 이상(API 수준과 관계없이)
접근성
Material 구성요소에 내장된 접근성 표준은 포용적인 제품 설계의 토대가 되었습니다 제품의 접근성이 낮은 사용자를 포함한 모든 사용자를 위해 사용성을 개선할 수 있습니다 시력, 실명, 청각 장애, 인지 장애, 운동 장애 또는 상황 장애 (예: 팔 부러짐)
색상 접근성
동적 색상은 색상 대비에 관한 접근성 표준을 충족하도록 설계되었습니다. 색조 팔레트 시스템은 모든 색 구성표를 기본적으로 제공됩니다
머티리얼의 색상 시스템은 일반적인 톤의 색상에 적용할 수 있는 액세스 가능한 명암비를 충족하는 데 사용할 수 있습니다.
<ph type="x-smartling-placeholder">
모든 Material 구성요소와 동적 테마 설정에서 이미 위의 색상 역할을 사용하고 있습니다. 접근성을 충족하도록 선택된 색조 팔레트 모음 요구사항을 충족해야 합니다 그러나 구성요소를 맞춤설정하는 경우 불일치를 방지할 수 있습니다.
기본 위에 on-primary를 사용하고, 위에 on-primary-container를 사용합니다. 기본-컨테이너를 사용하고, 다른 강조 색상과 중성색의 경우 동일하게 제공합니다. 대비가 용이합니다.
기본 컨테이너 위에 3차 컨테이너를 사용하면 사용자는 대비 버튼:
// ✅ Button with sufficient contrast ratio
Button(
onClick = { },
colors = ButtonDefaults.buttonColors(
containerColor = MaterialTheme.colorScheme.primary,
contentColor = MaterialTheme.colorScheme.onPrimary
)
) {
}
// ❌ Button with poor contrast ratio
Button(
onClick = { },
colors = ButtonDefaults.buttonColors(
containerColor = MaterialTheme.colorScheme.tertiaryContainer,
contentColor = MaterialTheme.colorScheme.primaryContainer
)
) {
}
<ph type="x-smartling-placeholder">
서체 접근성
M3 서체 스케일은 정적 유형 램프와 값을 업데이트하여 단순화된 크기 카테고리의 동적 프레임워크입니다.
예를 들어 M3에서 작은 디스플레이에 다른 값을 할당할 수 있습니다. 광고를 게재할 수 있습니다.
큰 화면
Material은 앱을 만들기 위한 적응형 레이아웃 및 폴더블에 관한 안내를 제공합니다. 접근성이 뛰어나고 대형 기기를 소지하는 사용자의 인체공학을 개선합니다.
Material은 여러 종류의 탐색을 제공하여 대형 기기에 더 나은 사용자 환경을 제공합니다.
Android 대형 화면 앱 품질 가이드라인에 관해 자세히 알아보세요. 답장 샘플에서 적응형 디자인 및 접근성을 갖춘 디자인을 참고하세요.
자세히 알아보기
Compose의 Material Theming에 관한 자세한 내용은 다음을 확인하세요. 리소스:
샘플 앱
문서
API 참조 및 소스 코드
동영상
추천 서비스
- 참고: JavaScript가 사용 중지되어 있으면 링크 텍스트가 표시됩니다.
- Compose에서 Material 2에서 Material 3으로 이전
- Compose의 Material Design 2
- Compose의 맞춤 디자인 시스템