So Jetpack Compose is now stable and production-ready 🎉 . With that comes the question, how can I integrate it into my existing project?
Obviously, we cannot hold back the updates to completely migrate all the screens and views to Compose UI. So it has to be done iteratively. So with that in mind, I recently did a small scoping exercise for adopting Compose for my work project (on my stream at twitch.tv/sasikanth, self-plug 😛. Feel free to follow). During that, I went over different aspects of adopting Compose to an existing project.
Compose in Views
Android Views in Compose
Today we are going, to begin with, the first and my favourite section theming 🎨 🙌. (Over the next few weeks I will publish articles covering the rest of the things)
Using existing Material themes
The first thing I looked into when adopting Compose was to see how much I can get away with the existing theming setup, I didn’t want to re-implement all the Material theming setup from XML to Compose theming.
Fortunately, good folks at Google have a solution for that, MDC-Android Compose Theme Adapter which enables us to reuse the Material themes defined in XML for theming in Compose. Once we have added the dependency, we can use
MdcTheme for composable instead of
MaterialTheme (Which is the default when using Compose UI Material package). The
MdcTheme will create the Compose theme based on the Activity/Context theme.
// MaterialTheme.colors, MaterialTheme.shapes, MaterialTheme.typography
// will now contain copies of the context's theme
One of the things I found useful was, you can customise the generated values from
MdcTheme by using the
createMdcTheme function and then modifying the colors, shapes and typography and creating a
MaterialTheme. This is useful to slowly start migrating the theming implementation to Compose.
val context = LocalContext.current
val layoutDirection = LocalLayoutDirection.current
var (colors, type, shapes) = createMdcTheme(
context = context,
layoutDirection = layoutDirection
// Modify colors, type or shapes as required. Then pass them
// through to MaterialTheme...
colors = colors,
typography = type,
shapes = shapes
// rest of layout
One thing the
MdcTheme didn’t generate for us was custom attributes. For that we created Kotlin extension based on the type. For example, we had typography like
get() = TextStyle(
fontWeight = FontWeight.Normal,
fontSize = 18.sp,
letterSpacing = 0.011.sp,
lineHeight = 28.sp
get() = button.copy(
fontSize = 16.sp,
letterSpacing = 0.0781.sp,
lineHeight = 20.sp
This helped us get all of our custom attributes that are missed when using
While the MDC theme adapter is great and covers the most commonly used theming functionality and attributes from the existing XML theming setup. It does have some limitations, so do take a look at those before using it. If you’re using an AppCompat or non-MDC theme, then use the AppCompat Compose Theme Adapter.
Overall this approach helped us quickly jump into writing Compose code and migrating our fragments/views into Composable functions without needing to spend a bunch of time reimplementing our theming setup.