To Compose, or Not to Compose, That is the Question | by Aiman Nabeel | Apr, 2022

Android View System vs Jetpack Compose — A fast comparability when creating animations

With the discharge of one other secure model of Jetpack Compose (woohoo! 🎉) again in February, we have to take a second to understand the immense exhausting work and willpower by the engineering staff at Google. They’ve been taking suggestions from the world-wide Android group and repeatedly enhancing this UI toolkit for us. Thrilling instances!

I’ve been following the event of Jetpack Compose libraries and enjoying round with it even when only a few of us could not have been able to take it significantly.

Me 👶:

Group:

There’s a lot to say about Compose and the way a lot it has developed in simply a few years. So I made a decision to share a few of my ideas on enjoying round with it, beginning with this one as my first ever technical weblog (me: no strain! 👼).

To start with, I assumed I’d share a selected use case that was raised and mentioned with my staff. We had deliberate so as to add an animated search bar within the app and the dialogue went on one thing like this:

What involved me with growing it with the present Android view system was the duplication of code that must be completed on the associated XML recordsdata to make the animation work (defined under). Certainly, there should be a greater option to do it. Which led to this million greenback query:

To compose or to not compose?

Too dramatic? To check this scandalous idea that I had now introduced, that is what I did subsequent. Just like what we’ve got within the app, I made a decision to create an animated search bar utilizing each applied sciences.

I created two tasks, one with the Android view system and the opposite with Jetpack Compose (each obtainable on GitHub and linked as follows). Right here’s what it seems like with the Android view system:

GitHub: https://github.com/Aimannab/SearchApp

Let’s see for instance, in my SearchApp mission, I’m creating an ImageButton for the again arrow:

See how we have to duplicate search_header_back_arrow twice within the search_header_motion_scene.xml. We all know we should do the identical for different components that will be a part of the animation.

For me, this isn’t superb and it has all the time bothered me. After I appeared into how we are able to do the identical factor in Compose, I used to be not dissatisfied!

So, how did I create the identical transition in Compose? I used AnimatedVisibility for the again button within the ComposableSearchApp mission as follows:

The place the again button widget is created as soon as and might be reused as many instances as you’d need. Right here’s what it seems like:

The search bar state can also be dealt with programmatically utilizing enum values giving us extra flexibility with tweaking the animation as we like:

And that’s it! 🙌

So, what advantages did I see with Jetpack Compose?

Cleaner code: The code is method cleaner, shorter and well-structured. If I need to make adjustments within the SetupBackButton widget, I solely make it as soon as. Versus what we used to do with XML, the place we needed to make the identical change in all places the again button was created/arrange (main_activity.xml + begin transition + finish transition).

Quicker compilation: The code is faster to execute with the @Preview annotation to your linked gadget or emulator. The preview will get deployed inside the identical mission app as a brand new exercise, so it shares the identical context and permissions, which suggests we don’t have to jot down boilerplate code e.g. asking for a permission if it has already been granted.

Reusability: The largest profit that sells itself right here is reusability and quicker growth. The SetupBackButton widget might be reused as many instances within the mission as we wish with its personal customized animation. This implies, you solely write/create the widgets as soon as and apply completely different variations of that very same animation in numerous places throughout your app.

💡Experimental: The one factor that I’d consider is that AnimatedVisibility continues to be on the experimental stage, which suggests it could be topic to adjustments or getting eliminated.

💡Interactive Mode: I’m hoping that enjoying round with animations might be prolonged sooner or later, though we do have a primary instrument i.e.Begin Interactive Mode. This allows you to preview and check gestures with out constructing the entire mission each time. It comes with limitations like no community entry, no file entry and a few Context APIs is probably not absolutely obtainable.

To dive deeper within the code on how the animation is being orchestrated with Compose, you’ll be able to test my mission ComposableSearch from the hyperlink under. Lastly, right here’s what it seems like:

GitHub: https://github.com/Aimannab/ComposableSearchApp

In case you’re questioning, I assumed I’d make the search bar developed with Jetpack Compose stand out extra (for apparent causes) by including a gradient background as follows:

And Voila!

Attempting to not be biased right here, however Jetpack Compose has a lot to supply! It’s like we’re getting a second likelihood in life to appropriate our previous errors.

But, it’s a totally new method of growing apps that you simply’d should study. With the Android Developers group so lively on this topic (particularly on Twitter), I imagine these are very thrilling instances to be working with Android applied sciences!

What I’m most wanting ahead to is with the ability to do a seamless migration of a whole app to Jetpack Compose sooner or later!

More Posts