Jetpack Compose, Materyal Tasarımın bir sonraki aşaması olan Materyal Tasarım 3'ün bir uygulamasını sunar. Material 3, güncellenmiş temalar, bileşenler ve dinamik renk gibi Material You kişiselleştirme özelliklerini içerir. Android 12 ve sonraki sürümlerdeki yeni görsel stil ve sistem kullanıcı arayüzüyle uyumlu olacak şekilde tasarlanmıştır.
Aşağıda, Yanıt örnek uygulamasını kullanarak Materyal Tasarım 3 uygulamasını gösteriyoruz. Yanıt örneği tamamen Material Design 3'e dayanır.
Bağımlılık
Compose uygulamanızda Material 3'ü kullanmaya başlamak için build.gradle dosyalarınıza Compose Material 3 bağımlılığını ekleyin:
implementation "androidx.compose.material3:material3:$material3_version"
Bağımlılık eklendikten sonra uygulamalarınıza renk, yazı tipi ve şekil gibi Material Design sistemleri eklemeye başlayabilirsiniz.
Deneysel API'ler
Bazı M3 API'leri deneysel olarak kabul edilir. Bu gibi durumlarda, ExperimentalMaterial3Api ek açıklamasını kullanarak işlev veya dosya düzeyinde etkinleştirmeniz gerekir:
// import androidx.compose.material3.ExperimentalMaterial3Api
@Composable
fun AppComposable() {
// M3 composables
}
Materyal teması oluşturma
M3 teması aşağıdaki alt sistemleri içerir: renk şeması, tipografi ve şekiller. Bu değerleri özelleştirdiğinizde değişiklikleriniz, uygulamanızı oluşturmak için kullandığınız M3 bileşenlerine otomatik olarak yansıtılır.
Jetpack Compose bu kavramları M3 MaterialThemebirleştirilebiliriyle uygular:
MaterialTheme(
colorScheme = /* ...
typography = /* ...
shapes = /* ...
) {
// M3 app content
}
Uygulama içeriğinizi temalandırmak için uygulamanıza özgü renk şemasını, yazı tipini ve şekilleri tanımlayın.
Renk şeması
Renk şemasının temeli beş temel renkten oluşan gruptur. Bu renklerin her biri, Material 3 bileşenleri tarafından kullanılan 13 tondan oluşan bir ton paletiyle ilgilidir. Örneğin, Yanıtla için açık temanın renk şeması şu şekildedir:
Renk şeması ve renk rolleri hakkında daha fazla bilgi edinin.
Renk şemaları oluşturma
Özel bir ColorScheme'ü manuel olarak oluşturabilirsiniz ancak genellikle markanızdaki kaynak renkleri kullanarak oluşturmak daha kolaydır. Material Theme Builder aracı bunu yapmanıza ve isteğe bağlı olarak Compose tema oluşturma kodunu dışa aktarmanıza olanak tanır. Aşağıdaki dosyalar oluşturulur:
Color.kt, hem açık hem de koyu tema renkleri için tanımlanan tüm rollerle birlikte temanızın renklerini içerir.
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, açık ve koyu renk şemaları ile uygulama teması için bir ayar içerir.
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
)
}
Açık ve koyu temaları desteklemek için isSystemInDarkTheme() kullanın. Sistem ayarına göre açık veya koyu renk şemasını seçin.
Dinamik renk şemaları
Dinamik renk, Material You'un temel unsurudur. Bu özellikte, bir algoritma kullanıcının duvar kağıdından özel renkler alır ve bunları uygulamalarına ve sistem kullanıcı arayüzüne uygular. Bu renk paleti, açık ve koyu renk şemaları oluşturmak için başlangıç noktası olarak kullanılır.
Dinamik renk, Android 12 ve sonraki sürümlerde kullanılabilir. Dinamik renk kullanılabiliyorsa dinamik ColorScheme ayarlayabilirsiniz. Aksi takdirde, özel bir açık veya koyu ColorScheme kullanmalısınız.
ColorScheme, dinamik bir açık veya koyu renk şeması oluşturmak için oluşturucu işlevleri sağlar:
// 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
}
Renk kullanımı
Uygulamanızdaki Material tema renklerine şu yöntemlerle erişebilirsinizMaterialTheme.colorScheme:
Text(
text = "Hello theming",
color = MaterialTheme.colorScheme.primary
)
Her renk rolü, bileşenin durumuna, belirginliğine ve vurgusuna bağlı olarak çeşitli yerlerde kullanılabilir.
- Birincil renk, belirgin düğmeler, etkin durumlar ve yükseltilmiş yüzeylerin tonu gibi ana bileşenler için kullanılan temel renktir.
- İkincil anahtar rengi, kullanıcı arayüzündeki filtre çipleri gibi daha az belirgin bileşenler için kullanılır ve renk ifadesi fırsatını genişletir.
- Üçüncül ana renk, birincil ve ikincil renkleri dengelemek veya bir öğeye daha fazla dikkat çekmek için kullanılabilecek zıt vurguların rollerini belirlemek amacıyla kullanılır.
Yanıt örnek uygulama tasarımında, seçili öğeye vurgu yapmak için primary-container öğesinin üstünde on-primary-container rengi kullanılmıştır.
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,
)
}
Yanıt Gezinme çekmecesinde, ikincil ve üçüncül kapsayıcı renklerinin vurgu ve aksan oluşturmak için kontrastla nasıl kullanıldığını görebilirsiniz.
Yazı biçimi
Materyal Tasarım 3, Materyal Tasarım 2'den uyarlanmış metin stilleri de dahil olmak üzere bir yazı tipi ölçeği tanımlar. Adlandırma ve gruplandırma, her biri büyük, orta ve küçük boyutlarda olmak üzere görüntülü, başlık, başlık, gövde ve etiket olarak basitleştirildi.
| M3 | Varsayılan Yazı Tipi Boyutu/Satır Yüksekliği |
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 |
Yazı biçimini tanımlama
Compose, Material 3 tür ölçeğini modellemek için mevcut TextStyle ve yazı tipiyle ilgili sınıfların yanı sıra M3 Typography sınıfını sağlar. Typography oluşturucu, her stil için varsayılan değerler sunar. Böylece, özelleştirmek istemediğiniz parametreleri atlayabilirsiniz:
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
),
// ..
)
// ..
Ürününüz için Material Design stil ölçeğindeki 15 varsayılan stilin tamamına ihtiyaç duymayabilirsiniz. Bu örnekte, azaltılmış bir grup için beş boyut seçilirken geri kalanlar atlanmıştır.
TextStyle ve fontFamily ile letterSpacing gibi yazı tipiyle ilgili özelliklerin varsayılan değerlerini değiştirerek yazı tipinizi özelleştirebilirsiniz.
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 öğenizi tanımladıktan sonra M3 MaterialTheme'e iletin:
MaterialTheme(
typography = replyTypography,
) {
// M3 app Content
}
Metin stillerini kullanma
MaterialTheme.typography kullanarak M3 MaterialTheme bileşenine sağlanan yazı tipini alabilirsiniz:
Text(
text = "Hello M3 theming",
style = MaterialTheme.typography.titleLarge
)
Text(
text = "you are learning typography",
style = MaterialTheme.typography.bodyMedium
)
Yazı tiplerini uygulama ile ilgili Materyal yönergeleri hakkında daha fazla bilgi edinebilirsiniz.
Şekiller
Malzeme yüzeyleri farklı şekillerde gösterilebilir. Şekiller dikkati yönlendirir, bileşenleri tanımlar, durumu iletir ve markayı ifade eder.
Şekil ölçeği, kapsayıcı köşelerinin stilini tanımlar ve kareden tamamen dairesel olana kadar çeşitli yuvarlaklık seçenekleri sunar.
Şekilleri tanımlama
Oluşturma, yeni M3 şekillerini desteklemek için M3 Shapes sınıfına genişletilmiş parametreler sağlar. M3 şekil ölçeği, kullanıcı arayüzünde etkileyici bir şekil yelpazesi sunan tür ölçeğine daha çok benzer.
Farklı boyutlarda şekiller vardır:
- Ekstra Küçük
- Küçük
- Orta
- Büyük
- Ekstra Büyük
Her şeklin varsayılan bir değeri vardır ancak bu değerleri geçersiz kılabilirsiniz:
val replyShapes = Shapes(
extraSmall = RoundedCornerShape(4.dp),
small = RoundedCornerShape(8.dp),
medium = RoundedCornerShape(12.dp),
large = RoundedCornerShape(16.dp),
extraLarge = RoundedCornerShape(24.dp)
)
Shapes değerinizi tanımladıktan sonra M3 MaterialTheme'e iletebilirsiniz:
MaterialTheme(
shapes = replyShapes,
) {
// M3 app Content
}
Şekilleri kullanma
Şekil ölçeğini MaterialTheme'teki tüm bileşenler için özelleştirebilir veya bileşen bazında özelleştirebilirsiniz.
Varsayılan değerlerle orta ve büyük şekil uygulayın:
Card(shape = MaterialTheme.shapes.medium) { /* card content */ }
FloatingActionButton(
shape = MaterialTheme.shapes.large,
onClick = {
}
) {
/* fab content */
}
Oluşturma'nın bir parçası olan RectangleShape ve CircleShape olmak üzere iki şekil daha vardır. Dikdörtgen şeklindeki kenarlık yarıçapı yoktur ve daire şeklindeki kenarlık tamamen daire içine alınmış kenarlara sahiptir:
Card(shape = RectangleShape) { /* card content */ }
Card(shape = CircleShape) { /* card content */ }
Aşağıdaki örneklerde, varsayılan şekil değerleri uygulanmış bileşenlerden bazıları gösterilmektedir:
Şekil uygulama ile ilgili Materyal yönergeleri hakkında daha fazla bilgi edinebilirsiniz.
Vurgu
M3'te vurgu, rengin varyasyonları ve renk kombinasyonları kullanılarak sağlanır. M3'te kullanıcı arayüzünüze vurgu eklemenin iki yolu vardır:
- Genişletilmiş M3 renk sisteminden yüzey, yüzey varyantı ve arka planın yanı sıra yüzeyde ve yüzey varyantlarında kullanılan renkleri kullanın. Örneğin, farklı vurgu düzeyleri sağlamak için surface, on-surface-variant ile ve surface-variant, on-surface ile kullanılabilir.
- Metin için farklı yazı tipi kalınlıkları kullanma Yukarıda, farklı vurgu sağlamak için yazı tipi ölçeğimize özel ağırlıklar atayabileceğinizi görmüştünüz.
bodyLarge = TextStyle(
fontWeight = FontWeight.Bold
),
bodyMedium = TextStyle(
fontWeight = FontWeight.Normal
)
Yükseklik
3. malzeme, yüksekliği temel olarak tonlu renk yer paylaşımları kullanarak gösterir. Bu, kapsayıcıları ve yüzeyleri birbirinden ayırmanın yeni bir yoludur. Ton yükseltme özelliği, gölgelere ek olarak daha belirgin bir ton kullanır.
Koyu temalardaki yükseklik yer paylaşımları da Material 3'te tonlu renk yer paylaşımlarına değiştirildi. Yer paylaşımı rengi, birincil renk yuvasından alınır.
Çoğu M3 bileşeninin arkasındaki destekleyici kompozisyon olan M3 Yüzey, hem ton hem de gölge yüksekliği desteği içerir:
Surface(
modifier = Modifier,
tonalElevation = /*...
shadowElevation = /*...
) {
Column(content = content)
}
Material bileşenleri
Materyal Tasarım, Materyal Teması'na uygun ve güzel Materyal Tasarım uygulamaları oluşturmanıza yardımcı olan zengin bir Materyal bileşenleri (ör. düğmeler, çipler, kartlar, gezinme çubuğu) grubuyla birlikte gelir. Bileşenleri varsayılan özelliklerle hemen kullanmaya başlayabilirsiniz.
Button(onClick = { /*..*/ }) {
Text(text = "My Button")
}
M3, vurguya ve dikkate göre farklı rollerde kullanılacak aynı bileşenlerin birçok sürümünü sağlar.
- En fazla vurgu yapılan işlem için genişletilmiş bir kayan işlem düğmesi:
ExtendedFloatingActionButton(
onClick = { /*..*/ },
modifier = Modifier
) {
Icon(
imageVector = Icons.Default.Edit,
contentDescription = stringResource(id = R.string.edit),
)
Text(
text = stringResource(id = R.string.add_entry),
)
}
- Yüksek öneme sahip bir işlem için doldurulmuş düğme:
Button(onClick = { /*..*/ }) {
Text(text = stringResource(id = R.string.view_entry))
}
- Düşük vurgulu bir işlem için metin düğmesi:
TextButton(onClick = { /*..*/ }) {
Text(text = stringResource(id = R.string.replated_articles))
}
Material düğmeleri ve diğer bileşenleri hakkında daha fazla bilgi edinebilirsiniz. Material 3, farklı kullanım alanları ve ekran boyutları için özel olarak tasarlanmış düğmeler, uygulama çubukları, gezinme bileşenleri gibi çok çeşitli bileşen paketleri sunar.
Gezinme bileşenleri
Material, farklı ekran boyutlarına ve durumlara bağlı olarak gezinme uygulamanıza yardımcı olan çeşitli gezinme bileşenleri de sağlar.
NavigationBar, 5 veya daha az hedefi hedeflemek istediğinizde kompakt cihazlar için kullanılır:
NavigationBar(modifier = Modifier.fillMaxWidth()) {
Destinations.entries.forEach { replyDestination ->
NavigationBarItem(
selected = selectedDestination == replyDestination,
onClick = { },
icon = { }
)
}
}
NavigationRail, küçük ve orta boyutlu tabletler veya telefonlarda yatay modda kullanılır. Kullanıcılara ergonomi sağlar ve bu cihazlarda kullanıcı deneyimini iyileştirir.
NavigationRail(
modifier = Modifier.fillMaxHeight(),
) {
Destinations.entries.forEach { replyDestination ->
NavigationRailItem(
selected = selectedDestination == replyDestination,
onClick = { },
icon = { }
)
}
}
BottomNavigationBar (Sol) ve NavigationRail (Sağ) için Yanıt GösterimiTüm cihaz boyutlarında sürükleyici bir kullanıcı deneyimi sunmak için varsayılan temada her ikisini de kullanarak yanıt verin.
NavigationDrawer, ayrıntıları gösterecek yeterli alana sahip olduğunuz orta ve büyük boyutlu tabletlerde kullanılır. NavigationRail ile birlikte PermanentNavigationDrawer veya ModalNavigationDrawer kullanabilirsiniz.
PermanentNavigationDrawer(modifier = Modifier.fillMaxHeight(), drawerContent = {
Destinations.entries.forEach { replyDestination ->
NavigationRailItem(
selected = selectedDestination == replyDestination,
onClick = { },
icon = { },
label = { }
)
}
}) {
}
Gezinme seçenekleri kullanıcı deneyimini, ergonomiyi ve erişilebilirliği iyileştirir. Uyarlanabilir kod laboratuarı oluşturma başlıklı makalede Material gezinme bileşenleri hakkında daha fazla bilgi edinebilirsiniz.
Bileşenlerin temasını özelleştirme
M3, kişiselleştirmeyi ve esnekliği teşvik eder. Tüm bileşenlere varsayılan renkler uygulanır ancak gerekirse renklerini özelleştirmek için esnek API'ler sağlanır.
Kartlar ve düğmeler gibi çoğu bileşen, bileşeninizi özelleştirmek için değiştirilebilecek renk ve yükseklik arayüzlerini gösteren varsayılan bir nesne sağlar:
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
}
3. materyali özelleştirme hakkında daha fazla bilgi edinebilirsiniz.
Sistem Arayüzü
Material You'un bazı özellikleri, Android 12 ve sonraki sürümlerdeki yeni görsel stilden ve sistem kullanıcı arayüzünden alınmıştır. Değişiklik yapılan iki önemli alan dalgalanma ve aşırı kaydırmadır. Bu değişiklikleri uygulamak için ek işlem yapmanız gerekmez.
Dalga
Dalgalanma özelliği artık yüzeylere basıldığında yüzeyleri aydınlatmak için hafif bir parıltı kullanıyor. Materyal dalga oluşturma, Android'de platform RippleDrawable'ı kullandığından parıltı dalgaları, Android 12 ve sonraki sürümlerde tüm Material bileşenleri için kullanılabilir.
Kaydırma sonu
Aşırı kaydırma özelliği artık kaydırılabilir kapsayıcıların kenarında germe efekti kullanıyor.
API düzeyinden bağımsız olarak, Compose Foundation 1.1.0 ve sonraki sürümlerde kaydırmalı kapsayıcı bileşenlerinde (ör. LazyColumn, LazyRow ve LazyVerticalGrid) varsayılan olarak uzamalı kaydırma etkindir.
Erişilebilirlik
Materyal bileşenlerine yerleştirilmiş erişilebilirlik standartları, kapsayıcı ürün tasarımı için temel oluşturmak üzere tasarlanmıştır. Ürününüzün erişilebilirliğini anlamak, görme sorunu, körlük, işitme sorunu, bilişsel sorun, motor sorunu veya durumsal engel (ör. kol kırığı) olan kullanıcılar da dahil olmak üzere tüm kullanıcılar için kullanılabilirliği artırabilir.
Renk erişilebilirliği
Dinamik renk, renk kontrastı ile ilgili erişilebilirlik standartlarını karşılayacak şekilde tasarlanmıştır. Ton paletleri sistemi, herhangi bir renk şemasını varsayılan olarak erişilebilir hale getirmek için çok önemlidir.
Material'ın renk sistemi, erişilebilir kontrast oranlarını karşılamak için kullanılabilecek standart ton değerleri ve ölçümler sağlar.
Tüm Material bileşenleri ve dinamik temalar, erişilebilirlik koşullarını karşılamak için seçilen bir dizi ton paletinden yukarıdaki renk rollerini zaten kullanır. Ancak bileşenleri özelleştiriyorsanız uygun renk rollerini kullandığınızdan ve eşleşmemelerden kaçının.
Kullanıcıya erişilebilir bir kontrast sağlamak için birincil rengin üzerine on-primary, birincil kapsayıcının üzerine on-primary-container ve diğer vurgu renkleri ve nötr renkler için de aynısını kullanın.
Birincil kapsayıcının üzerine üçüncül bir kapsayıcı kullanılması, kullanıcıya düşük kontrastlı bir düğme sunar:
// ✅ 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
)
) {
}
Yazı biçimi erişilebilirliği
M3 türü ölçeği, statik tür rampasını ve değerlerini güncelleyerek cihazlar arasında ölçeklendirilebilen basit ancak dinamik bir boyut kategorileri çerçevesi sunar.
Örneğin, M3'te Görüntülü Reklam Küçük, cihaz bağlamına (ör. telefon veya tablet) bağlı olarak farklı değerlere atanabilir.
Büyük ekranlar
Material, uygulamalarınızı erişilebilir hale getirmek ve büyük cihazları kullanan kullanıcıların ergonomisini iyileştirmek için uyarlanabilir düzenler ve katlanabilir cihazlar hakkında yol gösterir.
Material, büyük cihazlarda daha iyi kullanıcı deneyimi sunmanıza yardımcı olmak için farklı gezinme türleri sağlar.
Android büyük ekran uygulama kalitesi yönergeleri hakkında daha fazla bilgi edinebilir ve uyarlanabilir ve erişilebilir tasarım için yanıt örneğimizi inceleyebilirsiniz.
Daha fazla bilgi
Compose'da Materyal tema oluşturma hakkında daha fazla bilgi edinmek için aşağıdaki kaynaklara göz atın:
Örnek uygulamalar
Dokümanlar
API referansı ve kaynak kodu
Videolar
Sizin için önerilenler
- Not: JavaScript kapalıyken bağlantı metni gösterilir
- Oluşturma bölümünde 2. malzemeden 3. malzemeye geçme
- Oluşturma bölümündeki Material Design 2
- Compose'da özel tasarım sistemleri