Oluşturma'da Materyal 2'den Materyal 3'e geçme

Materyal Tasarım 3, Materyal Tasarım'ın yeni evrimidir. Güncellenmiş temalar, bileşenler ve dinamik renk gibi Material You kişiselleştirme özelliklerini içerir. Materyal Tasarım 2 için bir güncellemedir. Android 12 ve sonraki sürümlerdeki yeni görsel stil ve sistem kullanıcı arayüzüyle uyumludur.

Bu kılavuz, Compose Material (androidx.compose.material) Jetpack kitaplığından Compose Material 3 (androidx.compose.material3) Jetpack kitaplığına odaklanmaktadır.

Yaklaşımlar

Genel olarak, hem M2 hem de M3'ü tek bir uygulamada uzun süre kullanmamalısınız. Bunun nedeni, iki tasarım sistemi ile ilgili kitaplığın, kullanıcı deneyimi/kullanıcı arayüzü tasarımları ve Compose uygulamaları açısından önemli farklılıklar göstermesidir.

Uygulamanızda, Figma kullanılarak oluşturulan gibi bir tasarım sistemi kullanılıyor olabilir. Bu tür durumlarda, sizin veya tasarım ekibinizin Compose taşıma işlemine başlamadan önce M2'den M3'e taşımanızı önemle tavsiye ederiz. Kullanıcı deneyimi/kullanıcı arayüzü tasarımı M2'ye dayalı olan bir uygulamanın M3'e taşınması anlamlı değildir.

Ayrıca taşıma konusundaki yaklaşımınız, uygulamanızın boyutuna, karmaşıklığına ve kullanıcı deneyimi/kullanıcı arayüzü tasarımına bağlı olarak farklılık göstermelidir. Böylece kod tabanınız üzerindeki etkiyi en aza indirebilirsiniz. Taşıma işlemi için aşamalı bir yaklaşım benimsemeniz gerekir.

Taşınma zamanı

Taşıma işlemini en kısa sürede başlatmanız gerekir. Bununla birlikte, uygulamanızın M2'den M3'e tamamen geçiş yapmak için gerçekçi bir konumda olup olmadığını değerlendirmek önemlidir. Başlamadan önce göz önünde bulundurabileceğiniz bazı “engelleyici” senaryoları vardır:

Yukarıdaki senaryolardan etkilenseniz bile bir uygulama güncellemesi gerçekleştirmeden ve yayınlamadan önce taşıma işleminde aşamalı bir yaklaşım benimsemelisiniz. Bu durumda M2 ve M3'ü yan yana kullanır, M3'e geçerken ise M2'yi kademeli olarak kullanımdan kaldırırsınız.

Aşamalı yaklaşım

Aşamalı taşımanın genel adımları şunlardır:

1. M2 bağımlılığıyla birlikte M3 bağımlılığı ekleyin.
2. Uygulamanızın temalarının M2 sürümleriyle birlikte uygulama temalarınızın M3 sürümlerini ekleyin.
3. Uygulamanızın boyutuna ve karmaşıklığına bağlı olarak bağımsız modülleri, ekranları veya composable'ları M3'e taşıyın (ayrıntılar için aşağıdaki bölümlere bakın).
4. Tamamen taşındıktan sonra uygulamanızın temalarının M2 sürümlerini kaldırın.
5. M2 bağımlılığını kaldırın.

Bağımlılıklar

M3'ün ayrı bir paketi ve M2 sürümü vardır:

implementation "androidx.compose.material:material:$m2-version"

implementation "androidx.compose.material3:material3:$m3-version"

Materyal 3 oluşturma sürümleri sayfasında en son M3 sürümlerine bakın.

Ana M2 ve M3 kitaplıklarının dışındaki diğer Materyal bağımlılıkları değişmedi. M2 ve M3 paketleri ile sürümlerinin karışımını kullanırlar ancak bu durum taşıma işlemini etkilemez. M3'te olduğu gibi kullanılabilirler:

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
}

Tema oluşturma

Hem M2 hem de M3'te, composable tema MaterialTheme olarak adlandırılır ancak içe aktarma paketleri ve parametreleri birbirinden farklıdır:

import androidx.compose.material.MaterialTheme

MaterialTheme(
    colors = AppColors,
    typography = AppTypography,
    shapes = AppShapes
) {
    // M2 content
}

