Materyal Tasarım 3

Jetpack Compose, Materyal Tasarım'ın bir sonraki evrimi olan Materyal Tasarım 3'ün bir uygulamasını sunar. Material 3'te dinamik renk gibi güncellenmiş tema, bileşenler ve Material You kişiselleştirme özellikleri bulunur. Material 3, 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, örnek olarak Reply örnek uygulamasını kullanarak Materyal Tasarım 3 uygulamasını gösteriyoruz. Yanıt örneği tamamen Materyal Tasarım 3'e dayanır.

Materyal Tasarım'ı kullanarak örnek uygulamayı yanıtlama 3
Şekil 1. Örnek uygulamayı Materyal Tasarım 3'ü kullanarak yanıtlama

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, yazı tipi ve şekil gibi Materyal Tasarım sistemleri eklemeye başlayabilirsiniz.

Deneysel API'ler

Bazı M3 API'ler deneysel olarak kabul edilir. Bu tür durumlarda, ExperimentalMaterial3Api ek açıklamasını kullanarak işlev veya dosya düzeyinde özelliği etkinleştirmeniz gerekir:

// import androidx.compose.material3.ExperimentalMaterial3Api
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun AppComposable() {
    // M3 composables
}

Malzeme teması

M3 teması şu alt sistemleri içerir: renk şeması, yazı ve şekiller. Bu değerleri özelleştirdiğinizde, değişiklikleriniz uygulamanızı derlemek için kullandığınız M3 bileşenlerine otomatik olarak yansıtılır.

Materyal tasarımın alt sistemleri: Renk, Tipografi ve Şekiller
Şekil 2. Materyal Tasarım alt sistemleri: renk, tipografi ve şekiller

Jetpack Compose bu kavramları M3 MaterialTheme composable ile uygular:

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

Uygulama içeriğinizi temaya uygun hale getirmek için uygulamanıza özgü renk şemasını, yazı tipini ve şekilleri tanımlayın.

Renk şeması

Renk şemasının temeli, beş ana renkten oluşan bir gruptur. Bu renklerin her biri, Material 3 bileşenleri tarafından kullanılan 13 tonluk bir ton paletiyle ilişkilidir. Örneğin, Yanıtla özelliği için açık temanın renk şeması şu şekildedir:

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

Renk şeması ve renk rolleri hakkında daha fazla bilgi edinin.

Renk şemaları oluşturma

Manuel olarak özel ColorScheme oluşturabilseniz de markanızın kaynak renklerini kullanarak oluşturmak genellikle daha kolaydır. Materyal Tema Oluşturucu aracı, bunu yapmanıza ve isteğe bağlı olarak tema oluşturma kodunu dışa aktarmanıza olanak tanır. Aşağıdaki dosyalar oluşturulur:

  • Color.kt, açık ve koyu tema renkleri için tanımlanmış 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ı ve 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() kullanmanız gerekir. Sistem ayarına bağlı olarak kullanılacak renk şemasını tanımlayın: açık veya koyu.

Dinamik renk şemaları

Dinamik renk, Material You'nun temel parçasıdır. Burada bir algoritma, kullanıcının duvar kağıdından özel renkler türetir ve kullanıcının uygulamalarına ve sistem kullanıcı arayüzüne uygulanır. Bu renk paleti, açık ve koyu renk şemaları oluşturmak için başlangıç noktası olarak kullanılır.

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

Dinamik renk özelliği, Android 12 ve sonraki sürümlerde kullanılabilir. Dinamik renk kullanılabiliyorsa bir dinamik ColorScheme ayarlayabilirsiniz. Aksi takdirde, özel açık veya koyu ColorScheme kullanmaya devam etmelisiniz.

ColorScheme, dinamik 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ızda Materyal tema renklerine MaterialTheme.colorScheme üzerinden erişebilirsiniz:

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ünde filtre çipleri gibi daha az belirgin bileşenler için kullanılır ve renk ifadesi için fırsat sunar.
  • Üçüncül anahtar rengi, birincil ve ikincil renkleri dengelemek veya bir öğeye daha fazla dikkat çekmek için kullanılabilecek zıtlık vurgularının rollerini türetmek için kullanılır.

Yanıt örneği uygulama tasarımı, seçilen öğeyi vurgulamak için birincil kapsayıcının üzerinde birincil kapsayıcı rengini kullanır.

