Materyal Tasarım 3

Jetpack Compose, Materyal Tasarım 3 uygulamasını sunar. Materyal Tasarım'ın yeni evrimi. 3. Materyal 3. Materyal 3. Materyal 3'te, bileşenleri ile Material You kişiselleştirme özelliklerini kullanın ve Android 12'deki yeni görsel stil ve sistem kullanıcı arayüzüyle uyumlu olacak şekilde tasarlandı. ve üzeri.

Not: "Material Design 3", "Material 3" ve "M3" terimleri birbirinin yerine kullanılabilir. Mevcut Materyal Tasarım spesifikasyonu ve ilgili androidx.compose.material kitaplığı "Materyal Tasarım 2", "Materyal 2" veya "M2" olarak adlandırılır.

Aşağıda, Materyal Tasarım 3 uygulamasını gösteriyoruz bunu örnek olarak Yanıtlama örnek uygulamasını kullanabilirsiniz. Yanıt örneği tamamen Material Design 3'e dayanır.

Şekil 1. Materyal Tasarım 3'ü kullanan yanıt örnek uygulaması

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:

// import androidx.compose.material3.ExperimentalMaterial3Api
@Composable
fun AppComposable() {
    // M3 composables
}
Material3Snippets.kt

Materyal teması oluşturma

Bir M3 temasında şu alt sistemleri içerir: colorschema, yazım 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.

Şekil 2. Materyal Tasarım'ın alt sistemleri: renk, yazı tipi ve şekiller

Jetpack Compose bu kavramları M3 MaterialTheme sürümünde uyguluyor. composable:

MaterialTheme(
    colorScheme = /* ...
    typography = /* ...
    shapes = /* ...
) {
    // M3 app content
}
Material3Snippets.kt

Uygulama içeriğinizi temalandırmak için renk şemasını, tipografiyi ve ve şekiller oluşturabilirsiniz.

Renk şeması

Renk şemasının temeli, beş temel rengin oluşturduğu kümedir. Bunların her biri renkler, Malzeme 3 tarafından kullanılan 13 tonluk bir ton paletine karşılık gelir bileşenlerine ayıralım. Örneğin, Yanıtla'nın açık tema renk şeması şu şekildedir:

Şekil 3. Yanıt uygulaması için açık renk şeması örneği

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. Malzeme Teması Builder aracı, bunu yapmanıza ve isteğe bağlı olarak dışa aktarmanıza olanak tanır. Tema kodu oluşturun. 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)
// ..
// ..
Material3Snippets.kt

• Theme.kt, açık ve koyu renk şemaları ile uygulama için bir kurulum içeriyor tıklayın.

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
    )
}
Material3Snippets.kt

Açık ve koyu temaları desteklemek için isSystemInDarkTheme() kullanın. Referans olarak sistem ayarında, hangi renk şemasının kullanılacağını tanımlayın: açık veya koyu.

Dinamik renk şemaları

Dinamik renk, Material You'nun en önemli bileşenidir. algoritması, kullanıcının cihazına uygulamak için kullanıcının duvar kağıdından özel renkler uygulamalar ve sistem kullanıcı arayüzü. Bu renk paleti, açık ve koyu renk şemaları oluşturmak için başlangıç noktası olarak kullanılır.

Şekil 4. Duvar kağıdından (solda) ve varsayılan uygulama temasından (sağ) örnek uygulama dinamik temasını yanıtlama

'nı inceleyin.

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 ışık oluşturmak için derleyici işlevleri sağlar veya koyu renk şeması:

// 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
}
Material3Snippets.kt

Renk kullanımı

Uygulamanızdaki Materyal tema renklerine şuradan erişebilirsiniz: MaterialTheme.colorScheme:

Text(
    text = "Hello theming",
    color = MaterialTheme.colorScheme.primary
)
Material3Snippets.kt

Her bir renk rolü, bileşenin özelliklerine bağlı olarak çeşitli yerlerde kullanılabilir durum, belirginlik ve vurgulamadır.

• Birincil renk, belirgin gibi ana bileşenler için kullanılan temel renktir düğmeleri, etkin durumları ve yükseltilmiş yüzeylerin tonunu gösterir.
• İ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 birincil kapsayıcı üzerinde on-primary-container rengi kullanılmıştır.

Şekil 5. Birincil kapsayıcı rengine sahip birincil kapsayıcı ve metin alanları.

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,
    )
}
Material3Snippets.kt

Yanıt Gezinme çekmecesinde, ikincil ve üçüncül kapsayıcı renklerinin vurgu ve vurgu oluşturmak için kontrastla nasıl kullanıldığını görebilirsiniz.

Şekil 6. Kayan işlem düğmesi için üçüncül kapsayıcı ve üçüncül kapsayıcı üzerinde kombinasyonu.

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.

Şekil 7. Materyal Tasarım 3 için varsayılan yazı tipi ölçeği

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

Not: M2 Typography sınıfının aksine M3 Typography sınıfı şu anda defaultFontFamily parametresi içermiyor. Bunun yerine, her TextStyles için fontFamily parametresini kullanmanız gerekir.

Tipografiyi 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
    ),
    // ..
)
// ..
Material3Snippets.kt

Şekil 8. Farklı tipografi kullanımı için büyük, gövde rengi ve etiket aracısı.

Ürününüz için muhtemelen Materyal Tasarım'daki 15 varsayılan stilin tamamına ihtiyacınız olmayacaktır ölçek türü. Bu örnekte küçültülmüş bir grup için beş boyut seçilmiştir ve diğerleri atlanı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
),
Material3Snippets.kt

Typography öğenizi tanımladıktan sonra M3 MaterialTheme'e iletin:

MaterialTheme(
    typography = replyTypography,
) {
    // M3 app Content
}
Material3Snippets.kt

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
)
Material3Snippets.kt

Materyal yönergeleri hakkında daha fazla bilgi için yazı biçimi.

Ş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 dairesele yuvarlaklık.

Şekilleri tanımlama

Compose, M3 Shapes sınıfını desteklemek için genişletilmiş parametreler sağlar. yeni M3 şekillerine dokunun. M3 şekil ölçeği, kullanıcı arayüzünde etkileyici bir şekil yelpazesi sunan tür ölçeğine daha çok benzer.

Farklı şekil boyutları vardır:

• Ekstra Küçük
• Küçük
• Orta
• 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)
)
Material3Snippets.kt

Shapes değerinizi tanımladıktan sonra M3 MaterialTheme'e iletebilirsiniz:

MaterialTheme(
    shapes = replyShapes,
) {
    // M3 app Content
}
Material3Snippets.kt

Şekilleri kullanma

Şekil ölçeğini, MaterialTheme 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 */
}
Material3Snippets.kt

