How to develop a passage through the dialog that appears when you first start it?

Question

I would like to develop a Dialog, which consists of 3 steps, to guide the user when he launches the application for the first time.

The following image is an example of what I would like to achieve:

1- I would like to know how to add a character to close the dialog box in the upper right corner?

2 How can I implement small circles at the bottom of the screen that indicate the current step? Can they be created programmatically?

3 - To be sure, I decided to move between the steps of the dialog using ViewFlipper . Is it correct?

Thanks in advance.

Answer 1

I would like to know how to add a mark to close the upper right corner dialog box?

Do not do that. It looks like it was a direct port from the iphone app. Use custom dialog containers / buttons for Android.

How can I implement small dots at the bottom of the screen that the current step indicates?

What have you tried? There are a million ways to do this, depending on the rest of the workflow.

Just to be sure, I decided to move between the steps of the dialog using ViewFlipper. Is this the right approach?

May be. It depends on what you show. If you show only one image or something simple, then this is the best approach. I would create different fragments of the dialog (you use fragments, right?) For different steps. This way you can automatically push them onto the back stack as you move around the workflow.

Answer 2

One way to implement the "little dots below":

• include dots in each image created.
• draw one of the points highlighted in each image
• Scroll images in the order of the selected points. (or highlight the points in the order in which you want to display your images)

but this will cause your dots to disappear while scrolling images.

if you want to avoid this:

• create two different types of images, one acts as a container for the main image, the other as a container for points, place the first type of image on top of the other.
• create an image consisting only of points, each of which has one of the selected points.
• view both images in sync
• use flip animation in the top view of the image
• Do not use animation or minimal animation for dots.

This will give the desired effect. Hope this helps :-)