Unlocking the Power of Theming in Jetpack Compose

The Building Blocks of Theming

In Jetpack Compose, themes are composed of systems that define common visual and behavioral concepts. These systems can include color, typography, and shape.

The MaterialTheme composable function provides a simple way to wrap all UI components in an app, ensuring similar visuals and behavior.

MaterialTheme {
    // Your UI components here
}

Material Theme Color System

The Material Theme color system is built on the Material Design color system, which comprises color properties that represent specified brand colors as well as colors that blend with both light and dark modes.

By declaring color values for each property, developers can choose to override or use default values based on their design specifications.

val colors = listOf(
    primaryColor,
    primaryVariantColor,
    secondaryColor,
    //...
)

MaterialTheme(colors = colors) {
    // Your UI components here
}

Material Theme Typography System

The typography system is built on the Material Design type system, which includes a type scale with 13 different styles.

Each text style is defined by font properties like typeface, weight, or size, providing distinctions in an app and its content.

val typography = Typography(
    h1 = TextStyle(
        fontFamily = FontFamily.Default,
        fontWeight = FontWeight.Bold,
        fontSize = 24.sp
    ),
    body1 = TextStyle(
        fontFamily = FontFamily.Default,
        fontWeight = FontWeight.Normal,
        fontSize = 16.sp
    ),
    //...
)

MaterialTheme(typography = typography) {
    // Your UI components here
}

Material Theme Shape System

The shape system is built on the Material Design shape system, which comprises a finite set of customizations that can be made to surfaces, such as surfaces with rounded or cut corners.

Shapes are declared using small, medium, and large categories, making it easy to implement and customize.

val shapes = Shapes(
    small = RoundedCornerShape(4.dp),
    medium = RoundedCornerShape(8.dp),
    large = RoundedCornerShape(12.dp)
)

MaterialTheme(shapes = shapes) {
    // Your UI components here
}

Providing Theme Systems to UI Components

To pass theme system values down to each part of a composition, developers can use CompositionLocal.

This allows values to be passed implicitly, making it easier to manage theme systems.

val LocalColors = compositionLocalOf { colors }
val LocalTypography = compositionLocalOf { typography }
val LocalShapes = compositionLocalOf { shapes }

MaterialTheme {
    CompositionLocalProvider(
        LocalColors provides colors,
        LocalTypography provides typography,
        LocalShapes provides shapes
    ) {
        // Your UI components here
    }
}

Accessing System Properties

While the theme is ready to use, developers may want to access system properties to apply to UI components.

This can be done by creating an object with properties that point to the current value of each system.

object MyTheme {
    val colors: Colors by LocalColors
    val typography: Typography by LocalTypography
    val shapes: Shapes by LocalShapes
}

Interoperability with Android View XML Theming

For developers planning to migrate to Jetpack Compose from the previous Android View system, there are tools available to help implement theme systems quickly.

The MDC-Android Compose Theme Adapter and AppCompat Compose Theme Adapter provide a seamless way to map colors, text styles, and shape categories into the theme systems in Compose.

• MDC-Android Compose Theme Adapter: Maps Material Design color, typography, and shape systems to Jetpack Compose.
• AppCompat Compose Theme Adapter: Maps AppCompat theme attributes to Jetpack Compose theme systems.