Photo by Torsten Dederichs on Unsplash

Migrating from XML to Jetpack Compose and Vice Versa: Perfect Interoperability🧁

I was really excited with the introduction of Jetpack compose and the declarative way of building UI. It is really easy lighter, has fewer lines of code, high understandability, a single language codebase and much more.

But, the important question is What about my old project with XML? or What about the XML Custom View is it still usable in Compose?

Nothing to worry about it has already been taken care of the interoperability of XML and Compose. That’s great news🎉 Now the thing is how to use it.

Here I will show you a simple example of how to use XML in compose view and Compose in XML views. Let’s begin 🌟

Compose in XML🗼

Suppose you want to convert your old project from XML to Compose, you can do it part wise converting small sections and slowly implementing. Refer to the Image it will be easier to understand.

  • activity_main.xmlHere you can see there is a special view tag <ComposeView/> this will contain all the parts all the compose, think of this as a blank canvas on which we draw the composable.
  • MainActivity.ktFirstly, we use lateinit var and initialize with findViewById(). Secondly, use the apply lambda block to add your composable. Here I have added a Column and inside I have added multiple composable functions.

Yes! That's is all you require to use your composable in your XML.🌈

XML in Compose🗽

Adding XML inside with Composable is easier. Refer to the Image it will be easier to understand.

  • extra_layout.xmlIt is a simple layout with textview and button
  • MainActivity.ktHere happens the real magic AndroidView() which inflates our layout inside the factory block, we add the onClick listeners and outers in the update block.factory — The block create the view to be composed , update-The callback to be invoked after the layout is inflated .

Yes! That’s is all you require to use your XML in composable.🌠

Inside both the factory block and update block, you can access the context. The factory block lambda should return the view that we want to display. Suppose you don’t have a layout to inflate inside the factory block, you can simple UI components by simply creating them and passing the context.

TextView(it) //it is context here, Way to create simple view

In case you want to trigger from Composable in our case outside our AndroidView() you can simply use ViewModel and observe the LiveData.

AndroidView() - AndroidView is commonly needed for using Views that are infeasible to be reimplemented in Compose and there is no corresponding Compose API. Common examples for the moment are WebView, SurfaceView, AdView, etc.
AndroidView will clip its content to the layout bounds, as being clipped is a common assumption made by Views - keeping clipping disabled might lead to unexpected drawing behavior. Note this deviates from Compose's practice of keeping clipping opt-in, disabled by default.

That’s it guys the interoperability is so easy✨

Some References:

For any doubts and suggestions, you can reach out on my Instagram, or LinkedIn. Follow me for Kotlin content and more. Happy Coding!

I will well appreciate one of these 👏

Related Topic :



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Debanshu Datta

Debanshu Datta

Android @Gojek | Mobile Developer | Backend Developer (Java/Kotlin)