Migrating XML themes to Compose

An existing app is likely to have a large amount of theming and styling for Views. When you introduce Compose in an existing app, you need to migrate the theme(s) to use MaterialTheme for Compose screens. This means your app's theming will have two sources of truth: the View-based theme and the Compose theme. Any changes to your styling would need to be made in multiple places.

Migrating your app to Compose means that you need to create a Compose version of your existing theme. However, the sooner you do that in the migration process entails that you have to maintain both XML and Compose themes which can be a maintenance burden.

Material Theme Adapter

If you're using a Theme.MaterialComponents.* theme from the MDC-Android library in your app, the Material Theme Adapter library allows you to easily re-use the Material 2 color, typography, and shape theming from your existing View-based XML theme in your composables.

Use the MdcTheme composable:

import com.google.accompanist.themeadapter.material.MdcTheme

class MdcThemeExample : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        // Use MdcTheme instead of M2 MaterialTheme
        // Colors, typography, and shapes have been read from the
        // View-based theme used in this Activity
        setContent {
            MdcTheme {
                // Your app-level composable here
            }
        }
    }
}
MdcThemeSnippets.kt

See the Material Theme Adapter library documentation for more information.

Material 3 Theme Adapter

If you're using a Theme.Material3.* theme from the MDC-Android library in your app, the Material 3 Theme Adapter library allows you to easily re-use the Material 3 color, typography, and shape theming from your existing View-based XML theme in your composables.

Use the Mdc3Theme composable:

import com.google.accompanist.themeadapter.material3.Mdc3Theme

class Mdc3ThemeExample : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        // Use Mdc3Theme instead of M3 MaterialTheme
        // Color scheme, typography, and shapes have been read from the
        // View-based theme used in this Activity
        setContent {
            Mdc3Theme {
                // Your app-level composable here
            }
        }
    }
}
Mdc3ThemeSnippets.kt

See the Material 3 Theme Adapter library documentation for more information.

AppCompat Theme Adapter

The AppCompat Theme Adapter library allows you to easily reuse AppCompat XML themes for theming in Jetpack Compose. It creates an M2 MaterialTheme with the color and typography values from the context's theme.

Use the AppCompatTheme composable:

import com.google.accompanist.themeadapter.appcompat.AppCompatTheme

class AppCompatThemeExample : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            // Colors and typography have been read from the
            // View-based theme used in this Activity
            // Shapes are the default for M2 as this didn't exist in M1
            AppCompatTheme {
                // Your app-level composable here
            }
        }
    }
}
AppCompatThemeSnippets.kt

See the AppCompat Theme Adapter library documentation for more information.

Custom theme attributes

The Core Theme Adapter library is used by all of the above Accompanist theme adapter libraries and contains common logic for various XML resource to Compose conversions. These resource utilities can be used to parse custom theme attributes.

See the Core Theme Adapter library documentation for more information.

Default component styles

The Accompanist theme adapter libraries don't read any theme-defined default widget styles. This is because Compose doesn't have the concept of default composables.

See Custom design systems in Compose for more information.

Theme overlays

When migrating View-based screens to Compose, watch out for usages of the android:theme attribute. It's likely you need a new MaterialTheme in that part of the Compose UI tree.