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