Şekil 9. Yanıtlama örnek uygulamasında Kart için orta, Kayan işlem düğmesi için büyük şekil

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 */ }
Material3Snippets.kt

Aşağıdaki örneklerde, varsayılan şekil değerlerine sahip bileşenlerden bazıları gösterilmektedir şunları uyguladı:

Şekil 10. Tüm Materyal 3 bileşenleri için varsayılan şekil değerleri.

Materyal yönergeleri hakkında daha fazla bilgi için şekil ekleyin.

Vurgu

M3'te vurgu, renk çeşitleri ve renk üzerindeki renkler kullanılarak sağlanır emin olun. M3'te, kullanıcı arayüzünüze vurgu eklemenin iki yolu vardır:

• Yüzeyle birlikte yüzey, yüzey varyantı ve arka planın kullanılması, Genişletilmiş M3 renk sisteminden yüzey üzerindeki varyant renkler. Örneğin, farklı vurgu düzeyleri sağlamak için surface, on-surface-variant ile ve surface-variant, on-surface ile kullanılabilir.

Şekil 11. Vurgu için nötr renk kombinasyonları kullanın.

• Metin için farklı yazı tipi ağırlı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
)
Material3Snippets.kt

Not: M3'te devre dışı bırakılmış durumlarda "on-x" kullanılabilir (burada x birincil, ikincil, yüzey vb.) olmak üzere alfa değerleriyle birlikte kullanabilirsiniz.

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.

Şekil 12. Gölge yüksekliği ile ton rakımı

'nı inceleyin.

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 alanından gelir.

Şekil 13. Materyal Tasarım 3'te gölge yüksekliği ve Ton rakımı

'nı inceleyin.

Ç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)
}
Material3Snippets.kt

Malzeme 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. Web sitemiz g.co/newsinitiative/labs üzerinden varsayılan özelliklere sahip bileşenleri hemen kullanmaya başlayabilirsiniz.

Button(onClick = { /*..*/ }) {
    Text(text = "My Button")
}
Material3Snippets.kt

