Create blue "tutorial" dialogs as in Android 4.4

Question

I would like to create some "dialogs" like those shown in Android 4.4 for example when you are first shown immersive mode. The little arrow is important for me because I would like to have the dialogin different places on the screen.

This is what I'm talking about:

Do I need to create a custom AlertDialog? How do I move it around, can I use the coordinates of a View? I don't really know where to start. Are there any examples on creating this type of thing? I am not interested in using the ShowcaseView library as in my opinion has the "old" holo look.

Answer 1

You can get the coordinate of views using getLocationOnScreen(), make sure to call this after the views have been inflated (so, not in onCreate() of your activity) or else you will be returned default int values (i.e. 0).

You should probably create your own DialogFragment. Incorporate your own custom layout which contains the little bubble and the button. A Quick and dirty sample for the onCreateDialog() would have the following

Dialog dialog = new Dialog(getActivity());
// Get rid of the annoying alert dialog title bar
dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
// You must set the content view after requesting window features, not before.
dialog.setContentView(someView);
// Make the dialog full screen
dialog.getWindow().setLayout(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
//Dim the background
dialog.getWindow().setBackgroundDrawable(new ColorDrawable(Color.argb(80, 0, 0, 0)); 

To incorporate the little arrow, you can try having variations of 9-patch images as the background of the little bubble. Another alternative would be to have an arrowhead and a bubble put into the same container, and setting the margin/padding between them to 0. Since you have the coordinates you can adjust the horizontal margins of the arrowhead accordingly. This is actually a pretty cool idea, I think I'll try my own interpretation of it this weekend.

I have actually been working on my own interpretation of the showcase library, Here is what i achieved. Much of the dynamic position changing should be the same I would think