import androidx.compose.material3.MaterialTheme

MaterialTheme(
    colorScheme = AppColorScheme,
    typography = AppTypography,
    shapes = AppShapes
) {
    // M3 content
}

Renk

M3'teki renk sistemi, M2'den önemli ölçüde farklıdır. Renk parametrelerinin sayısı artmış, farklı adları vardır ve M3 bileşenleriyle farklı şekilde eşlenmiştir. Bu durum Compose'da M2 Colors sınıfı, M3 ColorScheme sınıfı ve ilgili işlevler için geçerlidir:

import androidx.compose.material.lightColors
import androidx.compose.material.darkColors

val AppLightColors = lightColors(
    // M2 light Color parameters
)
val AppDarkColors = darkColors(
    // M2 dark Color parameters
)
val AppColors = if (darkTheme) {
    AppDarkColors
} else {
    AppLightColors
}

import androidx.compose.material3.lightColorScheme
import androidx.compose.material3.darkColorScheme

val AppLightColorScheme = lightColorScheme(
    // M3 light Color parameters
)
val AppDarkColorScheme = darkColorScheme(
    // M3 dark Color parameters
)
val AppColorScheme = if (darkTheme) {
    AppDarkColorScheme
} else {
    AppLightColorScheme
}

M2 ve M3 renk sistemleri arasındaki önemli farklar düşünüldüğünde, Color parametreleri için makul bir eşleme yoktur. Bunun yerine, bir M3 renk şeması oluşturmak için Materyal Tema Oluşturucu aracını kullanın. Araçta M2 renklerini "temel" kaynak renkler olarak kullanın. Araç, M3 renk şeması tarafından kullanılan ton paletlerine genişletilir. Başlangıç noktası olarak aşağıdaki eşlemeler önerilir:

Araçtan açık ve koyu temalar için rengin onaltılık kod değerlerini kopyalayabilir ve bir M3 ColorScheme örneği uygulamak için kullanabilirsiniz. Alternatif olarak, Materyal Tema Oluşturucu, Oluşturma kodunu dışa aktarabilir.

isLight

M2 Colors sınıfının aksine M3 ColorScheme sınıfı isLight parametresi içermez. Genel olarak, bu bilgilere ihtiyaç duyan her şeyi tema düzeyinde modellemeye çalışmalısınız. Örnek:

import androidx.compose.material.lightColors
import androidx.compose.material.darkColors
import androidx.compose.material.MaterialTheme

@Composable
private fun AppTheme(
  darkTheme: Boolean = isSystemInDarkTheme(),
  content: @Composable () -> Unit
) {
  val colors = if (darkTheme) darkColors(…) else lightColors(…)
  MaterialTheme(
      colors = colors,
      content = content
  )
}

@Composable
fun AppComposable() {
    AppTheme {
        val cardElevation = if (MaterialTheme.colors.isLight) 0.dp else 4.dp
        …
    }
}

import androidx.compose.material3.lightColorScheme
import androidx.compose.material3.darkColorScheme
import androidx.compose.material3.MaterialTheme

val LocalCardElevation = staticCompositionLocalOf { Dp.Unspecified }
@Composable
private fun AppTheme(
   darkTheme: Boolean = isSystemInDarkTheme(),
    content: @Composable () -> Unit
) {
   val cardElevation = if (darkTheme) 4.dp else 0.dp
    CompositionLocalProvider(LocalCardElevation provides cardElevation) {
        val colorScheme = if (darkTheme) darkColorScheme(…) else lightColorScheme(…)
        MaterialTheme(
            colorScheme = colorScheme,
            content = content
        )
    }
}

@Composable
fun AppComposable() {
    AppTheme {
        val cardElevation = LocalCardElevation.current
        …
    }
}

Daha fazla bilgi için Oluşturma'da özel tasarım sistemleri kılavuzuna bakın.

Dinamik renk

M3'teki yeni bir özellik dinamik renk'tir. M3 ColorScheme, özel renkler yerine aşağıdaki işlevleri kullanarak Android 12 ve sonraki sürümlerde cihaz duvar kağıdı renklerinden yararlanabilir:

• dynamicLightColorScheme
• dynamicDarkColorScheme

Yazı biçimi

