How to Create QuickAction Dialog in Android

I have updated the quickaction implementation code so it can be used more efficient and the dialog will be automatically dismissed after pressing the action item. All the source codes now available via github so you can track the changes.

Official Twitter application for Android has introduced new Android UI features and behavior patterns such as Dashboard, Search Bar, QuickAction and Action Bar. One of the interesting pattern is QuickActions that displays contextual actions in a list view. This pattern actually already exists in QuickContact dialog/bar in default Contact application (since Android 2.0).

The QuickActions dialog is not included in standard Android SDK, so we have to create it manually. At first, i had no idea on how to create it so i decided to download and read the Contact app source code from Android git. I found that theQuickContact dialog uses private API call (com.android.internal.policy.PolicyManager) that does not exists in standard SDK. After posting question about it on google groups and stack overflow, i got the solution for it from Qberticus (thanx Qberticus!).

Qberticus’s QuickActions uses simple/plain layout so i have to create a custom layout so it will look like QuickContact in Contact app or QuickActionsin Twitter app. Based on QuickContact source code, i made a slight modification on Qberticus’s BetterPopupWindow class and extended it to implement custom layout. I also made it customizeable, so the icon and text in action list can be customized.

If you found this stuff useful to your work, please consider a donation. By doing this you will be helping me to keep improving this stuff and to continue to help anyone who needs, and maybe keep on helping you in the future.

Thanks for your support, will do my best to keep the info fresh and useful.

I am making my own Contact mgmt system & implemented the above code. i need 2 implement the further functionality now.. ie; to make a call after clicking on the “Call” Action Item.. I have the code to initiate a call from Android. But as you see in the Native Address Book, if you have 2-3 phone numbers saved for a contact, the QuickAction window grows down listing all the numbers saved & asks you to select one from the 2-3 phone numbers.. any idea how to implement this window …

Hi, I’d like to make a few modifications to the above presented solution.

First of all, if I want to use icons which are larger than the once in the example, the action item area grows below the row of action items. I’ve tried modifying the padding and such to give the icon some more space, but it didn’t work.

Any ideas how to make the above example work with arbitrarly large icons? And/or with the text below the icon?

In order to use more bigger action icons, you must make a modification on quickaction’s icon, make a new bigger image for it’s rail background. Or try to use Twitter’s quickaction icon (extract its apk files and copy background image from drawable-mdpi/hdpi).

This is so cool! Great job, Lorenz. But when you use this component, you only target your application for Eclair and above? Do you know of any component that is similar to this for Cupcake and Donut? I’m not saying that it has to be exactly the same, but alike.

There is only one caveat to this that I can see: in order for the labels to all line up, the icons must be the same size. Since they _should_ be the same size to begin with, this isn’t much of a problem.

I’ll reiterate what everyone else on here as said so far. Thanks a ton to you and Qberticus for this work. I was just about to give up and try to work this myself when I finally stumbled upon your blog post. I’m hoping that Google will put something like this in the next release of the SDK, but until then, you’ve done a beautiful job with both samples. Thanks again!

What is the best practice when dealing with PopupWindow class ?
Is it okay if I just create and create another instance everytime I want to show a popup ?
Can I reuse the same instance ? That is after I call dismiss, then I call showAtLocation again.

Good work on the widget, saved a life here!
Quick question though, how do you implement Gallery3D-like QuickActions?
I’ve tried
mQuickAction.showDropDown(); with no luck,
mQuickAction.showLikeQuickAction(0,30); with no luck either.
Thanks.

awesome tutorial, thanks alot.
one question about it: is it possible to implement quick actions using this code as well on the application icon? much like the contacts placed on the home screen pop up a context menu to call, sms, emai, etc. how would you go about it?

Great job, love the look and feel of your quick action. I have found one problem while using a listadapter that has more than one size of views in the list. The quickaction window does not line up quite right like it does with a list of equal size views. Anyone have this problem or any solutions?

One more question though.
Really don’t want to come across as the unappreciative nitpicker here but how come that the borders and icons are not really sharp and clean – and more important do you or anybody else know how to improve the overall look of this *admittetly already really nice* feature?

