Materyal Tasarım 3

Jetpack Compose, Materyal Tasarımın bir sonraki aşaması olan Materyal Tasarım 3'ün bir uygulaması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 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
}
Material3Snippets.kt

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

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

Uygulama içeriğinizi temalandırmak için uygulamanıza özel renk şemasını, yazı tipini ve şekilleri tanımlayın.

Renk şeması

Renk şemasının temeli, beş temel rengin oluşturduğu kümedir. Bu renklerin her biri, Material 3 bileşenleri tarafından kullanılan 13 tondan oluşan bir ton paletiyle ilgilidir. Örneğin, Yanıtla'nın açık tema renk şeması şu şekildedir:

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

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

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'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, Android 12 ve sonraki sürümlerde kullanılabilir. Dinamik renk kullanılabiliyorsa dinamik bir 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 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
}
Material3Snippets.kt

Renk kullanımı

Uygulamanızdaki Material tema renklerine şu yöntemlerle erişebilirsiniz: MaterialTheme.colorScheme

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

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

Yanıt Gezinme çekmecesinde, vurgu ve vurgu oluşturmak için ikincil ve üçüncül kapsayıcı renklerinin nasıl kontrastlı bir şekilde 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; 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.

Yazı biçimini 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
    ),
    // ..
)
// ..
Material3Snippets.kt

Ü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çilirken geri kalanlar atlanmış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
),
Material3Snippets.kt

Typography tanımladıktan sonra M3'e MaterialTheme 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 uygulama sayfasını inceleyebilirsiniz.

Ş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 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, daha çok tür ölçeğine benzer ve kullanıcı arayüzünde etkileyici bir şekil yelpazesine olanak tanır.

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 tanımladıktan sonra M3'e MaterialTheme aktarabilirsiniz:

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

Şekilleri kullanma

Şekil ölçeğini MaterialTheme'teki tüm bileşenler için özelleştirebilir veya bileşen bazında özelleştirebilirsiniz.

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

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ğ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 renkleri kullanın. Örneğin, farklı vurgu seviyeleri 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
)
Material3Snippets.kt

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 Malzeme 3'te ton rengi yer paylaşımları olarak değiştirilmiştir. 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)
}
Material3Snippets.kt

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

M3, yapılan vurguya ve dikkate göre farklı rollerde kullanılmak üzere aynı bileşenlerin birçok versiyonunu sunar.

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

NavigationRail, küçük ve orta boyutlu tabletler veya telefonlarda yatay modda 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 = { }
        )
    }
}
Material3Snippets.kt

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

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 temaları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ü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

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

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ş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, 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ı 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 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 emin olun ve uyuşmazlıktan 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

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 küçük ekran boyutu, telefon veya tablet gibi cihaz bağlamına 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ö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ğıdaki kaynaklara göz atın:

Örnek uygulamalar

• Reply M3 örnek uygulaması

Dokümanlar

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

API referansı ve kaynak kodu

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

Videolar

• Jetpack Compose'da Material You