Android – The Most Popular Best Ways To Add Motion To UI

Hello Readers, CoolMonkTechie heartily welcomes you in this article (The most popular best ways to Add Motion To UI).

In this article, we will learn about different best ways to Add Motion To UI using Android Animation.

When our UI changes in response to user action, we should animate the layout transitions. These animations give users feedback on their actions and help keep them oriented to the UI. Android includes the transitions framework, which enables us to easily animate changes between two view hierarchies. The framework animates the views at runtime by changing some of their property values. The framework includes built-in animations for common effects and lets us create custom animations and transition life cycle callbacks. This article shows the overview of different ways we can Add Motion to UI using Android Animation.

A famous quote about learning is :

” I am always ready to learn although I do not always like being taught. “

So Let’s begin.

Animation Overview

Animations can add visual cues that notify users about what’s going on in our app.  They are especially useful when the UI changes state, such as when new content loads or new actions become available. Animations also add a polished look to your app, which gives it a higher quality look and feel. Android includes different animation APIs depending on what type of animation you want.

Different Ways To Add Motion To UI

Android provides the different ways to add motion to UI using Android animation:

1. Animate bitmaps

When we want to animate a bitmap graphic such as an icon or illustration, then we should use the drawable animation APIs. Usually, these animations define statically with a drawable resource, but we can also define the animation behavior at runtime.

An animated drawable
Source: Android Developers (An animated drawable)

For example, animating a play button transforming into a pause button when tapped is a pleasant way to communicate to the user that related with the two actions, and that pressing one makes the other visible.

2. Animate UI visibility and motion

When we need to change the visibility or position of views in our layout, we include subtle animations to help the user understand how the UI is changing.

To move, reveal, or hide views within the current layout, we can use the property animation system provided by the android.animation package, available in Android 3.0 (API level 11) and higher. These APIs update the properties of our View objects over time, continuously redrawing the view as the properties change. 

subtle animation
Source: Android Developer ( A subtle animation when a dialog appears and disappears makes the UI change less jarring )

For example, when we change the position properties, the view moves across the screen, or when we change the alpha property, the view fades in or out.

To create these animations with the least amount of effort, we can enable animations on our layout so that when we change the visibility of a view, an animation applies automatically.

Physics-based motion

Our animations are natural-looking if it apply real-world physics. For example, they should maintain momentum when their target changes, and make smooth transitions during any changes.

The Android Support library includes physics-based animation APIs to provide these behaviors that rely on the laws of physics to control how our animations occur.

There are Two common physics-based animations as :

  • Spring Animation – Physics-based motion drives by force. Spring force is one such force that guides interactivity and motion. A spring force has the following properties: damping and stiffness. In a spring-based animation, the value and the velocity calculate based on the spring force that applies on each frame.
  • Fling Animation – Fling-based animation uses a friction force proportional to an object’s velocity. Use it to animate a property of an object and to end the animation gradually. It has an initial momentum, which receives from the gesture velocity, and gradually slows down. The animation ends when the velocity of the animation is low enough that it makes no visible change on the device screen.

Animations are not based on physics — such as those built with ObjectAnimator APIs—are fairly static and have a fixed duration. If the target value changes, we need to cancel the animation at the time of target value change, re-configure the animation with a new value as the new start value, and add the new target value. Visually, this process creates an abrupt stop in the animation, and a disjointed movement afterwards, as shown in below figure:

Animation built with ObjectAnimator)
Source : Android Developer (Animation built with ObjectAnimator)

Whereas, animations built by with physics-based animation APIs such as DynamicAnimation are driven by force. The change in the target value results in a change in force. The new force applies on the existing velocity, which makes a continuous transition to the new target. This process results in a more natural-looking animation, as shown in figure .

Animation built with physics-based APIs
Source : Android Developer (Animation built with physics-based APIs)

3. Animate layout changes

On Android 4.4 (API level 19) and higher, We can use the transition framework to create animations when we require swapping the layout within the current activity or fragment.

All we need to do is specify the starting and ending layout, and what type of animation we want to use. Then the system figures out and executes an animation between the two layouts. We can use this to swap out the entire UI or to move/replace just some views.

For example, when the user taps an item to see more information, we can replace the layout with the item details, applying a transition like the one shown in figure.

An animation to show more details achieved by either changing the layout or starting a new activity
Source : Android Developer ( An animation to show more details can be achieved by either changing the layout or starting a new activity )

The starting and ending layout are each stored in a Scene, though the starting scene determines automatically from the current layout. We then create a Transition to tell the system what type of animation we want and then call TransitionManager.go() and the system runs the animation to swap the layouts.

4. Animate between activities

On Android 5.0 (API level 21) and higher, we can also create animations that transition between our activities. They base this on the same transition framework, but it allows us to create animations between layouts in separate activities.

We can apply simple animations such as sliding the new activity in from the side or fading it in, but we can also create animations that transition between shared views in each activity. For example, when the user taps an item to see more information, we can transition into a new activity with an animation that seamlessly grows that item to fill the screen.

As usual, we call startActivity(), but pass it a bundle of options provided by ActivityOptions.makeSceneTransitionAnimation(). This bundle of options may include which views are shared between the activities so the transition framework can connect them during the animation.

That’s all about in this article.

Related Other Articles / Posts

Conclusion

In this article, we understood about different best ways to add motions to UI using Android Animation. This article showed the overview of different ways to handle motion in Android UI.

Thanks for reading! I hope you enjoyed and learned about UI Motion Concepts in Android. Reading is one thing, but the only way to master it is to do it yourself.

Please follow and subscribe us on this blog and support us in any way possible. Also like and share the article with others for spread valuable knowledge.

You can find Other articles of CoolmonkTechie as below link :

You can also follow official website and tutorials of Android as below links :

If you have any comments, questions, or think I missed something, feel free to leave them below in the comment box.

Thanks again Reading. HAPPY READING !!???

Loading

Summary
Android – The Most Popular Best Ways To Add Motion To UI
Article Name
Android – The Most Popular Best Ways To Add Motion To UI
Description
In this article, we will learn about different best ways to Add Motion To UI using Android Animation. When our UI changes in response to user action, we should animate the layout transitions. These animations give users feedback on their actions and help keep them oriented to the UI. Android includes the transitions framework, which enables us to easily animate changes between two view hierarchies. The framework animates the views at runtime by changing some of their property values. The framework includes built-in animations for common effects and lets us create custom animations and transition life cycle callbacks. This article shows the overview of different ways we can Add Motion to UI using Android Animation.
Author

4 thoughts on “Android – The Most Popular Best Ways To Add Motion To UI”

  1. Pingback: Android – An Overview Of Property Animation In Android – CoolMonkTechie

Leave a Comment