M3, farklı rollerde kullanılmak üzere aynı bileşenlerin birçok farklı versiyonunu sunar. net bir şekilde tanımlamalısınız.

Şekil 14. FAB, Birincil ve Metin düğmelerinin vurgusu

• 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),
    )
}
Material3Snippets.kt

• Yüksek öneme sahip bir işlem için doldurulmuş düğme:

Button(onClick = { /*..*/ }) {
    Text(text = stringResource(id = R.string.view_entry))
}
Material3Snippets.kt

• Düşük öneme sahip bir işlem için metin düğmesi:

TextButton(onClick = { /*..*/ }) {
    Text(text = stringResource(id = R.string.replated_articles))
}
Material3Snippets.kt

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ı, 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 = { }
        )
    }
}
Material3Snippets.kt

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 = { }
        )
    }
}
Material3Snippets.kt

Şekil 15. BottomNavigationBar (Sol) ve NavigationRail (Sağ) için Yanıt Gösterimi

Herkese kapsamlı bir kullanıcı deneyimi sunmak için varsayılan temada her ikisini de kullanarak yanıtlayın cihaz boyutlarına bağlı.

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 = { }
        )
    }
}) {
}
Material3Snippets.kt

Şekil 16. Kalıcı gezinme çekmecesinin yer aldığı yanıt vitrini

Gezinme seçenekleri kullanıcı deneyimini, ergonomiyi ve erişilebilirliği iyileştirir. Materyal gezinme bileşenleri hakkında daha fazla bilgiyi şurada bulabilirsiniz: Uyarlanabilir codelab'ler oluşturun.

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
}
Material3Snippets.kt

Materyal 3'ü ö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şikliklerin uygulanması için ek işlem yapılması gerekmez.

Dalga

Dalgalanma, artık yüzeylere basıldığında yüzeyleri aydınlatmak için hafif bir parıltı kullanıyor. Compose Material Ripple, aşağıdaki platformlarda bir platform RippleDrawable özelliğini kullanır. Android sayesinde ışıltı dalga, Android 12 ve sonraki tüm Materyaller için kullanılabilir. bileşenlerine ayıralım.

Şekil 17. M2 ve M3'te Dalgalanma

'nı inceleyin.

Fazla kaydırma

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.

Şekil 18. Kapsayıcının kenarında uzatma efekti kullanarak kaydırma

'nı inceleyin.

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şilebilirlik, erişilebilirlik özellikleri düşük olanlar da dahil olmak üzere, tüm kullanıcılar için görme, körlük, işitme bozukluğu, bilişsel bozukluklar, motor bozukluklar veya durumsal engellilik (ör. kırık kol).

Renk erişilebilirliği

Dinamik renk, renk kontrastı ile ilgili erişilebilirlik standartlarını karşılayacak şekilde tasarlanmıştır. Ton paletlerinden oluşan sistem, herhangi bir renk şemasını erişilebilir hale getirmek açısından kritik öneme sahiptir varsayılan olarak.

Malzemenin renk sistemi, standart ton değerleri ve ölçümleriyle erişilebilir kontrast oranlarını karşılamak için kullanılır.

Şekil 19. Yanıt örnek uygulaması: Birincil, ikincil ve üçüncül ton paletleri (üstten alta)

Tüm Material bileşenleri ve dinamik temalar, erişilebilirlik şartlarını karşılamak için seçilen bir ton paleti grubundan 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 ile 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
    )
) {
}
Material3Snippets.kt

Şekil 20. Yeterli kontrast (solda) ve düşük kontrast (sağda)

Yazı biçimi erişilebilirliği

M3 türü ölçek, statik tür rampayı ve değerleri güncelleyerek farklı cihazlarda ölçeklendirilen dinamik bir boyut kategorisi çerçevesine sahiptir.

Örneğin, M3'te "Görüntülü Reklam Ağı'ndaki küçük ekrana" reklam grubuna bağlı olarak tespit edebilirsiniz.

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österici bilgiler sunar.

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ğıdakilere göz atın: kaynaklar:

Örnek uygulamalar

• Reply M3 örnek uygulaması

Dokümanlar

• Oluşturma bölümünde 2. malzemeden 3. malzemeye geçme
• Materyal tasarım yönergeleri

API referansı ve kaynak kodu

• Material 3 API referansı
• Kaynak kodda Materyal 3 örnekleri oluşturma

Videolar

• Jetpack Compose'da Material You