Materyal Tasarım 3

Jetpack Compose, Material You ve Materyal Tasarım'ın bir sonraki evrimi olan Material 3 Expressive'in bir uygulamasını sunar. M3 Expressive, Materyal Tasarım 3'ün genişletilmiş bir sürümüdür. Tema, bileşenler, hareket, tipografi ve daha fazlasıyla ilgili araştırmalara dayalı güncellemeler içerir. Bu güncellemelerin tümü, kullanıcıların seveceği ilgi çekici ve arzu edilen ürünler oluşturmanıza yardımcı olmak için tasarlanmıştır. Ayrıca dinamik renk gibi Material You kişiselleştirme özelliklerini de destekler. M3 Expressive, Android 16'nın görsel stilini ve sistem arayüzünü tamamlar.

Aşağıda, Reply örnek uygulamasını kullanarak Materyal Tasarım 3 uygulamasını gösteriyoruz. Reply örneği tamamen Materyal Tasarım 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, tipografi ve şekil gibi Materyal Tasarım sistemlerini 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
}
Material3Snippets.kt

Materyal teması oluşturma

M3 teması şu 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 MaterialTheme composable ile uygular:

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

Uygulama içeriğinize tema uygulamak için uygulamanıza özel renk şemasını, tipografiyi ve şekilleri tanımlayın.

Renk şeması

Renk şemasının temeli, beş ana renkten oluşur. Bu renklerin her biri, Material 3 bileşenleri tarafından kullanılan 13 tonluk bir ton paletiyle ilgilidir. Örneğin, Reply 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ızın kaynak renklerini kullanarak bir tane oluşturmak daha kolaydır. Materyal Teması Oluşturma Builder aracı, bunu yapmanıza ve isteğe bağlı olarak Compose tema 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)
// ..
// ..
Material3Snippets.kt

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

Açık ve koyu temaları desteklemek için isSystemInDarkTheme() kullanın. Sistem ayarına göre hangi renk şemasının (açık veya koyu) kullanılacağını belirleyin.

Dinamik renk şemaları

Dinamik renk, Material You'nun önemli bir parçasıdır. Bir algoritma, kullanıcının duvar kağıdından özel renkler türeterek 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 kullanmanız gerekir.

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

Renk kullanımı

Uygulamanızda Materyal tema renklerine MaterialTheme.colorScheme aracılığıyla erişebilirsiniz:

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

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 renk, 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 anahtar renk, birincil ve ikincil renkleri dengelemek veya bir öğeye daha fazla dikkat çekmek için kullanılabilecek kontrast vurguların rollerini belirlemek için kullanılır.

Reply örnek uygulama tasarımında, seçili öğeyi vurgulamak için primary-container üzerinde on-primary-container rengi kullanılı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,
    )
}
Material3Snippets.kt

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

Yazı biçimi

Materyal Tasarım 3, Materyal Tasarım 2'den uyarlanan metin stilleri de dahil olmak üzere bir yazı tipi ölçeği tanımlar. Adlandırma ve gruplandırma basitleştirilerek ekran, üst başlık, başlık, gövde ve etiket olarak değiştirildi. Her biri için büyük, orta ve küçük boyutlar mevcut.

Tipografiyi tanımlama

Compose, Material 3 yazı ö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

Ürününüzün, Materyal Tasarım tür ölçeğindeki 15 varsayılan stilin tümüne ihtiyacı olmayabilir. Bu örnekte, küçültülmüş bir grup için beş boyut seçilirken diğerleri çıkarılmıştır.

TextStyle ve fontFamily ile letterSpacing gibi yazı tipiyle ilgili özelliklerin varsayılan değerlerini 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
),
Material3Snippets.kt

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

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

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

Tipografi uygulama ile ilgili Materyal yönergeleri hakkında daha fazla bilgi edinebilirsiniz.

Şekiller

Materyal yüzeyler farklı şekillerde gösterilebilir. Şekiller doğrudan dikkat çeker, bileşenleri tanımlar, durumu bildirir ve markayı ifade eder.

Şekil ölçeği, kapsayıcı köşelerinin stilini tanımlar ve kareden tam daireye kadar çeşitli yuvarlaklık seçenekleri sunar.

Şekilleri tanımlama

Compose, yeni M3 şekillerini desteklemek için genişletilmiş parametrelerle M3 Shapes sınıfını sağlar. M3 şekil ölçeği, yazı tipi ölçeğine daha çok benzer ve kullanıcı arayüzünde etkileyici bir şekil yelpazesi sunar.

Farklı boyutlarda şekiller 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 öğenizi tanımladıktan sonra M3 MaterialTheme öğesine iletebilirsiniz:

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

Şekilleri kullanma

MaterialTheme içindeki tüm bileşenler için şekil ölçeğini özelleştirebilir veya bunu bileşen bazında yapabilirsiniz.

Varsayılan değerlerle orta ve büyük şekil uygulama:

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

Compose'da RectangleShape ve CircleShape olmak üzere iki şekil daha vardır. Dikdörtgen şeklin kenar yarıçapı yoktur ve daire şekli tam daire şeklinde kenarlar gösterir:

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

Aşağıdaki örneklerde, varsayılan şekil değerleri uygulanmış bazı bileşenler 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üzü vurgulamanın iki yolu vardır:

• Genişletilmiş M3 renk sistemindeki surface, surface-variant ve background renklerinin yanı sıra on-surface ve on-surface-variants renklerini kullanma Ö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ı vurgular sağlamak için yazı tipi ölçeğimize özel ağırlıklar sağlayabileceğinizi gördünüz.

