12

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: enter image description here

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:

enter image description here

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:

enter image description here

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!

Community
  • 1
  • 1
Francisco Junior
  • 1,873
  • 17
  • 23

3 Answers3

2

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.

Aaron C
  • 3,240
  • 1
  • 21
  • 22
  • 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. – Aaron C Aug 13 '11 at 18:44
  • 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! – Francisco Junior Aug 14 '11 at 19:32
  • 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. – Francisco Junior Aug 14 '11 at 19:33
0

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

Kheldar
  • 5,235
  • 3
  • 29
  • 62
  • 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? – Francisco Junior Aug 13 '11 at 18:32
  • 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. – Kheldar Aug 13 '11 at 19:41
0

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

Snailer
  • 3,603
  • 3
  • 32
  • 45