M3'teki tipografi sistemi M2'den farklıdır. Tipografi parametrelerinin sayısı yaklaşık olarak aynıdır ancak farklı adlara sahiptir ve M3 bileşenleriyle farklı şekilde eşlenirler. Bu durum, Compose'da M2 Typography ve M3 Typography sınıfı için geçerlidir:

import androidx.compose.material.Typography

val AppTypography = Typography(
    // M2 TextStyle parameters
)

import androidx.compose.material3.Typography

val AppTypography = Typography(
    // M3 TextStyle parameters
)

Başlangıç noktası olarak aşağıdaki TextStyle parametre eşlemeleri önerilir:

Şekil

M3'teki şekil sistemi, M2'den farklıdır. Şekil parametrelerinin sayısı arttı, farklı şekilde adlandırılmış ve M3 bileşenleriyle farklı şekilde eşleniyorlar. Bu durum, Compose'da M2 Shapes ve M3 Shapes sınıfı için geçerlidir:

import androidx.compose.material.Shapes

val AppShapes = Shapes(
    // M2 Shape parameters
)

import androidx.compose.material3.Shapes

val AppShapes = Shapes(
    // M3 Shape parameters
)

Başlangıç noktası olarak aşağıdaki Shape parametre eşlemeleri önerilir:

Bileşenler ve düzenler

M2'deki çoğu bileşen ve düzen M3'te mevcuttur. Ancak M2'de var olmayan bazı eksiklikler veya yeniler var. Ayrıca bazı M3 bileşenleri, M2'deki eşdeğerlerinden daha fazla varyasyona sahiptir. Genel olarak M3 API yüzeyleri, M2'deki en yakın eşdeğerlerine mümkün olduğunca benzer olmaya çalışır.

Güncellenen renk, tipografi ve şekil sistemleri dikkate alındığında, M3 bileşenleri yeni tema oluşturma değerleriyle farklı şekilde eşleşme eğilimindedir. Bu eşlemeler için bilgi kaynağı olarak Compose Material 3 kaynak kodundaki jetonlar dizinine göz atmak iyi bir fikirdir.

Bazı bileşenler için özel dikkat edilmesi gerekir. Bununla birlikte, başlangıç noktası olarak aşağıdaki işlev eşlemeleri önerilir:

Eksik API'ler:

Değiştirilen API'ler:

Yeniden adlandırılmış API'ler:

Diğer tüm API'ler:

Compose Material 3 API referansına genel bakış sayfasında en yeni M3 bileşenlerini ve düzenlerini inceleyin. Ayrıca yeni ve güncellenmiş API'ler için sürümler sayfasına göz atın.

İskele, atıştırmalık çubukları ve gezinme çekmecesi

M3'teki iskele, M2'den farklıdır. Hem M2 hem de M3'te, composable ana düzen Scaffold olarak adlandırılır ancak içe aktarma paketleri ve parametreleri birbirinden farklıdır:

import androidx.compose.material.Scaffold

Scaffold(
    // M2 scaffold parameters
)

import androidx.compose.material3.Scaffold

Scaffold(
    // M3 scaffold parameters
)

M2 Scaffold, artık M3'te Scaffold olarak containerColor olarak adlandırılmış bir backgroundColor parametresi içeriyor:

import androidx.compose.material.Scaffold

Scaffold(
    backgroundColor = …,
    content = { … }
)

import androidx.compose.material3.Scaffold

Scaffold(
    containerColor = …,
    content = { … }
)

M2 ScaffoldState sınıfı, artık gerekli olmayan bir drawerState parametresi içerdiğinden M3'te mevcut değildir. M3 Scaffold ile atıştırmalık çubuklarını göstermek için SnackbarHostState kullanın:

import androidx.compose.material.Scaffold
import androidx.compose.material.rememberScaffoldState

val scaffoldState = rememberScaffoldState()
val scope = rememberCoroutineScope()

Scaffold(
    scaffoldState = scaffoldState,
    content = {
        …
        scope.launch {
            scaffoldState.snackbarHostState.showSnackbar(…)
        }
    }
)

import androidx.compose.material3.Scaffold
import androidx.compose.material3.SnackbarHost
import androidx.compose.material3.SnackbarHostState

val snackbarHostState = remember { SnackbarHostState() }
val scope = rememberCoroutineScope()

Scaffold(
    snackbarHost = { SnackbarHost(snackbarHostState) },
    content = {
        …
        scope.launch {
            snackbarHostState.showSnackbar(…)
        }
    }
)

