Delightful Animations in One Line of Code: Part 1

Cherrysh, the app for planning the perfect date, just got some beautiful animations with surprisingly little code. The Android Design site has been recommending that we enchant users with subtle effects like animation and have clear layout transitions. It turns out that modern versions of Android supply the tools to do this easily!

The app has always allowed users to close date spot recommendations they weren’t interested in to improve and personalize results. This transition used to happen instantly with another recommendation taking the place of the previous one:



With a single line of code, however, you can fade out the item being removed and slide in the new content from the bottom:



To do this you enable layout transitions by the animateLayoutChanges property on the containing layout:

<LinearLayout

a:id="@+id/recommendations_container"

a:layout_width="fill_parent"

a:layout_height="wrap_content"

a:orientation="vertical"

a:animateLayoutChanges="true"

>

<!-- recommendation items get inserted here -->

</LinearLayout>

This capability has improved along with Android. In 4.0, Ice Cream Sandwich, it animates changes related to the parent container as well such as the width of the changed container. In 4.1, Jelly Bean, all animations on the system run smoother by triple buffering and synchronizing work with the refresh of the screen. This prevents calculating animations multiple times or piecemeal with some work never even being shown by the screen and makes things much smoother. Also checkout the LayoutTransition.CHANGING constant which defines extra animation that can optionally be enabled in JellyBean to animate more than just add/remove/show/hide.

For this app, it’s now much more clear what’s going when the X button is tapped! Score! There are a lot of areas in Android where Google is doing a bad job on the APIs and not eating their own dog food. For example, the Google Maps API is far more limited than the JavaScript version on the web or what the Google Maps app itself does, and has actually been losing functionality as Google made previously undocumented classes inaccessible. For animations, however, we’re getting a lot of the improvements passed on to third party developers for use with little work on their part, which is great.

Hope this helps in your own coding adventures. Check out Cherrysh if you are looking for a place to go out to tonight or want to see the animation in action!