Birincil kapsayıcı renginde birincil kapsayıcı ve metin alanları.
Şekil 5. Birincil kapsayıcı renginde 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,
    )
}

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

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

Yazı biçimi

Materyal Tasarım 3, Materyal Tasarım 2'den uyarlanan metin stilleri de dahil olmak üzere bir tür ölçeği tanımlar. Adlandırma ve gruplandırma şu şekilde basitleştirildi: görüntülü, başlık, başlık, gövde ve etiket; her biri için büyük, orta ve küçük boyutlarda.

Materyal tasarım için varsayılan tipografi ölçeği 3
Şekil 7. Materyal Tasarım 3 için varsayılan tipografi ölçeği
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

Tipografiyi tanımlayın

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, özelleştirmek istemediğiniz parametreleri çıkarabilirsiniz. Böylece her stil için varsayılanlar sunulur:

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

Farklı yazı biçimi kullanımları için büyük gövde, orta gövde tipi ve orta boy etiket.
Şekil 8. Büyük gövde, orta gövde tipi ve farklı yazı biçimi kullanımları için etiket orta boy (medium)
.

Ürününüzün muhtemelen Materyal Tasarım türü ölçeğindeki 15 varsayılan stile de ihtiyacı olmayacaktır. Bu örnekte, azaltılmış bir küme için beş boyut seçilmişken geri kalan boyutlar atlanmıştır.

TextStyle varsayılan değerlerini ve fontFamily ile letterSpacing gibi yazı tipiyle ilgili özellikleri 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 özelliğini tanımladıktan sonra M3 MaterialTheme'ye iletin:

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

Metin stillerini kullanma

M3 MaterialTheme composable'ına sağlanan yazı tipini MaterialTheme.typography kullanarak alabilirsiniz:

Text(
    text = "Hello M3 theming",
    style = MaterialTheme.typography.titleLarge
)
Text(
    text = "you are learning typography",
    style = MaterialTheme.typography.bodyMedium
)

Yazı biçimi uygulama hakkında Materyal yönergeleri hakkında daha fazla bilgi edinebilirsiniz.

Şekiller

Malzeme yüzeyleri farklı şekillerde görüntülenebilir. Dikkati doğrudan şekillendirir, bileşenleri tanımlar, durumu bildirir ve markayı ifade eder.

Şekil ölçeği, kapsayıcı köşelerinin stilini tanımlar ve kareden tamamen dairesele uzanan bir yuvarlaklık aralığı sunar.

Şekil tanımlama

Compose, yeni M3 şekillerini desteklemek için M3 Shapes sınıfını genişletilmiş parametrelerle sağlar. M3 şekil ölçeği daha çok tür ölçeğe benzer, kullanıcı arayüzünde çeşitli şekiller sunar.

Şekillerin farklı 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 öğenizi tanımladıktan sonra M3'e (MaterialTheme) iletebilirsiniz:

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

Şekilleri kullanma

Şekil ölçeğini MaterialTheme içindeki tüm bileşenler için özelleştirebilir veya bu işlemi her bileşen için ayrı ayrı yapabilirsiniz.

Orta ve büyük şekilleri varsayılan değerlerle uygula:

Card(shape = MaterialTheme.shapes.medium) { /* card content */ }
FloatingActionButton(
    shape = MaterialTheme.shapes.large,
    onClick = {
    }
) {
    /* fab content */
}

Yanıt örnek uygulamasındaki Kayan işlem düğmesi için Kart için orta şekil ve Büyük şekil.
Şekil 9. Yanıt örnek uygulamasında Kart için orta şekil ve Kayan işlem düğmesi için Büyük şekil

Oluştur'un parçası olan iki şekil daha var (RectangleShape ve CircleShape). Dikdörtgen şeklinde kenarlık yarıçapı yoktur ve daire şeklinde kenarlar tam daire içinde gösterilir:

Card(shape = RectangleShape) { /* card content */ }
Card(shape = CircleShape) { /* card content */ }

Aşağıdaki örneklerde, varsayılan şekil değerlerinin uygulandığı bazı bileşenler gösterilmektedir:

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

Şekil uygulama konusunda Materyal yönergeleri hakkında daha fazla bilgi edinebilirsiniz.

Vurgu

