How to build below screen in titanium?

Question

below i attached an app help guide screen. I am understanding how to build this screen.

If any body have idea please share here

Answer 1

So, using images is bad. You'll need images for translations and if you do this as one image you'll need to ensure all devices are covered so your arrows point to the right element.

Minimise images == smaller app.

First thing you'll need to do is a create a blocker view -- so that's a view that will fill the screen and have a black background with opacity.

You can't apply that to the window as everything in it will be semi-transparent so:

1. Create a transparent Window that fills the screen.
2. Add to that window a view that fills the window and has opacity say 0.5 and black background
3. Add to the Window (not the view you just created) the other elements and button -- ideally, these should be individual graphics of the arrows, sized in such a way that you can position them based on the host element (the item they are pointing to / referring to). Use real text so you can handle translations / reduce file size.

So you'll need a way to associate each tip with a control they are anchored too, and that will ensure that regardless of the screen size, the tip will appear in the correct place.