M2 Scaffold öğesindeki tüm drawer* parametreleri, M3 Scaffold öğesinden kaldırıldı. Bunlar, drawerShape ve drawerContent gibi parametreleri içerir. M3 Scaffold içeren bir çekmece göstermek için bunun yerine ModalNavigationDrawer gibi bir gezinme çekmecesi kullanın:

import androidx.compose.material.DrawerValue
import
import androidx.compose.material.Scaffold
import androidx.compose.material.rememberDrawerState
import androidx.compose.material.rememberScaffoldState

val scaffoldState = rememberScaffoldState(
    drawerState = rememberDrawerState(DrawerValue.Closed)
)
val scope = rememberCoroutineScope()

Scaffold(
    scaffoldState = scaffoldState,
    drawerContent = { … },
    drawerGesturesEnabled = …,
    drawerShape = …,
    drawerElevation = …,
    drawerBackgroundColor = …,
    drawerContentColor = …,
    drawerScrimColor = …,
    content = {
        …
        scope.launch {
            scaffoldState.drawerState.open()
        }
    }
)

import androidx.compose.material3.DrawerValue
import androidx.compose.material3.ModalDrawerSheet
import androidx.compose.material3.ModalNavigationDrawer
import androidx.compose.material3.Scaffold
import androidx.compose.material3.rememberDrawerState

val drawerState = rememberDrawerState(DrawerValue.Closed)
val scope = rememberCoroutineScope()

ModalNavigationDrawer(
    drawerState = drawerState,
    drawerContent = {
        ModalDrawerSheet(
            drawerShape = …,
            drawerTonalElevation = …,
            drawerContainerColor = …,
            drawerContentColor = …,
            content = { … }
        )
    },
    gesturesEnabled = …,
    scrimColor = …,
    content = {
        Scaffold(
            content = {
                …
                scope.launch {
                    drawerState.open()
                }
            }
        )
    }
)

Üst uygulama çubuğu

M3'teki en üstteki uygulama çubukları, M2'dekilerden farklıdır. Hem M2 hem de M3'te, composable'ın ana üst uygulama çubuğu TopAppBar olarak adlandırılır ancak içe aktarma paketleri ve parametreleri birbirinden farklıdır:

import androidx.compose.material.TopAppBar

TopAppBar(…)

import androidx.compose.material3.TopAppBar

TopAppBar(…)

Daha önce içeriği M2 TopAppBar içinde ortaladıysanız M3'ü CenterAlignedTopAppBar kullanabilirsiniz. MediumTopAppBar ve LargeTopAppBar özelliklerini de bilmenizde fayda vardır.

M3 üst uygulama çubukları, TopAppBarScrollBehavior sınıfında gezinirken yüksekliği değiştirmek gibi farklı işlevler sağlamak için yeni bir scrollBehavior parametresi içerir. Bu işlem, Modifer.nestedScroll aracılığıyla kayan içerikle birlikte çalışır. Bu, M2 TopAppBar'de elevation parametresini manuel olarak değiştirerek mümkün olmuştur:

import androidx.compose.material.AppBarDefaults
import androidx.compose.material.Scaffold
import androidx.compose.material.TopAppBar

val state = rememberLazyListState()
val isAtTop by remember {
    derivedStateOf {
        state.firstVisibleItemIndex == 0 && state.firstVisibleItemScrollOffset == 0
    }
}

Scaffold(
    topBar = {
        TopAppBar(
            elevation = if (isAtTop) {
                0.dp
            } else {
                AppBarDefaults.TopAppBarElevation
            },
            …
        )
    },
    content = {
        LazyColumn(state = state) { … }
    }
)

import androidx.compose.material3.Scaffold
import androidx.compose.material3.TopAppBar
import androidx.compose.material3.TopAppBarDefaults

val scrollBehavior = TopAppBarDefaults.pinnedScrollBehavior()

Scaffold(
    modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
    topBar = {
        TopAppBar(
            scrollBehavior = scrollBehavior,
            …
        )
    },
    content = {
        LazyColumn { … }
    }
)

Alt gezinme / Gezinme çubuğu

M2'de alt gezinme, M3'te gezinme çubuğu olarak yeniden adlandırıldı. M2'de BottomNavigation ve BottomNavigationItem composable'lar, M3'te ise NavigationBar ve NavigationBarItem composable'lar bulunur:

