To Compose, or Not to Compose, That is the Question
Android View System vs Jetpack Compose — A quick comparison when creating animations
With the release of another stable version of Jetpack Compose (woohoo! 🎉) back in February, we need to take a moment to appreciate the immense hard work and determination by the engineering team at Google. They have been taking feedback from the world-wide Android community and continuously improving this UI toolkit for us. Exciting times!
I have been following the development of Jetpack Compose libraries and playing around with it even when very few of us may not have been ready to take it seriously.
Me 👶:
Team:
There’s much to say about Compose and how much it has evolved in just a couple of years. So I decided to share some of my thoughts on playing around with it, starting with this one as my first ever technical blog (me: no pressure! 👼).
To begin with, I thought I’d share a specific use case that was raised and discussed with my team. We had planned to add an animated search bar in the app and the discussion went on something like this:
What concerned me with developing it with the existing Android view system was the duplication of code that needs to be done on the related XML files to make the animation work (explained below). Surely, there must be a better way to do it. Which led to this million dollar question:
To compose or not to compose?
Too dramatic? To test this scandalous theory that I had now announced, this is what I did next. Similar to what we have in the app, I decided to create an animated search bar using both technologies.
I created two projects, one with the Android view system and the other with Jetpack Compose (both available on GitHub and linked as follows). Here’s what it looks like with the Android view system:
Let’s see for example, in my SearchApp project, I’m creating an ImageButton for the back arrow:
See how we need to duplicate search_header_back_arrow twice in the search_header_motion_scene.xml. We know we will have to do the same for other elements that would be part of the animation.
For me, this is not ideal and it has always bothered me. When I looked into how we can do the same thing in Compose, I was not disappointed!
So, how did I create the same transition in Compose? I used AnimatedVisibility for the back button in the ComposableSearchApp project as follows:
Where the back button widget is created once and can be reused as many times as you’d want. Here’s what it looks like:
The search bar state is also handled programmatically using enum values giving us more flexibility with tweaking the animation as we like:
And that’s it! 🙌
So, what benefits did I see with Jetpack Compose?
✅ Cleaner code: The code is way cleaner, shorter and well-structured. If I want to make changes in the SetupBackButton widget, I only make it once. As opposed to what we used to do with XML, where we had to make the same change everywhere the back button was created/set up (main_activity.xml + start transition + end transition).
✅ Faster compilation: The code is quicker to execute with the @Preview annotation to your connected device or emulator. The preview gets deployed within the same project app as a new activity, so it shares the same context and permissions, which means we don’t have to write boilerplate code e.g. asking for a permission if it has already been granted.
✅ Reusability: The biggest benefit that sells itself here is reusability and faster development. The SetupBackButton widget can be reused as many times in the project as we want with its own custom animation. This means, you only write/create the widgets once and apply different versions of that same animation in different locations across your app.
💡Experimental: The only thing that I’d keep in mind is that AnimatedVisibility is still at the experimental stage, which means it may be subject to changes or getting removed.
💡Interactive Mode: I’m hoping that playing around with animations will be extended in the future, although we do have a basic tool i.e.Start Interactive Mode. This lets you preview and test gestures without building the whole project every time. It comes with limitations like no network access, no file access and some Context APIs may not be fully available.
*******************************************************************
UPDATE (May 2022):
Checkout new tooling support with Compose 1.2 Beta announced at Google I/O 2022:
Animation Preview: If your animations are described in a composable preview, you can now use Animation Preview to inspect and coordinate all of them at once. You can also freeze a specific animation.
*******************************************************************
To dive deeper in the code on how the animation is being orchestrated with Compose, you can check my project ComposableSearch from the link below. Finally, here’s what it looks like:
In case you’re wondering, I thought I’d make the search bar developed with Jetpack Compose stand out more (for obvious reasons) by adding a gradient background as follows:
And Voila!
Trying not to be biased here, but Jetpack Compose has so much to offer! It’s like we are getting a second chance in life to correct our past mistakes.
Yet, it’s a completely new way of developing apps that you’d have to learn. With the Android Developers community so active on this subject (especially on Twitter), I believe these are very exciting times to be working with Android technologies!
What I’m most looking forward to is being able to do a seamless migration of an entire app to Jetpack Compose one day!
