Convert Android App to Use Materials 3 Design

This text exhibits the steps to transform this Jetpack Compose App Template to make use of Materials 3 design – the most recent model of Google’s open-source design system.

1. Replace Compose Materials Dependency

Change

implementation("androidx.compose.materials:materials:1.2.1")

with

implementation("androidx.compose.material3:material3:1.1.0-alpha01")

2. Repair Compilation Points

After you sync the Gradle file, construct the venture. Then, you get some compilation points. Change import androidx.compose.materials.* with import androidx.compose.material3.*

For instance, exchange

import androidx.compose.materials.Textual content
import androidx.compose.materials.Shapes
import androidx.compose.materials.darkColors
import androidx.compose.materials.lightColors
import androidx.compose.materials.Typography

with

import androidx.compose.material3.Textual content
import androidx.compose.material3.Shapes
import androidx.compose.material3.darkColorScheme
import androidx.compose.material3.lightColorScheme
import androidx.compose.material3.Typography

Among the parameters are now not legitimate in Materials 3. For instance

3. Use Customized Materials Theme Builder

To configure the colour scheme, you need to use this customized materials theme builder.

• On the left panel, choose the main core coloration you would like (the secondary, tertiary and impartial colours are mechanically adjusted)

• Within the prime left nook, click on Export -> Jetpack Compose(Theme.kt)

• material-theme.zip is downloaded

• Go to uitheme, copy the Colours.kt and Theme.kt do your app

Instance of default Colours.kt:

val md_theme_light_primary = Shade(0xFF6750A4)
val md_theme_light_onPrimary = Shade(0xFFFFFFFF)
val md_theme_light_primaryContainer = Shade(0xFFEADDFF)
val md_theme_light_onPrimaryContainer = Shade(0xFF21005D)
val md_theme_light_secondary = Shade(0xFF625B71)
val md_theme_light_onSecondary = Shade(0xFFFFFFFF)
val md_theme_light_secondaryContainer = Shade(0xFFE8DEF8)
val md_theme_light_onSecondaryContainer = Shade(0xFF1D192B)
val md_theme_light_tertiary = Shade(0xFF7D5260)
val md_theme_light_onTertiary = Shade(0xFFFFFFFF)
val md_theme_light_tertiaryContainer = Shade(0xFFFFD8E4)
val md_theme_light_onTertiaryContainer = Shade(0xFF31111D)
val md_theme_light_error = Shade(0xFFB3261E)
val md_theme_light_onError = Shade(0xFFFFFFFF)
val md_theme_light_errorContainer = Shade(0xFFF9DEDC)
val md_theme_light_onErrorContainer = Shade(0xFF410E0B)
val md_theme_light_outline = Shade(0xFF79747E)
val md_theme_light_background = Shade(0xFFFFFBFE)
val md_theme_light_onBackground = Shade(0xFF1C1B1F)
val md_theme_light_surface = Shade(0xFFFFFBFE)
val md_theme_light_onSurface = Shade(0xFF1C1B1F)
val md_theme_light_surfaceVariant = Shade(0xFFE7E0EC)
val md_theme_light_onSurfaceVariant = Shade(0xFF49454F)
val md_theme_light_inverseSurface = Shade(0xFF313033)
val md_theme_light_inverseOnSurface = Shade(0xFFF4EFF4)
val md_theme_light_inversePrimary = Shade(0xFFD0BCFF)
val md_theme_light_shadow = Shade(0xFF000000)
val md_theme_light_surfaceTint = Shade(0xFF6750A4)
val md_theme_light_outlineVariant = Shade(0xFFCAC4D0)
val md_theme_light_scrim = Shade(0xFF000000)

val md_theme_dark_primary = Shade(0xFFD0BCFF)
val md_theme_dark_onPrimary = Shade(0xFF381E72)
val md_theme_dark_primaryContainer = Shade(0xFF4F378B)
val md_theme_dark_onPrimaryContainer = Shade(0xFFEADDFF)
val md_theme_dark_secondary = Shade(0xFFCCC2DC)
val md_theme_dark_onSecondary = Shade(0xFF332D41)
val md_theme_dark_secondaryContainer = Shade(0xFF4A4458)
val md_theme_dark_onSecondaryContainer = Shade(0xFFE8DEF8)
val md_theme_dark_tertiary = Shade(0xFFEFB8C8)
val md_theme_dark_onTertiary = Shade(0xFF492532)
val md_theme_dark_tertiaryContainer = Shade(0xFF633B48)
val md_theme_dark_onTertiaryContainer = Shade(0xFFFFD8E4)
val md_theme_dark_error = Shade(0xFFF2B8B5)
val md_theme_dark_onError = Shade(0xFF601410)
val md_theme_dark_errorContainer = Shade(0xFF8C1D18)
val md_theme_dark_onErrorContainer = Shade(0xFFF9DEDC)
val md_theme_dark_outline = Shade(0xFF938F99)
val md_theme_dark_background = Shade(0xFF1C1B1F)
val md_theme_dark_onBackground = Shade(0xFFE6E1E5)
val md_theme_dark_surface = Shade(0xFF1C1B1F)
val md_theme_dark_onSurface = Shade(0xFFE6E1E5)
val md_theme_dark_surfaceVariant = Shade(0xFF49454F)
val md_theme_dark_onSurfaceVariant = Shade(0xFFCAC4D0)
val md_theme_dark_inverseSurface = Shade(0xFFE6E1E5)
val md_theme_dark_inverseOnSurface = Shade(0xFF313033)
val md_theme_dark_inversePrimary = Shade(0xFF6750A4)
val md_theme_dark_shadow = Shade(0xFF000000)
val md_theme_dark_surfaceTint = Shade(0xFFD0BCFF)
val md_theme_dark_outlineVariant = Shade(0xFF49454F)
val md_theme_dark_scrim = Shade(0xFF000000)