M3'te vurgu, renk varyasyonları ve bunların 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 alınan yüzey, yüzey varyantı ve arka plan renklerinin yanı sıra yüzey, yüzey varyantı ve arka plan da kullanılarak. Örneğin, yüzey-varyant ile yüzey varyantı ve yüzey varyantıyla birlikte kullanılarak farklı vurgu düzeyleri sağlanabilir.
Vurgu için nötr renk kombinasyonları kullanmak.
Şekil 11. Vurgu için nötr renk kombinasyonları kullanmak.
  • 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

3. Malzeme, genel olarak ton şeklindeki renklerde yer paylaşımları kullanarak yükseltmeyi temsil eder. Bu, container'ları ve yüzeyleri birbirinden ayırt etmenin yeni bir yoludur. Gölgelerin yanı sıra ton rakımının artmasıyla birlikte daha belirgin bir ton kullanılır.

Gölge yüksekliğiyle ton yüksekliği
Şekil 12. Gölge yüksekliği ile ton yüksekliğiE

Koyu temalardaki yükseklik yer paylaşımları da Malzeme 3'te ton rengi kaplamalarıyla değiştirildi. Bindirme rengi, birincil renk alanından gelir.

Materyal Tasarım 3'te gölge yüksekliği ve Ton yüksekliği
Şekil 13. Materyal Tasarım 3'te gölge yüksekliği ile Ton yüksekliği karşılaştırması

Çoğu M3 bileşeninin arkasındaki destek olan M3 Surface, hem ton hem de gölge yüksekliği desteği içerir:

