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!

Aaronaaronic

To get the triangle effect, I'd put it inside the custom background image – Brocade

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.

Cytogenetics

The most straightforward way I thought of, although it is somewhat hackish, is to create an image of one and show it in an ImageView on the edge of your button. – Cytogenetics

Hi, Aaron C, after checking Snailer suggestion, I decided to implement it like you said regarding the hackish way of adding a image with a triangle in it. The current result is in my UPDATE2 screenshot. Thanks for your suggestion! – Aaronaaronic

The first idea of creating an activity didn't work because the background couldn't be transparent. Android removes the previous activity from the stack and so it didn't work, or at least I couldn't get it to work. – Aaronaaronic

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

Brocade

I don't know if it would be a toast because it only dissapears if you tap on it. So maybe it is a button? – Aaronaaronic

You also could make a custom view of course... Aaron's solution looks like a great one if you want the user to have to touch the popup. – Brocade

Answer 3

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

Impassive