Small Popup for Instructions, like foursquare ones

Question

After seeing the last screenshots of new foursquare application and their balloon like cartoon instructions, I'd like to create some of these in my application.

I found a similar question for iPhone Small popup for instructions... How?

Here is another screenshot of foursquare app:

I'd like to know how I could achieve that with Android.

Thanks in advance for any help.

UPDATE: This is what I could get so far but adding some buttons with a custom drawn background and layering them with a FrameLayout:

But I still couldn't get the triangle effect. Maybe there is something I can do with my custom background shape?

UPDATE2

After checking your suggestions, I decided to go with Aaron C idea and added an image with an arrow on it. This is my current result:

Thank you Snailer, QuickAction API project seems very much promissing. I'll check it out when implementing more features in my app.

Now, I just need to get the right color or maybe I could just let it this way. It seems nice too.

And, so, to summarize what I did:

1. Got my initial xml layout inside a FrameView.

2. As I'm using a frameview, everything I put in here will be piled one over the other. That's how I could add things to the layout.

3. In that framelayout, I put 2 relativelayouts whith an image with the triangle and a button to create the two upper popups. In the bottom I put a button only.

4. That's it. I hope it helps somebody.

Thank you very much again for all your help!

Answer 1

That sounds like a neat thing to implement. There might be a built-in Android variation on AlertDialog that achieves this, but if not here is how I would go about implementing it:

Create a new Activity whose background is black with a very high (low?) alpha color value. This will allow you to see through it to the previous Activity in the stack. Then, add your alert at whatever coordinates you like using a relative layout with padding values.

You might also want to add a touch listener that exits the Activity if the user touches the balloon (or maybe anywhere in the screen).

If you want to be fancy with coordinate placement of the balloon, you can pass this information into the new Activity using the Activity's launch Intent with the putExtra() methods.

Answer 2

It's probably achieved through skinning a toast.

The developer documentation shows a skinned toast in "Creating a custom toast view" at http://developer.android.com/guide/topics/ui/notifiers/toasts.html

Answer 3

You may want to look at the QuickAction API. It acheives this by using PopupWindow, skinned, positioned, and animated.