import androidx.compose.material.BottomNavigation
import androidx.compose.material.BottomNavigationItem

BottomNavigation {
    BottomNavigationItem(…)
    BottomNavigationItem(…)
    BottomNavigationItem(…)
}

import androidx.compose.material3.NavigationBar
import androidx.compose.material3.NavigationBarItem

NavigationBar {
    NavigationBarItem(…)
    NavigationBarItem(…)
    NavigationBarItem(…)
}

Düğmeler, simge düğmeleri ve FAB'ler

M3'teki düğmeler, simge düğmeleri ve kayan işlem düğmeleri (FAB'ler), M2'dekilerden farklıdır. M3, tüm M2 düğme composable'larını içerir:

import androidx.compose.material.Button
import androidx.compose.material.ExtendedFloatingActionButton
import androidx.compose.material.FloatingActionButton
import androidx.compose.material.IconButton
import androidx.compose.material.IconToggleButton
import androidx.compose.material.OutlinedButton
import androidx.compose.material.TextButton

// M2 buttons
Button(…)
OutlinedButton(…)
TextButton(…)
// M2 icon buttons
IconButton(…)
IconToggleButton(…)
// M2 FABs
FloatingActionButton(…)
ExtendedFloatingActionButton(…)

import androidx.compose.material3.Button
import androidx.compose.material3.ExtendedFloatingActionButton
import androidx.compose.material3.FloatingActionButton
import androidx.compose.material3.IconButton
import androidx.compose.material3.IconToggleButton
import androidx.compose.material3.OutlinedButton
import androidx.compose.material3.TextButton

// M3 buttons
Button(…)
OutlinedButton(…)
TextButton(…)
// M3 icon buttons
IconButton(…)
IconToggleButton(…)
// M3 FABs
FloatingActionButton(…)
ExtendedFloatingActionButton(…)

M3, yeni düğme varyasyonları da içerir. Bunları Compose Material 3 API referansına genel bakış bölümünde inceleyebilirsiniz.

Geçiş yap

M3'teki Switch, M2'den farklıdır. Hem M2 hem de M3'te, composable'ın adı Switch olsa da içe aktarma paketleri farklı şekilde adlandırılır:

import androidx.compose.material.Switch

Switch(…)

import androidx.compose.material3.Switch

Switch(…)

Yüzeyler ve yükseklik

M3'teki yüzey ve yükselti sistemleri M2'den farklıdır. M3'te iki tür yükseklik vardır:

• Gölge rakımı (M2 ile aynı şekilde bir gölge oluşturur)
• Ton rakımı (bir rengi kaplar, M3'te yeni)

Compose'da bu, M2 Surface işlevi ve M3 Surface işlevi için geçerlidir:

import androidx.compose.material.Surface

Surface(
    elevation = …
) { … }

import androidx.compose.material3.Surface

Surface(
    shadowElevation = …,
    tonalElevation = …
) { … }

Kullanıcı deneyimi/kullanıcı arayüzü tasarım tercihine bağlı olarak, M3'te hem shadowElevation hem de/veya tonalElevation için M2'deki elevation Dp değerlerini kullanabilirsiniz. Surface, çoğu bileşenin arkasındaki composable'dır. Bu nedenle, bileşen composable'lar, aynı şekilde taşımanız gereken yükseklik parametrelerini de gösterebilir.

M3'te ton yükselmesi, M2 koyu temalarda yükseklik bindirme kavramının yerini alır . Bu nedenle, M3'te ElevationOverlay ve LocalElevationOverlay yoktur. M2'deki LocalAbsoluteElevation ise M3'te LocalAbsoluteTonalElevation olarak değiştirilmiştir.

Vurgu ve içerik alfa

M3'teki vurgu M2'den önemli ölçüde farklıdır. M2'de vurgu, metin ve simge gibi içerikleri ayırt etmek için belirli alfa değerleriyle "açık" renklerin kullanılmasını içerir. Artık M3'te birkaç farklı yaklaşım var:

• Genişletilmiş M3 renk sistemindeki "varyant açık" renkleriyle birlikte "açık" renkleri kullandılar.
• Metin için farklı yazı tipi ağırlıkları kullanma.

Bu nedenle, ContentAlpha ve LocalContentAlpha M3'te mevcut olmadığından bunların değiştirilmesi gerekiyor.

Başlangıç noktası olarak aşağıdaki eşlemeler önerilir:

Aşağıda, M2 ve M3'te simge vurgusunun bir örneği verilmiştir:

import androidx.compose.material.ContentAlpha
import androidx.compose.material.LocalContentAlpha

// High emphasis
CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.high) {
    Icon(…)
}
// Medium emphasis
CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.medium) {
    Icon(…)
}
// Disabled emphasis
CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.disabled) {
    Icon(…)
}

