[Part 2] Jetpack Compose — Preparing to Migrate Existing Layout to Compose
There are 4 parts in this article series for migration process to compose.
Part 1: Jetpack Compose — Introduction
Part 2: Jetpack Compose — Preparing to Migrate Existing Layout to Compose
Part 3 : Jetpack Compose — Migration of Component View (Input Text) on Existing Layout
Part 4 : Jetpack Compose — Implementing a Compose View in a ViewGroup
Hello Folks! In the previous article I discussed the introduction to Jetpack Compose technology. In this article I will discuss the steps in migrating the existing layout code to compose.
Since compose has a stable version and is ready for production env app many developers are trying to build an app layout by implementing compose. However, is it possible to build layouts with compose on applications that have been released with the old layouts code legacy, that is XML and View? The answer is possible, because Compose has the ability to adapt and coexist with XML and View systems (Interoperability). In other words, we can combine layouts built with XML with Compose.
There are two ways to migrate existing layout to compose. The first is to put the compose inside a view, and the second is to put the view inside the compose. It should be understood that the view here is a component declared in an xml file.
Let’s discuss the migration process one by one, using the 2 methods above:
- Compose inside View, if using this method we have to include the compose component inside a view. The view component has a layout built in an XML file and initialized in the Activity class. Compose’s approach to XML files and activity classes is of course different. To include compose in an XML file, you need a component called ComposeView. Meanwhile, to include compose in the Activity class, a setContent component is required.
- View inside Compose, if using this method we can use AndroidView component.
To migrate to compose on an existing project, make sure that the project supports implementing compose. I’ve set up a simple project to follow the migration steps in this article. The project source code can be accessed at the following link. Next, clone the project and use the before-migrate branch.
- Open the build.gradle(module: app) file, add some code lines to activate the compose feature.
If the project you are migrating uses modularization or multiple modules you can add the build.gradle file to the root module/common module.
2. Add the compose library as needed in the dependency file, this is still done in the build.gradle (module:app) file
3. If you pay attention to the code above, the library calls a version variable. Add compose versioning to the build.gradle (project:app) file.
4. Then do the sync project, wait until the load process is complete.
If the Gradle build process is complete and there are no errors, the project is ready to be migrated.
See you in the next article. :)