Surface(
    modifier = Modifier,
    tonalElevation = /*...
    shadowElevation = /*...
) {
    Column(content = content)
}

Malzeme bileşenleri

Materyal Tasarım, Materyal Temaları'na uygun olan ve güzel Materyal Tasarım uygulamaları geliştirmenize yardımcı olan zengin bir Materyal bileşenleri grubu (ör. düğmeler, çipler, kartlar, gezinme çubuğu) içerir. Bileşenleri hemen varsayılan özelliklerle kullanmaya başlayabilirsiniz.

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

M3, aynı bileşenlerin vurgu ve ilgiye göre farklı rollerde kullanılmak üzere birçok sürümünü sunar.

FAB düğmesi vurgusu, birincilden metin düğmesine
Şekil 14. FAB düğmesi vurgusu, birincilden metin düğmesine
  • En vurgulu 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),
    )
}

  • Vurgulu bir işlem için doldurulmuş bir düğme:

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

  • Az vurgulu işlem için metin düğmesi:

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

Malzeme düğmeleri ve diğer bileşenler hakkında daha fazla bilgi edinebilirsiniz. 3. Materyal, 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.

Material, farklı ekran boyutlarına ve durumlarına 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, yatay moddaki küçük ila orta boyutlu tabletler veya telefonlar için kullanılır. Kullanıcılara ergonomik görünüm sağlar ve bu cihazların kullanıcı deneyimini iyileştirir.

NavigationRail(
    modifier = Modifier.fillMaxHeight(),
) {
    Destinations.entries.forEach { replyDestination ->
        NavigationRailItem(
            selected = selectedDestination == replyDestination,
            onClick = { },
            icon = { }
        )
    }
}

Alt Gezinme Çubuğu(Sol) ve NavigationRail(Sağ) Vitrini Yanıtla
Şekil 15. Yanıtlayın: BottomNavigationBar (Sol) ve NavigationRail (Sağ) Vitrini

Tüm cihaz boyutlarında yoğun bir kullanıcı deneyimi sağlamak için her ikisini de varsayılan temada kullanarak yanıtlayın.

NavigationDrawer, ayrıntıları göstermek için yeterli alana sahip olduğunuz orta ila büyük boyutlu tabletler için kullanılır. NavigationRail ile birlikte hem PermanentNavigationDrawer hem de ModalNavigationDrawer kullanabilirsiniz.

PermanentNavigationDrawer(modifier = Modifier.fillMaxHeight(), drawerContent = {
    Destinations.entries.forEach { replyDestination ->
        NavigationRailItem(
            selected = selectedDestination == replyDestination,
            onClick = { },
            icon = { },
            label = { }
        )
    }
}) {
}

Yanıt Kalıcı gezinme çekmecesi vitrini
Şekil 16. Kalıcı gezinme çekmecesinin yanıt vitrini

Gezinme seçenekleri kullanıcı deneyimini, ergonomiyi ve erişilebilirliği iyileştirir. Uyarlanabilir codelab'de Materyal gezinme bileşenleri hakkında daha fazla bilgi edinebilirsiniz.

Bir 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 gerekirse renklerini özelleştirmek için esnek API'leri kullanıma sunar.

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
}

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 stil ve sistem kullanıcı arayüzünden gelir. Değişimlerin yaşandığı iki temel alan, dalga ve üst kaydırmadır. Bu değişikliklerin uygulanması için ek çalışma yapılması gerekmez.

Dalga

Dalga artık basıldığında yüzeyleri aydınlatmak için hafif bir parıltı kullanıyor. Compose Material Ripple'ı, Android'de arka planda RippleDrawable platformu kullanır. Bu nedenle, parıltı dalgası, Android 12 ve sonraki sürümlerde tüm Materyal bileşenleri için kullanılabilir.

M2 ve M3'te Dalgalanma
Şekil 17. M2 ve M3'te Dalga

Fazla kaydırma

Fazla kaydırma artık kaydırma kapsayıcılarının kenarında bir esneme efekti kullanıyor. API düzeyinden bağımsız olarak Compose Foundation 1.1.0 ve sonraki sürümlerde, kaydırma container composable'ları (ör. LazyColumn, LazyRow ve LazyVerticalGrid) için esneme fazla kaydırma özelliği varsayılan olarak açıktır.

Kapsayıcının kenarındaki genişletme efektini kullanarak fazla kaydırın
Şekil 18. Kapsayıcının kenarındaki genişletme efektini kullanarak fazla kaydırın

Erişilebilirlik

Materyal bileşenlerine yerleştirilen 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, kör olan, işitme bozukluğu, zihinsel engelli, motor bozukluğu veya durumsal engelli (kırık kol gibi) 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ıyla ilgili erişilebilirlik standartlarını karşılayacak şekilde tasarlanmıştır. Ton paletleri sistemi, herhangi bir renk şemasının varsayılan olarak erişilebilir olması için kritik öneme sahiptir.

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

Yanıt örnek uygulaması: Birincil, ikincil ve üçüncül ton paletleri (yukarıdan aşağıya)
Şekil 19. Yanıt örnek uygulaması: Birincil, ikincil ve üçüncül ton paletleri (yukarıdan aşağıya)

Tüm Material bileşenleri ve dinamik temalar, erişilebilirlik gereksinimlerini karşılamak üzere seçilmiş bir dizi tonal palet arasından yukarıda belirtilen renk rollerini zaten kullanmaktadır. Ancak bileşenleri özelleştiriyorsanız uygun renk rolleri kullandığınızdan ve uyumsuzluktan kaçındığınızdan emin olun.

Kullanıcıya erişilebilir kontrast sağlamak amacıyla birincil kapsayıcının üzerinde birincil ve birincil kapsayıcının üzerinde birincil kapsayıcının üzerinde, diğer vurgu ve nötr renkler için de aynısını kullanın.

Birincil öğenin üzerinde üçüncül bir container kullanılması, kullanıcıya zayıf bir kontrast düğmesi verir:

// ✅ 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
    )
) {
}

Yeterli kontrast (sol) - Zayıf kontrast (sağ)
Şekil 20. Yeterli kontrast (sol) ve zayıf kontrast (sağ)

Tipografiyle ilgili erişilebilirlik

M3 türü ölçek, farklı cihazlarda ölçeklenen boyut kategorilerinin basitleştirilmiş ancak dinamik bir çerçevesini sunmak için statik tür rampasını ve değerlerini günceller.

Örneğin, M3'te Küçük Ekran'a cihaz bağlamına bağlı olarak (ör. telefon veya tablet) farklı değerler atanabilir.

Büyük ekranlar

Material, uygulamanızın erişilebilir olmasını sağlamak ve büyük cihazlara sahip kullanıcıların ergonomisini iyileştirmek için uyarlanabilir düzenler ve katlanabilir cihazlar konusunda rehberlik sağlar.

Malzeme, büyük cihazlarda daha iyi kullanıcı deneyimi sunmanıza yardımcı olmak için farklı gezinme türleri sağlar.

Android'in büyük ekran yönergeleri hakkında daha fazla bilgi edinebilir, uyarlanabilir ve erişilebilir tasarım için Yanıt örneğimizi inceleyebilirsiniz.

Daha fazla bilgi

Oluşturma'da Materyal Temaları 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