It is no secret that Jetpack Compose is all rage these days. Jetpack Compose is the recommended Android development toolkit that accelerates Android development, is easy to migrate to, simple to understand with a lot of helpful official documentation, guidelines, and 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 the ease it provides to us, developers. It may be overwhelming to start using Jetpack Compose in an ongoing 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 is 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 ongoing 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 to your app’s build.gradle file-
- Set a compose boolean to true in the
buildFeaturesblock.
- And, depending on your app’s need, add the following dependencies in the
dependenciesblock.
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 built in compose, i.e. building composable and then use these composable in the new activities like so-
Creating a mixed screen with some parts 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 to-do 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.
And then, you can use it in your activity class like so-
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, the 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 will likely be migrating existing XML code into Jetpack Compose code.
3. Slowly move on to convert old XML files to Composables
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
TextViewtoText,MaterialButtontoButton,RecyclerViewtoLazyColumn, 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 that already have
ComposeViewsin 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 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 that shows the recommended products.
References
- Android Dev Summit’22 talk- From Views to Compose
- Official Documentation- Adopting Jetpack Compose
Conclusion
In this blog post, 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 the existing code base itself without waiting for new projects to start.
