Display a "help" overlay over an Android layout

Question

I'm working on a game for the Android (Sky Hiking - Google Play, Github). I want to add a "help" option for the game where it'll go over the game components one by one, point to them with an arrow and have a text box say what they are used for. I'm looking for advice on what's the best way to achieve this. Should I display a huge (partly transparent) image over the game activity which contains the arrow (I will need an image for each arrow for each component of the game).

Edit: There's also an issue of doing this for different screen sizes.

What's the best practice on this one?

Answer 1

Here's what I would do in such a case. It may not be the best solution, but it should work, irrespective of the screen size:

Do the following in a loop, once for each element:

1. Get the element's current position on screen.
2. Draw your arrow in a position that is right next to your element. You can get this position by getting the element's X and Y coordinates, and adding a certain amount of space. For example, if the element is at 10, 10, draw the arrow at 25, 25. You can take the width of the element into account while deciding where to draw the arrow. You should also check whether the left or the right side has more space available, and draw on that side. Additionally, you could draw the arrow on one side, and the text on another if the element is close to the middle.
3. After you've drawn the arrow, you can show your text box with the help content on another part of the screen. You can store the help content in the XML, and display the appropriate string for this element.
4. Remove the arrow and text box in preparation for the next element.