Say Goodbye XML, Hello Compose!

Published in

Novumlogic

4 min readNov 8, 2022

It is no secret that Jetpack Compose is all rage these days. Jetpack Compose is the recommended android development toolkit which accelerates android development, is easy to migrate to, simple to understand with a lot of helpful official documentation, guidelines, resources available from the Android Developers Team at Google.

By now, all of us in the android community know what is Jetpack Compose, its benefits, and ease it provides to us developers. It may be overwhelming to start using Jetpack Compose in an on-going android application where the codebase is too large and written in XML or to just start using it. Therefore, in this post, I will talk about how you can gradually start using Jetpack Compose for your android application development.

Jetpack Compose was built so that it can co-exist with the XML environment. As it interoperable with the views, you can easily start using Jetpack Compose in your existing projects.

Different ways to start adopting Jetpack Compose

1. Start with building new features with Jetpack Compose in an on-going project

This is where I started my compose journey. When it was time for us to add a new feature module to our existing project, we started developing it in Jetpack Compose.

Adding the Compose dependencies

Before you start using compose you will need to add the following dependencies in your app’s build.gradle file-

Set a compose boolean to true in the buildFeatures block.

buildFeatures {
        .....
        compose true
}

And, depending on your app’s need, add the following dependencies in the dependencies block.

dependencies {
    // Integration with activities
    implementation 'androidx.activity:activity-compose:1.6.0'    // Compose Material Design
    implementation 'androidx.compose.material:material:1.2.1'    // Animations
    implementation 'androidx.compose.animation:animation:1.2.1'    // Tooling support (Previews, etc.)
    implementation 'androidx.compose.ui:ui-tooling:1.2.1'    // Integration with ViewModels
    implementation 'androidx.lifecycle:lifecycle-viewmodel-compose:2.5.1'    // When using a MDC theme
    implementation "com.google.android.material:compose-theme-adapter:1.1.19"    implementation "androidx.compose.runtime:runtime-livedata:1.2.1"
}

Just recently, The Compose Bill of Materials (BOM) was introduced to make adding compose dependencies and managing versions of the compose libraries easier. You can use that instead of the above.

Adding new screens written entirely in Compose

This can be done by having your new screen’s UI being built in compose, i.e. building composables and then use these composables in the new activities like so-

class NewComposeActivity : AppCompactActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        
        setContent {
            NewComposeContent()
        }
    }

    @Composable
    private fun NewComposeContent() {
        ...
    }
}

Creating a mix screen with some part written in XML and some in Compose

There can also be cases where some of the UI from your new features is required to be added to some of the existing code/activities.

For example- You may develop a new feature like adding reminders in a todo-list app and you need to show a header with upcoming reminders on your reminders list page as well as your home page with your home page already written in XML.

This can be done with the help of ComposeView component where you can add a ComposeView to your XML code just like you’d add any other component like CardView, TextView or such.

<CardView ...>

  <ConstraintLayout ... >

     <TextView ... />

     <androidx.compose.ui.platform.ComposeView
       android:id="@+id/my_compose_view" ... />  </ConstraintLayout.../></CardView>

And then, you can use it in your activity class like so-

class MyHybridActivity : AppCompatActivity() {    var binding: MyHybridActivityBinding      override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)        .....
        setContentView(binding.root)        binding.composeView.apply {
            setContent {
                Text(
                    text = "This is the new UI developed in Jetpack Compose"
                )
                .....            }
        }
    }
}

Now, your XML will render parts of it’s screen with the ComposeView that you have defined in the setContent block above and parts with the traditional XML components.

2. Identify common UI code while writing new screens in Compose

Once you get a hold on creating new screens in Jetpack Compose, next step would be to identify the common UI code.

For example- The appbar, bottom navigation bar, buttons, title texts, common dialogs shown in the app, etc.

Bonus- The key here is to revisit your styles.xml file where you must have already defined different styles for your app’s buttons, texts, appbars, dialogs, etc. Use this to identify the UI components that could be made common.

This step will help prepare you for the next step where you would likely be migrating existing XML code into Jetpack Compose code.

3. Slowly move on to convert old XML files to Composables

In order to get started with converting old XML files to Jetpack Compose follow these simple steps-

Select a simple screen with the least number of components. For example- A Splash Screen or a listing screen with only a recycler view. Map each component with a composable component. i.e. a TextView to Text, MaterialButton to Button, RecyclerView to LazyColumn, etc. Now replace each XML component with the mapped compose components.

Be sure to revisit the common UI compose components you have already set aside in the above step to reuse them here.

Next, select those screens which already have ComposeViews in them. For example- the home screen we talked about in the above example.
Lastly, use the bottom up approach where the next screen to convert would be that which has the same parent as the previously converted compose view. For example- If there is a details screen comprising of two child components- one for the a header which shows details about a product and another which shows recommended products. If you have already converted the header XML into compose, it serves right that your next XML to convert would be the part which shows the recommended products.

References

Android Dev Summit’22 talk- From Views to Compose
Official Documentation- Adopting Jetpack Compose

Conclusion

In this blogpost we saw how to gradually migrate from XML to compose and step into the world of Jetpack Compose. Hopefully, this overview of guidelines helps you to start using Jetpack Compose in existing code base itself without waiting for new projects to start.