Flip Your ImageViews
This post will be cut in two parts. In the first part, I’ll present my small android library FlipImageView which allows you to create easily an
ImageView which can turn into another
Drawable. Then I’ll show you how the animation is performed and how you can modify it.
You can download a sample app on the store if you want to see what it looks like.
FlipImageView extends ImageView, that means if you have your own custom
ImageView, I suggest you to extend
FlipImageView, or look at the source code and take the animation part.
There are two ways to create your FlipImageView:
- Via XML
1 2 3 4 5 6 7 8 9 10 11 12 13
- Or programmatically
1 2 3 4 5 6
Note: setDrawable is different from setImageDrawable which one will set directly the drawable to the ImageView.
You can disable the flip animation by calling
The flip animation will be launched each time you click on the image. You can of course call it programmatically, with
toggleFlip() method or
setFlipped(boolean flipped) method. You can also Override onClick or set another
View.OnClickListener if you do not want the image view to flip when clicked.
You can set a
OnFlipListener to your FlipImageView. Three events will be triggered:
onClick(FlipImageView flipImageView): called when the imageView is clicked
onFlipStart(FlipImageView flipImageView): called at the beginning of the flip animation
onFlipEnd(FlipImageView flipImageView): called at the end of the animation
Note: onFlipStart and OnFlipEnd won’t be called if you disabled the flip animation.
You can also reverse the animation, for example if you want your ImageView to flip in the other direction, to make a “flip back” transition. To do that, just call
setRotationReversed(true) every time you flip your image.
You can enable/disable x, y and z rotation axis via xml or programmatically too.
I strongly recommend you to play with existing
interpolators (bounce/overshoot are funny :p) or to create new ones. You could be surprised by the effect :p
How does this work?
Here is the transformation part:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42
Well, I think the code is pretty clear (I added some comments too). Do not hesitate to custom the animation by trying some interpolators or modifying directly the
That was a pretty short post to introduce my lib, but I’m sure some guys will be happy to discover that kind of small tricks which can make your app better. But however, please do not make all your controls animated, just when needed, or your app will be really annoying.