Compose interoperability challenges Julien Salvi - Android GDE | Android @ Aircall DevFest Stockholm 2025 󰐴 @jusalvi.bsky.social and how to face them! 🤓

Julien Salvi Android @ Aircall Android GDE PAUG, Punk & IPAs! @jusalvi.bsky.social Bonjour !

Migrating to Compose A little bit of context… A little bit of context… Which strategy to adopt? 🧐

Happy is a happy developer! But to be happier, they want to use Compose in their applications

Yeah! Let’s go full Compose! But which strategy to adopt?

Migrating to Compose Which strategy? ● Developers or teams can face 3 different scenarios when migrating to Compose: From scratch Migrating all at once because the app is small enough Introduce Compose step by step for big apps

Happy has a huge codebase! Let’s see how to gradually introduce Compose in a project 💻

Migrating to Compose Migration Plan ● Key pillars of the migration plan you should keep in mind: ○ Architecture ○ Navigation ○ Interoperability ○ Testability ● Let’s explore some tips to best achieve the Compose migration

Interoperability tips A little bit of context… A little bit of context… To avoid (bad) surprises when migrating 🙈

Architecture assessment ⚙ The foundation should be strong

Architecture assessment ⚙ Is your app Compose ready? ● Before migrating your entire app to Compose make sure the architecture you are using fits the Compose paradigms ● Avoid architectures that depend on mutable shared state or bidirectional data binding when working with Compose ● Let’s take the example of our architecture move 💡

Architecture assessment ⚙

Architecture assessment ⚙

Architecture assessment ⚙ LiveData vs StateFlow ● LiveData can be used with Compose without any issue but are very platform specific ● To have a more agnostic approach consider using StateFlow (Kotlin lib) that can be safely collected in Compose screens. ● LiveData and StateFlow can coexist well together for transition purposes but favor a full usage of StateFlow 💡

No content

No content

Theming interoperability 🎨 Quest for consistency!

Theming 🎨 Colors and dimens ● Composable and View components will have two distinct theming implementations (code vs xml) ● If the app strictly relies on Material theme, the interop between the themes can be straightforward matching the colors ● If using a custom theme no magic tricks to ease the migration unfortunately 🥲

Theming 🎨 Material Components ● Not all Material View Components have been migrated to Compose yet ● And some Composable are missing features that were existing in the View system components ● Let’s take the example of the DatePicker 💡

No content

No content

Navigating with Compose 🧭 Always in motion the future is!

Navigating with Compose 🧭 Check current nav ● Assess your current navigation system inside your app (the complexity of the graph, which components…) ● If you are using androidx navigation with Fragment, keep the Fragment as holder till end of the migration and then remove all the Fragments to be full Compose (easiest transition) ● Custom navigation == Custom problems 😅

Navigating with Compose 🧭 Compose Nav ● We decided to go with Voyager for our Compose Navigation system as it has many benefits: ○ Great API that fits our needs ○ Easy multi module navigation with ScreenRegistry ○ Type safe navigation

No content

Navigating with Compose 🧭 Feature isolation ● Currently, a global router manages the navigation between Activity, Fragments, modals and external links ● The router has its own stack and is very tight to the View framework ● So how to introduce our new Compose navigation that can coexist with the current one? 💡

Navigating with Compose 🧭 Feature isolation ● We decided to fragment the app per Universe where each “Universe” is an Activity that is used in the application ● Once all Fragments and BottomSheets have been migrated, you can now get rid of the fragments in each “Universe” and use the new Compose nav safely. ● The old router will only be there to open new Activity but inside it full Compose

Communication Compose <> View 📡 Sending…

Communication 📡 Compose to View ● During the migration you might want to send events to your View components (Acitivity, Fragments…) ● Example: the feedback alert system was not migrated yet but needed to be trigger from Compose code ● Let’s see how to do it thanks to CompositionLocal 💡

No content

No content

Testing interoperability 🧪 Testing is NOT doubting!

Testing ● Make sure you keep your screen testable ● Compose has a great API to add test tags to your Composable ● Try to keep the same tag ID from View to Compose to ease the migration ● If a QA team is in charge of the UI tests, sync early and make a POC UI tests

No content

No content

Testing https://medium.com/@juliensalvi/ui-test s-with-jetpack-compose-and-appium-x -uiautomator-5d276fb655aa UI tests

Testing ● Layout inspector is great to check the Compose tree or the recomposition counts in your apps ● Works perfectly with a mix of View and Compose ● Here are 2 tips to keep in mind 💡 Layout inspector

Testing ● 💡Not seeing Composable in layout inspector? ○ Make sure you are not removing META-INF/androidx.compose.*.version file from the APK ● 💡Application is crashing with layout inspector? ○ Don’t use semantics(mergeDescendants = true) in your base Composable component (e.g. Scaffold) Layout inspector

Compose learning in a team 🤓 Sharing is caring!

Compose interoperability Migrate to Compose https://developer.android.com/develop/ui/compose/migrate Interoperability APIs https://developer.android.com/develop/ui/compose/migrate/interoperability-apis Coupling Compose - interoperability in a legacy codebase https://www.droidcon.com/2023/10/06/coupling-compose-interoperability-in-a-legacy-codebase/ Migrating to Jetpack Compose - an interop love story https://medium.com/androiddevelopers/migrating-to-jetpack-compose-an-interop-love-story-part- 1-3693ca3ae981

Julien Salvi DevFest Stockholm 2025 󰐴 @jusalvi.bsky.social Thanks! Embrace the Compose world!