Android offers two main animation frameworks: view animation and property animation. Each of these is fairly easy to implement. However, the main difference can be seen when you need to handle touch events on views that have changed their position after animation. Let’s see how both of these animation frameworks work, how they can be implemented and which one you should use for touch events.
When tapping a
View, we need to translate it up by 75% of its height. When tapping on the area where the
View was initially, our
View should slide back down.
View animations provide an easy to use API for animating the contents of a view object. This framework supports translation, rotation, growing and shrinking of a view. You can define these animations either in XML or programmatically.
The implementation of the view translation animation in XML contains the following in the animation resource file:
Then then animation needs to be loaded in the code.
Translating a view programmatically requires defining the animation and just calling start on the view that needs to be animated.
toYDelta is the change in Y axis that needs to be applied.
The property animation framework was introduced in Android 3.0 and allows the animation of any object, not just
Views. It offers a broader function scope - for example, the background color of a
View can also be animated - and has a slightly better performance than the view animations.
Implementing a view translation can be easily done programmatically.
animateByPx is the amount of pixels the view is translated on the Y axis.
Handling Touch Events
The main difference between view and property animations lies in whether the
View is modified or not. With view animations, the
View gets drawn in another position, but the actual
View does not move. So, this means that the view will not react to touch events on the area where it is drawn, but rather in the area where it was before the animation started.
With property animations, the object actually gets moved. Therefore it will react to touch events on its new location on the screen.
For a better understanding on how the touch area changes, we have implemented a selector for our
View’s background, allowing us to set two different colors depending on the pressed state of the view: pink for pressed and blue for not pressed.
Here’s what happens after translating the
View using view animations: when touching the area that is above the original location of the
View does not react. The touch events are caught by the area outside it.
When touching the area containing the initial position of the
View, we see that the area of the
Viewthat is still drawn over the original position reacts to our touch events.
With the property animations implementation we see that the
View reacts to touch events exactly as expected, no matter where the touch events happen.
Both view and property animations are easy to implement. Use the one that’s more convenient for you, but when needing to implement touch events on a
View that was already animated, you should use property animations.