val seed = Shade(0xFF6750A4)

Instance of sunshine and darkish coloration schemes in Theme.kt:

non-public val LightColorScheme = lightColorScheme(
    main = md_theme_light_primary,
    onPrimary = md_theme_light_onPrimary,
    primaryContainer = md_theme_light_primaryContainer,
    onPrimaryContainer = md_theme_light_onPrimaryContainer,
    secondary = md_theme_light_secondary,
    onSecondary = md_theme_light_onSecondary,
    secondaryContainer = md_theme_light_secondaryContainer,
    onSecondaryContainer = md_theme_light_onSecondaryContainer,
    tertiary = md_theme_light_tertiary,
    onTertiary = md_theme_light_onTertiary,
    tertiaryContainer = md_theme_light_tertiaryContainer,
    onTertiaryContainer = md_theme_light_onTertiaryContainer,
    error = md_theme_light_error,
    onError = md_theme_light_onError,
    errorContainer = md_theme_light_errorContainer,
    onErrorContainer = md_theme_light_onErrorContainer,
    define = md_theme_light_outline,
    background = md_theme_light_background,
    onBackground = md_theme_light_onBackground,
    floor = md_theme_light_surface,
    onSurface = md_theme_light_onSurface,
    surfaceVariant = md_theme_light_surfaceVariant,
    onSurfaceVariant = md_theme_light_onSurfaceVariant,
    inverseSurface = md_theme_light_inverseSurface,
    inverseOnSurface = md_theme_light_inverseOnSurface,
    inversePrimary = md_theme_light_inversePrimary,
    surfaceTint = md_theme_light_surfaceTint,
    outlineVariant = md_theme_light_outlineVariant,
    scrim = md_theme_light_scrim,
)

non-public val DarkColorScheme = darkColorScheme(
    main = md_theme_dark_primary,
    onPrimary = md_theme_dark_onPrimary,
    primaryContainer = md_theme_dark_primaryContainer,
    onPrimaryContainer = md_theme_dark_onPrimaryContainer,
    secondary = md_theme_dark_secondary,
    onSecondary = md_theme_dark_onSecondary,
    secondaryContainer = md_theme_dark_secondaryContainer,
    onSecondaryContainer = md_theme_dark_onSecondaryContainer,
    tertiary = md_theme_dark_tertiary,
    onTertiary = md_theme_dark_onTertiary,
    tertiaryContainer = md_theme_dark_tertiaryContainer,
    onTertiaryContainer = md_theme_dark_onTertiaryContainer,
    error = md_theme_dark_error,
    onError = md_theme_dark_onError,
    errorContainer = md_theme_dark_errorContainer,
    onErrorContainer = md_theme_dark_onErrorContainer,
    define = md_theme_dark_outline,
    background = md_theme_dark_background,
    onBackground = md_theme_dark_onBackground,
    floor = md_theme_dark_surface,
    onSurface = md_theme_dark_onSurface,
    surfaceVariant = md_theme_dark_surfaceVariant,
    onSurfaceVariant = md_theme_dark_onSurfaceVariant,
    inverseSurface = md_theme_dark_inverseSurface,
    inverseOnSurface = md_theme_dark_inverseOnSurface,
    inversePrimary = md_theme_dark_inversePrimary,
    surfaceTint = md_theme_dark_surfaceTint,
    outlineVariant = md_theme_dark_outlineVariant,
    scrim = md_theme_dark_scrim,
)

4. Add Dynamic Shade Assist

In API degree >=31, dynamic coloration is supported. To be able to use it, name the dynamicDarkColorScheme() or dynamicLightColorScheme().

That is the code instance:

@Composable
enjoyable NewEmptyComposeAppTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    useSystemUIController: Boolean = true,
    content material: @Composable () -> Unit
) {
    val useDynamicColor = Construct.VERSION.SDK_INT >= Construct.VERSION_CODES.S
    val colorScheme = when {
        useDynamicColor -> {
            val context = LocalContext.present
            if (darkTheme) dynamicDarkColorScheme(context)
            else dynamicLightColorScheme(context)
        }
        darkTheme -> DarkColorScheme
        else -> LightColorScheme
    }

    if (useSystemUIController) {
        val systemUiController = rememberSystemUiController()
        systemUiController.setSystemBarsColor(
            coloration = colorScheme.main
        )
    }

    MaterialTheme(
        colorScheme = colorScheme,
        shapes = Shapes,
        typography = Typography,
        content material = content material,
    )
}

Conclusion

That is only a easy fast information to transform your app to make use of Materials 3 design. For a extra complete information, seek advice from this official Materials 2 to Materials 3 migration information right here.

I seen that in case your app use androidx.compose.materials.pullrefresh, you’ll not capable of migrate to materials 3. See the difficulty tracker right here.

Supply Code

GitHub Repository: Demo_CleanEmptyCompose (Conversion diff)