Rotate Images Around a Circle?

Question

Please take a look at this app snapshot:

This is a bank application. it has 6 buttons around the bank logo. You can rotate the images by click-and-hold in one of them and move your finger in either direction (clockwise or counter-clockwise). So, for example, I can rotate them to put the Currency Convertor image in the place of the Login image.

In my app, I have 6 Images too, I want to rotate them. How can I do that?

Update: BTW, this is an iPhone app but I think it is not iOS-specific issue.

Answer 1

Assuming you don't need to change the items in the "menu" (enable/disable/order/visibility) you can probably "cheat" by having a bitmap with the items pre-drawn as required and rotating the bitmap. The image over the top and background etc can be done by "layering" the images, so..

1. you have a background image (probably the "bevel" around the dial) which you draw first..
2. you then rotate your dial image to place your menu option where you want it (transparent anywhere you want the background to be seen..) and draw it over the background

3. you then draw your pointer image over the dial (again, transparent anywhere you want the dial and background to be seen).

   • the end result would (in theory) look very much like your screenshot.

on Android you would probably do this on an off-screen bitmap so the user doesn't see the image being built, then draw the entire finished bitmap. On iOS, offscreen buffering is mostly automatic, so you probably don't need to worry about it.

..it gets trickier if you want to change the state of the items.. I would "build" the dial with images of the items (as segment images) unrotated, then rotate and draw the "built" dial.

I would personally show the shadows on the dial as another layer (it would be step 2.5) using a partially transparent bitmap dimming the shadowed areas. It would make the rotation more convincing as the shadows would stay in the correct places..

Answer 2

Just do this

RotateAnimation rAnim = new RotateAnimation(0, 359, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
rAnim.setDuration(1000);
image.startAnimation(rAnim);