Jetpack Compose with Single Activity Navigation
--
In the moment of writing this article, the current Navigation Component library for Jetpack Compose is in alpha stage.
https://developer.android.com/jetpack/compose/navigation
Most of the projects will not adopt Jetpack Compose for the full project, but they could try to adopt it in a simple view.
Jetpack Compose provides a set of interoperability APIs to use Jetpack Compose views inside xml views and viceversa.
In this article I would like to share with you some recommendations to adopt Jetpack Compose in existing projects.
Single Activity Approach
Single Activity architecture propose the use of a single Activity that host a NavHostFragment. The NavHostFragment will be used to orchestrate all the navigation of your app.
You could maybe use more than one activity with different purposes, or think that some features are easier to implement from an Activity, but Fragments don’t restrict you to do anything.
Use a single Activity provides many advantages. I invite you to read more in the next article
https://developer.android.com/jetpack/compose/navigation
Adopting Jetpack Compose
Let assume that you are using a Single Activity for you current project. Let also asume that your team is considering to adopt Jetpack Compose.
Your team needs to understand that Jetpack Compose is better than XML for Android development. Your team need to understand that Jetpack Compose is the future of Android Development. You will need migrate your full project to Jetpack Compose sometime.
But it is not a good idea to forget that you are developing new features. So considere to adopt Jetpack Compose for new features before to migrate the full project.
Jetpack Compose interoperability APIs
Jetpack Compose provides two different approaches for adopting it in existing projects.
https://developer.android.com/jetpack/compose/interop/interop-apis
ComposeView in Fragments
If you want to add Compose UI content in a fragment or an existing View layout, use ComposeView and call its setContent() method. ComposeView is an Android View.
You can put the ComposeView in your XML layout just like any other View:
You only need to inflate the layout from the layout resource defined in XML. Then get the ComposeView using the XML ID, set a Composition strategy that works best for the host View, and call setContent() to use Compose.
If you need to implement multiple Compose views in a single XML, you need to assign a different ID for each compose view.
Android Views in Compose
Now, considere that not all the existing APIS are available for Jetpack Compose. Imagine that you want to implement an AdView or MapView in your existing Jetpack Compose views.
You can use the AndroidView composable to implement Android views in your Jetpack Compose views. AndroidView is passed a lambda that returns a View. AndroidView also provides an update callback that is called when the view is inflated. The AndroidView recomposes whenever a State read within the callback changes.
Conclusion
Test Jetpack Compose is as easy as adding a XML widget and you don’t need to migrate your full project to tests their advantages.
As soon as you tests it, you will love it.