I’ve only one question, if I want to use Gallery 3D like actions and QuickActions together in my app, do I have to import both projects? (I would have to refactor, because it’s in the same package and the conflict will appear). Or is there any mysterious flag to show normal QA and gallery 3D like?

One thing that occurs while I tested your implementation: If you click on an item in the quick action bar the item gets transparent (doesn’t show the orange/highlighted background). This doesn’t happen if you press the item as long as it takes for the orange/highlight background to appear. Any ideas on this?

Thanks for the demos! But I found a small bug when using QuickAction class. After the QuickAction view dismisses, call QuickAction.show() again, it will re-add previous ActionItems in actionList again. After adding a flag to decide whether they have been added fix the bug.

In your example code you set Anonymous Listeners for each ActionItem. If I change this so my class implements OnClickListener then I implement one onClick(View v) method and have it deal with all onClicks (second description here: http://tseng-blog.nge-web.net/blog/2009/02/14/implementing-listeners-in-your-android-java-application/), I have no way of determining which ActionItem caused it to execute since only the View (in this case a LinearLayout) is passed, not the ActionItem. How can I determine which ActionItem was clicked?

Hi, you have done a great job.
I have got a suggestion for Gallery3D-like QuickActions.
In class QuickAction and method show(), use anchor.getLocationInWindow(location) instead of anchor.getLocationOnScreen(location). It fixes yPos bug when Activity has Dialog theme. I hope it help someone…

Hi! I’m kinda new to Android but I’m using your codes to my very simple app. Thank you very much for that!
I’ve very very few times to go through your codes. so can you please help me in reducing the height of the Quick Action Dialog?

In action_item.xml change the icon ImageView layout_height to match_parent otherwise some of the quick actions don’t get enough height if their icon is small and/or you add top/bottom padding to the title.
Also if you don’t use an icon at all the quick action doesn’t display because it’s using the layout_height of the icon (not sure why it doesn’t go by the title height) so doing to above solves that too but better still add onto the icon null check the following so that it isn’t used in calculating the layout at all if it’s not used:
else {
img.setVisibility(View.GONE);
}

Hi Lorenz,
Great job!
I have used the BetterPopupwindow in my app.
But I get some force close, the log is from the user, I never reproduce it:

java.lang.NullPointerException
at android.widget.PopupWindow$PopupViewContainer.dispatchKeyEvent(PopupWindow.java:1359)
at android.view.ViewRoot.deliverKeyEventToViewHierarchy(ViewRoot.java:2496)
at android.view.ViewRoot.deliverKeyEvent(ViewRoot.java:2456)
at android.view.ViewRoot.handleMessage(ViewRoot.java:1766)
at android.os.Handler.dispatchMessage(Handler.java:99)
at android.os.Looper.loop(Looper.java:123)
at android.app.ActivityThread.main(ActivityThread.java:4627)
at java.lang.reflect.Method.invokeNative(Native Method)
at java.lang.reflect.Method.invoke(Method.java:521)
at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:858)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:616)
at dalvik.system.NativeStart.main(Native Method)

I also ran into the problem where tapping a button to dismiss the bubble leaves behind a black rectangle. A lame (but functional) workaround is to call dismiss() after a short delay instead of calling it directly, like so:

Dear Lorenz
Excuse me, our team just began to work on GIS app. in Taiwan. We met some difficulties in creating QuickAction dialog. Could we use your code in our cadastral GIS product? We want to show this action in the main menu. Please let me know if you have any concerns,thank you.
Yours Sincerely

not sure if anyone else encountered this problem but in the QuickAction class, showArrow method, i found that it would not show the arrow b/c of this line.
param.leftMargin = requestedX – arrowWidth / 2;

I see that you have the updated code on NewQuickAction git hub. Are you able to tell me if that code is newest than the Gallery3D code example!? I use the gallery one, but i’m afraid to not be updated!

How to create nested Quick Actions????
For example as given above:- When Button1 is pressed, Chart & Products is visible. When Chart is click, then also it should display a new Quick actions with different items…

Thanks a lot for your implementation. The result is outstanding.
I just have a little graphical issue. When I launch a different activity by tapping an ActionItem the background disappears for a short period of time and then the new activity launches. Although when I tap the item an hold it, the background becomes orange as suspected.

