Jetpack Compose: The Adoption and Migration Guide
Why adopt Compose
Less Code
If we compare the existing UI toolkit with the new one, it has less code. And lesser code helps us to avoid entire classes of bugs. This makes the code simple and easy to maintain.
Intuitive
You just need to describe your UI and then Compose will take care of the rest. As the app state changes your UI automatically gets updated. This is the magic of the Jetpack Compose.
Accelerate Development
It is compatible with all your existing code so you can adopt it when and where you want. You can integrate a new UI toolkit in the existing project (old UI toolkit) or vice versa. It helps to iterate fast with live preview.
Powerful
Using the new toolkit you can create attractive apps with access to the Android platform APIs and built-in support for Material design, Dark themes, Animations and more.
Easy to write UI Test
Performance, Build time and Apk sizes
What is Jetpack Compose
Jetpack Compose is a modern toolkit for building native Android UI. It falls under the declarative UI pattern. It accelerates UI development on Android with less code, powerful tools and intuitive Kotlin APIs.
It is written completely in Kotlin and is fully compatible with the existing Android view system. Using compose your UI is defined as a function and this function transforms data into a view hierarchy.
What is Compose?
In compose “Everything is a function”
Let’s define Compose as the composable function responsible for displaying part of the user interface or design of the mobile app screen.
How
Requirements to develop Jetpack Compose
Our app had to support API level –Android 5.0 Lollipop (API 21) and higher. The development environment was supposed to be Android Studio Arctic Fox (2020.3.1) or greater. The project has to be fully migrated to AndroidX.
Plan your migration
Migrating to Compose depends on you and your team. There are many different ways to integrate Jetpack Compose into an existing Android app. Two common migration strategies are:
- Develop a new screen entirely with Compose
- Take an existing screen, and gradually migrate its components.
- Compose in new screens
A common approach when refactoring your app to a new technology is adopting it in new features you build for your app. In this case, new screens apply. If you need to build a new UI screen for your app, consider using Compose for it while the rest of the app might remain in the View system.
In this case, you’ll be doing Compose interop at the edges of those migrated features.
2. Compose and View together
Given a screen, you can have some parts migrated to Compose and others in the View system. For example, you could migrate a RecyclerView while leaving the rest of the screen in the View system.
Or vice-versa, use Compose as the outer layout and use some existing views that might not be available in Compose such as MapView or AdView.
3. Complete migration
Migrate whole fragments or screens to Compose one at a time. It is simplest but very coarse-grained.
That’s it for this part, In the coming parts, I will show you how you can migrate your old UI views to composable views.
Happy reading till then :)
Other stories related to Jetpack compose
https://medium.com/@jyotic26/jetpack-compose-migration-part2-5567392b565f