import androidx.compose.material3.LocalContentColor

// High emphasis
CompositionLocalProvider(LocalContentColor provides MaterialTheme.colorScheme.onSurface) {
    Icon(…)
}
// Medium emphasis
CompositionLocalProvider(LocalContentColor provides MaterialTheme.colorScheme.onSurfaceVariant) {
    Icon(…)
}
// Disabled emphasis
CompositionLocalProvider(LocalContentColor provides MaterialTheme.colorScheme.onSurface.copy(alpha = 0.38f)) {
    Icon(…)
}

Aşağıda, M2 ve M3'te metin vurgusu örneği verilmiştir:

import androidx.compose.material.ContentAlpha
import androidx.compose.material.LocalContentAlpha

// High emphasis
CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.high) {
    Text(…)
}
// Medium emphasis
CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.medium) {
    Text(…)
}
// Disabled emphasis
CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.disabled) {
    Text(…)
}

import androidx.compose.material3.LocalContentColor

// High emphasis
Text(
    …,
    fontWeight = FontWeight.Bold
)
// Medium emphasis
Text(
    …,
    fontWeight = FontWeight.Normal
)
// Disabled emphasis
CompositionLocalProvider(LocalContentColor provides MaterialTheme.colorScheme.onSurface.copy(alpha = 0.38f)) {
    Text(
        …,
        fontWeight = FontWeight.Normal
    )
}

Arka planlar ve kapsayıcılar

M2'de arka planlar, M3'te "kapsayıcılar" olarak adlandırılır. Genel olarak, aynı değerleri kullanarak M2'deki background* parametrelerini M3'teki container* ile değiştirebilirsiniz. Örnek:

Badge(
    backgroundColor = MaterialTheme.colors.primary
) { … }

Badge(
    containerColor = MaterialTheme.colorScheme.primary
) { … }

Görünümlerin birlikte çalışabilirliği

Uygulamanız, Görünümler veya XML birlikte çalışabilirliği içeriyorsa ve MDC-Android Oluşturma Tema Bağdaştırıcısı kitaplığını kullanıyorsa M3 sürümünü kullanmanız gerekir:

implementation "com.google.android.material:compose-theme-adapter:$compose-theme-adapter-version"

implementation "com.google.android.material:compose-theme-adapter-3:$compose-theme-adapter-3-version"

En son sürümleri MDC-Android Compose Theme Adapter sürümleri sayfasında bulabilirsiniz.

M2 ve M3 sürümleri arasındaki en önemli fark MdcTheme ve Mdc3Theme composable'larıdır:

import com.google.android.material.composethemeadapter.MdcTheme

MdcTheme {
    // M2 content
}

import com.google.android.material.composethemeadapter3.Mdc3Theme

Mdc3Theme {
    // M3 content
}

Daha fazla bilgi edinmek için BENİOKU sayfasını inceleyin.

Görünümler'de Materyal 2'den Materyal 3'e geçiş hakkında daha fazla bilgi için Materyal Tasarım 3'e Geçiş rehberine bakın.

Faydalı bağlantı

Compose'da M2'den M3'e geçiş hakkında daha fazla bilgi edinmek için aşağıdaki ek kaynaklara bakın.

Dokümanlar

• E-posta Yazma'da Materyal Tasarım 3

Örnek uygulamalar

• Reply M3 örnek uygulaması
• Jetchat örnek uygulaması M2'den M3'e taşıma
  • İlk alpha01 taşıma işlemi
  • Takip alpha10 güncellemesi
• Jetnews örnek uygulaması M2'den M3'e taşıma
• Jetsurvey örnek uygulaması M2'den M3'e geçiş
• Artık Android M3 hero uygulamasında :core-designsystem modülü

Videolar

• Jetpack Compose'u kullanarak Material You'yu uygulama

API referansı ve kaynak kodu

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