Hi, what i mean is …. in your code when we will press Button1, it will show quick action having three items (Add,Accept,Upload). Now i want to pop up a new quick action having two or three items on pressing any option(Add,Accept or Upload).

Hi, i think that’s not a good pattern, showing new qa dialog on top/below other qa. The best way to implement your goal is by using extended layout just like in contact app. If a contact has more than one phone numbers, clicking on phone item on quickaction will expand new list view below the action item. you have to implement it manually 😉

Thanks a bunch for the code – I’m really looking forward to building an app with this included! 😀

One thing, though – when I try to implement your files into my app, they cause it to crash. PopupWindows line 35 (mWindow = new PopupWindow(context) ) causes an IllegalStateException – “System services not available to Activities before onCreate()”

I’ve called setContentView() in another class, and I’m pretty sure I’ve copied the files over correctly, so if you have any helpful tips, that would be amazing. 😀

awesome work, again and thanks for publishing it on github. I am using your previous version of the code so. The new version which uses only one listener for all items doesn’t work for me. The problem with your solution is, you rely on the position of the clicked item. My quickaction list contains different amounts of actions depending on the state of the clicked item.

So even though your solution is shorter/simpler it isn’t as flexible as your first solution.

Just my two cents. Again, thanks for sharing this with the dev community.

Hi Lorenz,
Thanks so much for sharing this.
I’ve just included your code in one app I am working with and all seemed to work fine.
However, when I was playing around at one moment I doubled clicked too fast on the button that shows the quickaction dialog, not intentionally, but I did and the application force closed.
It was weird and I did not know if it was something in my code.
Then I opened your example and start noticing the same problem, but only on Example1 (on the list this is not happening). If I click repeatedly and too fast on the buttons (I know that this is not how you are going to use your app but it happened unintentionally the first time) the app crashes with the following error

hello,
first of all it’s an awsome work!
i’m trying to integrate the quickActionBar, Gallery 3D like to my Action Bar(a reusable layout)
i’m getting a bug , the triangle it’s no longer attached to the square. i think it’s a problem of context , i have no idea how to fix it help!

Great example! I’m currently trying to implement this into my application, but unfortunately I use a custom view (onDraw and a canvas). Ideally, I’d like for the user to be able to touch any part of the screen and depending on where they touch, the quickaction menu pops up and has custom content (depending on the location of the touch). So currently I’m using an onTouchEvent, then locating the touch, then performing an action based on that location. How could I implement your code so when I touch the screen, the quickAction menu pops up and populates itself based on location?

Has anyone figured out how to use this with Fragments? I have a Left Fragment and a Right Fragment, both ListFragments. I want the QuickAction dialog to pop up when I click on a ListItem on the right. It pops up in the right spot vertically, but it’s within the Left Fragment, not the Right. Any ideas?

One question: Is there a way to modify the code so that this popup is able to show only something like an information, so that there is only text, without clickListner and so on?
I’m not a really pro in coding and hope you can help me 🙂

I have added a tag object (like in View)to ActionItem. This allows “embedding” stuff into the ActionItem.
It proved necessary in my case and might be useful to other users (the code is VERY simple, just added the instance variable and getter/setter).

Hi i’m trying to use this on my app but when i click on a quick action item too “quickly” the image doesn’t behave like it should, it disappear and shows the background color, if i click it “slowly” it works properly,
is there a way to fix it?
do you experience the same thing?

It works well on 2.1 platform without setting background, but on 2.3.3 problem with
transparency exists (emulator uses). If you set background in QuickAction class then the whole widget will be bigger and less attractively 🙂

Nice work and article :). I’m using quickaction in my project, it works very well in smartphone app, but i have a problem when i try to show it in a Dialog, the quickaction appears in other place outside the dialog, what can i do in this case? 🙁

I see that the default camera app in Android 3.1 have quite nice kind of quick action menus, but the focus is not consumed, so you ca switch to (open) the next menu directly while closing the current one. So it is possible for sure 🙂

