Jetpack Compose Interop Part 1: Using Traditional Views and Layouts in Compose with AndroidView
Like most Android developers following the development of Jetpack Compose you are probably wondering if you will need to rewrite your views or your entire app from the ground up. Well, it turns out, you might not have to, in fact, just like the days when we were all beginning to adopt Kotlin, we can slowly adopt new views and even make our current UI work with Jetpack Compose. It may actually be even more useful to interop between the two while Jetpack Compose becomes the default and your team gets more comfortable building UI in this new world.
This is Part 1: focusing on using traditional Android Layouts and Views inside Compose UI. Part 2 is here, if you want to see how to use Compose UI inside traditional Android Views.
Note: I am not going to deep dive into Jetpack Compose and I do assume you have some basic knowledge of how to use Compose. However, it should be fairly easy to follow along without knowing too much.
AndroidView
☝️That title isn’t poorly formatted, that's actually a very convenient class in the Jetpack Compose library that allows us to easily use traditional Views, ViewGroups, etc inside your @Composable UI components. So let's look at an example:
So from the above snippet, you can see we are using the `AndroidView` composable allowing us to render a TextView within our BasicList. The AndroidView takes a viewBlock lambda parameter where you can return any View.class. So already you can see how we can simply display a traditional TextView inside a Compose UI by creating it within our viewBlock. Conveniently we also get a Context within our block so we can easily use this to construct our views.
Now anyone who has played around with Jetpack Compose is probably thinking: “Why would you want to use a TextView in Compose?”. And they would be right to ask that since Compose already has a Text composable to render text.
So let's take a less contrived example where AndroidView is useful.
Libraries and Dependencies
You can probably guess from the heading where this is going. We all use libraries and SDKs within our apps and these libraries are hardly going to rewrite everything in Compose. At least not in the near future. Some common examples of this will be things like map SDKs or media players like ExoPlayer.
With this in mind, let's take the map example for a spin. I am going to use Here maps for this example but it will work just as well with Google Maps. I have also left out the tutorial on setting up Here maps as it's not really what this post is about, but you can easily explore the Lite SDK by following their documentation here
The Here Maps Lite SDK provides us with a MapViewLite traditional Android view component that we want to render in our Compose UI. So we are going to create our own MapView composable that will simply wrap the MapViewLite by using the same AndroidView class we used above with the TextView example.
And then let's use our new MapView composable in a full-screen Activity.
And there you go, we have our Here map displaying within a Compose UI without having to write our own Map UI 😅.
This example is useful to see what we can do and that it is possible to use older Android views from dependencies that are not going to be rewritten anytime soon in Jetpack Compose, but it's still a bit simple so let's use a current more complex real-world UI.
Plex App
Over the past year, I have been working on a TV guide within the Plex app. It has taken a considerable amount of work and is something that is continually being refined and enhanced with new features.
TVGuideView
In the Plex app the TVGuideView is basically a composite View class that nicely wraps up the TV guide for support on TV and Mobile devices. So let's do the same thing we did before with maps (create a composable view) but this time with the TVGuideView
Now we have our new GuideView let's use that in our Activity.
And there you go, our original TVGuideView can now be used within our Compose UI without having to be rewritten. And since we are now in Compose we can easily build and decorate the UI around it using Compose components. So let's add a ConstraintLayout (the Compose one) and a dumb heading to our Compose UI.
And that’s it, use AndroidView when you want to use traditional views in your Compose UI. Check out Part 2 here where we use composable UI within traditional Android UI components.
Summary
The point of these blog posts was more to show what is possible for Compose interop. I can provide more details but hopefully, this and Part 2 provide enough detail to get you started and thinking about how you might adopt and interop Compose in your projects as things begin to stablise. And just to recap:
- Use AndroidView to render traditional
Views in your Compose UI. - Use ComposeView/AbstractComposeView to render Compose UI in traditional Android
Views and Layouts (As outlined in Part 2).