bodyLarge = TextStyle(
    fontWeight = FontWeight.Bold
),
bodyMedium = TextStyle(
    fontWeight = FontWeight.Normal
)
Material3Snippets.kt

Rakım

Material 3, yükseltiyi temel olarak tonlu renk yer paylaşımları kullanarak gösterir. Bu, gölgelere ek olarak kapsayıcıları ve yüzeyleri birbirinden ayırt etmenin yeni bir yoludur. Ton yüksekliğini artırmak için daha belirgin bir ton kullanılır.

Koyu temalardaki yükseklik yer paylaşımları da Material 3'te ton rengi yer paylaşımları olarak değiştirildi. Yer paylaşımı rengi, birincil renk alanından alınır.

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

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

Material bileşenleri

Materyal Tasarım, Materyal Teması Oluşturma'ya uygun olan ve güzel Materyal Tasarım uygulamaları oluşturmanıza yardımcı olan zengin bir Materyal bileşenleri (düğmeler, çipler, kartlar, gezinme çubuğu gibi) setiyle birlikte gelir. Varsayılan özelliklere sahip bileşenleri hemen kullanmaya başlayabilirsiniz.

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

M3, vurgu ve dikkate göre farklı rollerde kullanılacak aynı bileşenlerin birçok sürümünü 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),
    )
}
Material3Snippets.kt

• Yüksek vurgulu bir işlem için doldurulmuş düğme:

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

• Düşük vurgulu bir işlem için metin düğmesi:

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

Material 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 sunar.

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 sunar.

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 ila orta boy tabletler veya telefonlar için yatay modda kullanılır. Kullanıcılara ergonomi sağlar ve bu cihazlar için kullanıcı deneyimini iyileştirir.

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

Tüm cihaz boyutlarında etkileyici 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 alanınızın olduğu orta ila büyük boyutlu tabletlerde 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 = { }
        )
    }
}) {
}
Material3Snippets.kt

Gezinme seçenekleri kullanıcı deneyimini, ergonomiyi ve erişilebilirliği iyileştirir. Materyal gezinme bileşenleri hakkında daha fazla bilgiyi Compose uyarlanabilir codelab'inde bulabilirsiniz.

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 gerektiğinde renklerini özelleştirmek için esnek API'ler sunulur.

Kartlar ve düğmeler gibi çoğu bileşen, bileşeninizi özelleştirmek için değiştirilebilen 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

Material 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şikliklerin yapıldığı iki önemli alan, dalgalanma ve kaydırma sonudur. Bu değişiklikleri uygulamak için ek bir işlem yapmanız gerekmez.

Dalga

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

Kaydırma sonu

Kaydırma sonu artık kaydırma kapsayıcılarının kenarında esnetme efekti kullanıyor. API düzeyinden bağımsız olarak Compose Foundation 1.1.0 ve sonraki sürümlerde, kaydırılabilir kapsayıcı composable'larında (ör. LazyColumn, LazyRow ve LazyVerticalGrid) esneterek kaydırma sonu varsayılan olarak etkindir.

Erişilebilirlik

Materyal bileşenlerinde yerleşik olarak bulunan erişilebilirlik standartları, kapsayıcı ürün tasarımı için bir temel oluşturacak şekilde tasarlanmıştır. Ürününüzün erişilebilirliğini anlamak, az görme, körlük, işitme bozuklukları, bilişsel bozukluklar, motor bozukluklar veya durumsal engeller (ör. 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ıyla 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 kritik öneme sahiptir.

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

Tüm Material bileşenleri ve dinamik temalar, erişilebilirlik şartlarını karşılamak için seçilen tonal paletler grubundaki yukarıdaki renk rollerini kullanır. Ancak bileşenleri özelleştiriyorsanız uygun renk rollerini kullanın ve uyumsuzluktan kaçının.

Kullanıcıya erişilebilir kontrast sağlamak için birincil rengin üzerinde birincil renk üstü, birincil kapsayıcının üzerinde birincil kapsayıcı üstü rengini kullanın. Diğer vurgu ve nötr renkler için de aynı kuralı uygulayın.

Birincil kapsayıcının üzerinde üçüncül kapsayıcı kullanıldığında, kullanıcıya düşük kontrastlı bir düğme sunulur:

// ✅ 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

Tipografi erişilebilirliği

M3 yazı tipi ölçeği, statik yazı tipi rampasını ve değerlerini güncelleyerek cihazlar arasında ölçeklenen, basitleştirilmiş ancak dinamik bir boyut kategorileri çerçevesi sunar.

Örneğin, M3'te Display Small, cihaz bağlamına (ör. telefon veya tablet) bağlı olarak farklı değerler alabilir.

Büyük ekranlar

Material, uygulamalarınızı erişilebilir hale getirmek ve büyük cihazları tutan kullanıcıların ergonomisini iyileştirmek için uyarlanabilir düzenler ve katlanabilir cihazlar hakkında rehberlik sağlar.

Material, büyük cihazlarda daha iyi bir kullanıcı deneyimi sunmanıza yardımcı olmak için farklı gezinme türleri sunar.

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

Daha fazla bilgi

Compose'da Materyal Teması Oluşturma hakkında daha fazla bilgi edinmek için aşağıdaki kaynaklara göz atın:

Örnek uygulamalar

• Reply M3 örnek uygulaması

Dokümanlar

• Compose'da Material 2'den Material 3'e geçiş
• Materyal Tasarım yönergeleri

API referansı ve kaynak kodu

• Compose Material 3 API referansı
• Kaynak kodundaki Compose Material 3 örnekleri

Videolar

• Jetpack Compose'da Material You