Jetpack Compose, Materyal Tasarım'ın yeni evrimi olan Materyal Tasarım 3'ün uygulanmasını sunar. Güncellenmiş tema, bileşen ve dinamik renk gibi Material You kişiselleştirme özellikleri içeren Material 3, Android 12 ve sonraki sürümlerin yeni görsel stili ve sistem kullanıcı arayüzüyle uyumlu olacak şekilde tasarlandı.
Aşağıda, örnek olarak Reply örnek uygulaması kullanılarak Materyal Tasarım 3 uygulaması gösterilmektedir. Yanıt örneği tamamen Materyal Tasarım 3'e dayanır.
Bağımlılık
Compose uygulamanızda Materyal 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, tipografi ve şekil gibi Materyal Tasarım 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
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun AppComposable() {
// M3 composables
}
Materyal teması oluşturma
M3 temasında şu alt sistemler bulunur: 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, şu kavramları M3 MaterialTheme composable ile 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 şekillerini tanımlayın.
Renk şeması
Renk şemasının temeli, beş temel rengin oluşturduğu kümedir. Bu renklerin her biri, Malzeme 3 bileşenleri tarafından kullanılan 13 tonluk bir ton paletine aittir. Örneğin, Yanıtla için açık temanın renk şeması şudur:
Renk şeması ve renk rolleri hakkında daha fazla bilgi edinin.
Renk şemaları oluşturun
Manuel olarak özel bir ColorScheme oluşturabilirsiniz ancak markanızın kaynak renklerini kullanarak bir özel ColorScheme oluşturmak genellikle daha kolaydır. Materyal Tema Oluşturucu aracı, bunu yapmanızı ve isteğe bağlı olarak Oluşturma tema kodunu dışa aktarmanızı sağlar. 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 kurulum 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 bağlı olarak hangi renk şemasının kullanılacağını tanımlayın: açık veya koyu.
Dinamik renk şemaları
Dinamik renk, Material You'nun önemli bir parçasıdır. Bir algoritma, kullanıcının uygulamalarına ve sistem kullanıcı arayüzüne uygulanacak duvar kağıdından özel renkler elde eder. Bu renk paleti, açık ve koyu renk şemaları oluşturmak için başlangıç noktası olarak kullanılır.
Dinamik renk özelliği Android 12 ve sonraki sürümlerde kullanılabilir. Dinamik renk kullanılabiliyorsa dinamik bir ColorScheme ayarlayabilirsiniz. Değilse özel bir açık veya koyu
ColorScheme kullanmanızı öneririz.
ColorScheme, dinamik bir açık veya koyu renk şeması oluşturmak için derleyici 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ızda Materyal tema renklerine şu adresten erişebilirsiniz: MaterialTheme.colorScheme:
Text(
text = "Hello theming",
color = MaterialTheme.colorScheme.primary
)
Her bir 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ünde filtre çipleri gibi daha az belirgin bileşenler için kullanılır ve renk ifadesi için daha fazla fırsat sunar.
- Üçüncül anahtar rengi, birincil ve ikincil renkleri dengelemek veya bir öğeye daha fazla dikkat çekmek için kullanılabilecek zıt vurgu rollerini elde etmek amacıyla kullanılır.
Reply (Yanıtla) örnek uygulama tasarımı, seçilen öğeyi vurgulamak için birincil kapsayıcının üst kısmında birincil kapsayıcı rengini kullanı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,
)
}
Burada, Yanıt Gezinme çekmecesinde vurgu ve vurgu oluşturmak için ikincil ve üçüncül kapsayıcı renklerinin aksine nasıl kullanıldığını görebilirsiniz.
Yazı biçimi
Materyal Tasarım 3, Malzeme Tasarım 2'den uyarlanan metin stillerini içeren bir tür ölçeğini tanımlar. Adlandırma ve gruplandırma; görüntülü reklam, başlık, başlık, gövde ve etiket olmak üzere (her biri büyük, orta ve küçük boyutlarda olacak şekilde) basitleştirildi.
| Y3 | 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 |
Tipografiyi tanımlama
Compose, Materyal 3 türü ölçeğini modellemek için mevcut TextStyle ve yazı tipiyle ilgili sınıflarla birlikte M3 Typography sınıfını sağlar. Typography oluşturucusu her stil için varsayılan ayarlar 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 muhtemelen Materyal Tasarım türü ölçeğindeki 15 varsayılan stilin tamamına ihtiyaç duymayacaktır. Bu örnekte, azaltılmış bir grup için beş boyut seçilmiş, ancak geri kalanlar çıkarılmıştır.
TextStyle'ın varsayılan değerlerini ve fontFamily ile letterSpacing gibi yazı tipiyle ilgili özellikleri değiştirerek tipografinizi ö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'ye iletin:
MaterialTheme(
typography = replyTypography,
) {
// M3 app Content
}
Metin stillerini kullanma
M3 MaterialTheme composable'ına sağlanan tipografiyi MaterialTheme.typography kullanarak alabilirsiniz:
Text(
text = "Hello M3 theming",
style = MaterialTheme.typography.titleLarge
)
Text(
text = "you are learning typography",
style = MaterialTheme.typography.bodyMedium
)
Materyal yönergeleri hakkında daha fazla bilgi için yazı biçimi uygulama konusuna bakabilirsiniz.
Şekiller
Malzeme yüzeyleri farklı şekillerde gösterilebilir. Doğrudan dikkati şekillendirir, bileşenleri belirler, durum hakkında bilgi verir ve markayı ifade eder.
Şekil ölçeği, kapsayıcı köşelerinin stilini tanımlar ve kareden tamamen dairesele kadar çeşitli yuvarlaklık seçenekleri sunar.
Şekil tanımlama
Compose, M3 Shapes sınıfına yeni M3 şekillerini desteklemek için genişletilmiş parametreler sağlar. M3 şekil ölçeği, daha çok tür ölçeğine benzer ve kullanıcı arayüzünde etkileyici bir şekil yelpazesine olanak tanır.
Farklı şekil boyutları vardır:
- Ekstra Küçük
- Küçük
- Ortam
- Büyük
- Ekstra Büyük
Varsayılan olarak her şeklin varsayılan bir değeri vardır, ancak bunları 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 tanımladıktan sonra M3'e MaterialTheme aktarabilirsiniz:
MaterialTheme(
shapes = replyShapes,
) {
// M3 app Content
}
Şekilleri kullanma
Şekil ölçeğini MaterialTheme içindeki tüm bileşenler için özelleştirebilir veya
bunu bileşen bazında yapabilirsiniz.
Orta ve büyük şekli varsayılan değerlerle uygulayın:
Card(shape = MaterialTheme.shapes.medium) { /* card content */ }
FloatingActionButton(
shape = MaterialTheme.shapes.large,
onClick = {
}
) {
/* fab content */
}
Compose'un parçası olan iki şekil daha (RectangleShape ve CircleShape) vardır. Dikdörtgen şeklin kenarlık yarıçapı yoktur ve daire şeklinde kenarlar tam daire içine alınmış olarak gösterilir:
Card(shape = RectangleShape) { /* card content */ }
Card(shape = CircleShape) { /* card content */ }
Aşağıdaki örneklerde, varsayılan şekil değerlerine sahip bazı bileşenler gösterilmektedir:
Şekil uygulama hakkında Materyal yönergeleri hakkında daha fazla bilgi edinebilirsiniz.
Vurgu
M3'te vurgu, renk çeşitleri ve renkle ilgili 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 üzerinde varyantlar ve yüzey üzerindeki varyant renklerle birlikte yüzey, yüzey varyantı ve arka plan kullanımı. Örneğin, yüzey üzerinde varyant, yüzey varyantı ise farklı vurgu seviyeleri sağlamak için yüzeyde kullanılabilir.
- Metin için farklı yazı tipi ağırlıkları kullanma. Yukarıda, farklı vurgu sağlamak için tür ölçeğimize özel ağırlıklar sağlayabileceğinizi gördünüz.
bodyLarge = TextStyle(
fontWeight = FontWeight.Bold
),
bodyMedium = TextStyle(
fontWeight = FontWeight.Normal
)
Yükseklik
Malzeme 3, genel olarak tonal renk yer paylaşımları kullanılarak yüksekliği temsil eder. Bu, container'ları ve yüzeyleri birbirinden ayırt etmenin yeni bir yoludur. Ton yüksekliği artırıldığında gölgelere ek olarak daha belirgin bir ton kullanılır.
Koyu temalardaki yükseklik yer paylaşımları da Malzeme 3'te ton rengi yer paylaşımları olarak değiştirilmiştir. Yer paylaşımı rengi, birincil renk alanından gelir.
Çoğu M3 bileşeninin arkasındaki composable olan M3 Yüzey, hem ton hem de gölge yükseltmesini destekler:
Surface(
modifier = Modifier,
tonalElevation = /*...
shadowElevation = /*...
) {
Column(content = content)
}
Malzeme bileşenleri
Materyal Tasarım, Materyal Tasarım'ı uygulayan ve göz alıcı Materyal Tasarım uygulamaları oluşturmanıza yardımcı olan zengin bir Materyal bileşen grubuyla (düğmeler, çipler, kartlar, gezinme çubuğu gibi) birlikte sunulur. Varsayılan özelliklere sahip bileşenleri kullanıma hazır şekilde kullanmaya başlayabilirsiniz.
Button(onClick = { /*..*/ }) {
Text(text = "My Button")
}
M3, yapılan vurguya ve dikkate göre farklı rollerde kullanılmak üzere aynı bileşenlerin birçok versiyonunu sunar.
- En yüksek vurgu işlemi için genişletilmiş 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 vurgulu işlem için doldurulmuş bir 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))
}
Materyal düğmeleri ve diğer bileşenler hakkında daha fazla bilgi edinebilirsiniz. Material 3, farklı kullanım alanları ve ekran boyutları için özel olarak tasarlanmış Düğmeler, Uygulama çubukları ve Gezinme bileşenleri gibi çok çeşitli bileşen paketleri sağlar.
Gezinme bileşenleri
Material, farklı ekran boyutlarına ve durumlarına bağlı olarak gezinmeyi uygulamanıza yardımcı olan çeşitli gezinme bileşenleri de sağlar.
5 veya daha az hedefi hedeflemek istediğinizde NavigationBar, küçük cihazlar için kullanılır:
NavigationBar(modifier = Modifier.fillMaxWidth()) {
Destinations.entries.forEach { replyDestination ->
NavigationBarItem(
selected = selectedDestination == replyDestination,
onClick = { },
icon = { }
)
}
}
NavigationRail, yatay moddaki küçük ila orta boyutlu tabletler veya telefonlar için kullanılır. Kullanıcılara ergonomik 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ğ) Yanıt Öne ÇıkanTüm cihaz boyutlarında kapsamlı bir kullanıcı deneyimi sunmak için varsayılan temada her ikisini de kullanarak yanıt verin.
NavigationDrawer, ayrıntıları göstermek için yeterli alana sahip olduğunuz orta ila 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 geliştirir. Uyarlanabilir codelab oluşturma'da Materyal gezinme bileşenleri hakkında daha fazla bilgi edinebilirsiniz.
Bileşenin temasını özelleştirme
M3, kişiselleştirmeyi ve esnekliği teşvik eder. Tüm bileşenlere varsayılan renkler uygulanır ancak gerektiğinde renklerini özelleştirmek için esnek API'ler kullanılır.
Kartlar ve düğmeler gibi çoğu bileşen, bileşeninizi özelleştirmek için değiştirilebilecek, renk ve yükseklik arayüzleri 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
}
Materyal 3'ü özelleştirme hakkında daha fazla bilgi edinebilirsiniz.
Sistem Arayüzü
Material You'nun bazı özellikleri, Android 12 ve sonraki sürümlerdeki yeni görsel stilden ve sistem kullanıcı arayüzünden gelir. Değişikliklerin yaşandığı iki temel alan, dalgalanma ve fazla kaydırmadır. Bu değişikliklerin uygulanması için ek işlem yapılması gerekmez.
Dalga
Ripple, basıldığında yüzeyleri aydınlatmak için artık hafif bir parıltı kullanıyor. Compose Material Ripple, Android'de arka planda bir RippleDrawable platformunu kullanır. Bu nedenle, ışıltı Ripple, tüm Material bileşenleri için Android 12 ve sonraki sürümlerde kullanılabilir.
Fazla kaydırma
Fazla kaydırma artık, kaydırma kapsayıcılarının kenarında bir genişletme efekti kullanıyor.
API düzeyinden bağımsız olarak Compose Foundation 1.1.0 ve sonraki sürümlerde kaydırma kapsayıcısı composable'ları (örneğin, LazyColumn, LazyRow ve LazyVerticalGrid) için uzatma fazla kaydırma özelliği varsayılan olarak etkindir.
Erişilebilirlik
Materyal bileşenlere entegre edilen erişilebilirlik standartları, kapsayıcı ürün tasarımı için bir temel sağlamak amacıyla tasarlanmıştır. Ürününüzün erişilebilirliğini anlamak; az gören, görme engelli, işitme engeli, zihinsel engeli, bedensel engeli veya durumsal engelli (kırık kol) dahil olmak üzere tüm kullanıcılar için kullanılabilirliği artırabilir.
Renk erişilebilirliği
Dinamik renk, renk kontrastı erişilebilirlik standartlarını karşılayacak şekilde tasarlanmıştır. Ton paletlerinden oluşan sistem, herhangi bir renk şemasını varsayılan olarak erişilebilir hale getirmede kritik öneme sahiptir.
Malzemenin renk sistemi, erişilebilir kontrast oranlarını karşılamak için kullanılabilecek standart ton değerleri ve ölçümler sağlar.
Tüm Malzeme bileşenleri ve dinamik temalar, erişilebilirlik gereksinimlerini karşılamak için seçilmiş bir dizi ton paletinde yukarıdaki renk rollerini zaten kullanmaktadır. Ancak, bileşenleri özelleştiriyorsanız uygun renk rollerini kullandığınızdan emin olun ve uyuşmazlıktan kaçının.
Kullanıcıya erişilebilir kontrast sağlamak için birincil kapsayıcının üstünde birincil, birincil kapsayıcının üstünde ise birincil kapsayıcıyı, diğer vurgu ve nötr renkler için de aynısını kullanın.
Birincilin üstünde üçüncül bir kapsayıcının kullanılması, kullanıcıya zayıf bir kontrast düğmesi 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çek, statik tür rampasını ve değerleri güncelleyerek cihazlar arasında ölçeklendirilen boyut kategorilerinin basitleştirilmiş ancak dinamik bir çerçevesini sunar.
Örneğin, M3'te Display Small'a cihaz bağlamına göre telefon veya tablet gibi farklı değerler atanabilir.
Büyük ekranlar
Material, uygulamalarınızı erişilebilir hale getirmek ve büyük cihaz sahibi kullanıcıların ergonomisini iyileştirmek için uyarlanabilir düzenler ve katlanabilir cihazlar hakkında yol gösterici bilgiler sunar.
Material, büyük cihazlarda daha iyi kullanıcı deneyimi sağlamanıza yardımcı olmak için farklı gezinme türleri sağlar.
Android büyük ekran uygulaması kalite yönergeleri hakkında daha fazla bilgi edinebilir, uyarlanabilir ve erişilebilir tasarım için Yanıt örneğimize göz atabilirsiniz.
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
- Compose'da Materyal 2'den Materyal 3'e geçiş
- Compose'da Materyal Tasarım 2
- Compose'da özel tasarım sistemleri