This works perfectly for a project I’ve been working on. I have a couple of questions though. First, I notice that the 3D version doesn’t scroll horizontally if there are more items than can be displayed. Also, is there a way to make the quick actions pop up to the side of the anchor instead of above/below? A fix to either the horizontal one not scrolling or popping a vertical list to the side of an anchor would help a lot. Let me know if I’m missing something. Thanks again!

Thanks for this work. It helped me in my free app that I published on app store. Drop me an email if you would like a link or search using my email ID before gmail.com. Really appreciate your hard work.

Can you support all display sizes, please.
I have in each ActionItom white lines in the background, so i think the grey background image or color is not for my display size of 320 x 240 Pixels configured. Thanks

Bug report:
I’ve tried the list example, when you click over an item it always come through false on the if clause, so don’t have really a action tha can be handled there…, the Strange things is over the buttons it works fine, with almost the same code…
Despite of it, it’s a great work!! congratulations

I just have a problem..
When I press the button, the QuickAction is shown normally but when the QuickAction is still shown then I switch the emulator from portrait to landscape mode, the QuickAction position is somehow not positioned in the button that I pressed before..

This is really great work and very easily customizable and documented. I did notice one issue though that you have not notice it on a BLACK background but it is very obvious on lighter colors backgrounds. When you click on an Action Item before the Presse State takes place, the item DISAPPEARS monetarily. Do you know why is this happening ? your answer will be greatly appreciated. Thanks

I’m trying to display this inside a web view. When I show the quick action menu it doesn’t really wrap the content. The buttons are all there, but the background is just that 9 patch image, complete with the guides still showing. Has anyone run across something similar?

Thx for your code. It’s quite helpful for me but i have a problem. But I have problems with Popup,when I use android 4.0.3 to run the project.(the display size is 5.4 in FWVGA),The Popup’s size is much bigger I expected,and when the button is in a FrameLayout,(the FrameLayout in the scren’s bottom) the arrow of the Popup is still the down ones.Do you know why?

hey, lorenz:
Thanks, It is great!
But I found a problem, the source has not set minSdkVersion, so when I set one as my app, the quickaction_slider_btn_normal.9.png will not scale well:-(
It is ok when minSdkVersion deleted.

I imported the class folder NewQuickAction3D/bin/classes but am running into a NoClassDefFoundError. Clearly I am doing something wrong.
What is the correct way to import QuickAction3D into a project? Should a user export a .jar file and then import it? if so what is exported into the .jar file? Or should one import a Classes folder? for us/me a little new at Eclipse/ Java it would be great to have this tip. Thank you.

OK, I got a little bit farther, I added a class folder of NewQuickAction3D/bin/classes and from QuickAction3D exported a .jar and imported it into my project, but now running into a runtime error when setting the mRootView.

Everything was working ok, but i tried to use it in a dialog and it didn’t work. I want a simple and short tutorial for this . Can you give me a code with just a button in layout and in code if I press the button a quick action dialog will appear ??

Hi, first, thank you very much for your code. It helped me with my job. But I have a question about the second code.

I need do my own quickaction with my own res, but with your code I don’t get remove the black background. Where is declarated the background? I thought in the popup_vertical.xml file but the black background continue. How can I change the style of my quickaction.

Hi there! Finally I succeed and make the QuickAction work for my app. Now I am thinking if I can manage to make the slider or the icons to be in the center of the QucikAction Slider. Is there any way solving this? 😀

For those that did make this work for your App how did you do it? Did you export a .jar file? if so what did you include in the .jar? did you import a class folder? if so which folder(s) ? I ran into NoClassDefFoundError at first (see above) and other problems later once I got the .jar in, but… how do I know if I am importing this code “the correct way” ? what is the correct way?

Very Usefull Blog … it worked me perfect but i am trying to get different images on different options. I used this code but it taking only one images as selected but i need to differ. i did like this if (actionId == ID_DATE_TO_REMEMBER) {
dateToRemember.setIcon(getResources().getDrawable(R.drawable.datestoremember_active));
Toast.makeText(getApplicationContext(), “Let’s do some search action”, Toast.LENGTH_SHORT).show();
}

but it is not working… can you suggest me how to solve ???? Thanks in Advance