How to Create QuickAction Dialog in Android
[Update 15/07/2011]
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 the QuickContact 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 QuickActions in 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.
Here are the screenshoots of QuickActions demo:
QuickContact / Twitter-like QuickActions
Code snippet
Create action items
//Add action item
ActionItem addAction = new ActionItem();
addAction.setTitle("Add");
addAction.setIcon(getResources().getDrawable(R.drawable.ic_add));
//Accept action item
ActionItem accAction = new ActionItem();
accAction.setTitle("Accept");
accAction.setIcon(getResources().getDrawable(R.drawable.ic_accept));
//Upload action item
ActionItem upAction = new ActionItem();
upAction.setTitle("Upload");
upAction.setIcon(getResources().getDrawable(R.drawable.ic_up));
Line 02: Create new action item
Line 04: Set action title
Line 05: Set action icon
Create quickaction instance and setup listener
final QuickAction mQuickAction = new QuickAction(this);
mQuickAction.addActionItem(addAction);
mQuickAction.addActionItem(accAction);
mQuickAction.addActionItem(upAction);
//setup the action item click listener
mQuickAction.setOnActionItemClickListener(new QuickAction.OnActionItemClickListener() {
@Override
public void onItemClick(int pos) {
if (pos == 0) { //Add item selected
Toast.makeText(Example1Activity.this, "Add item selected", Toast.LENGTH_SHORT).show();
} else if (pos == 1) { //Accept item selected
Toast.makeText(Example1Activity.this, "Accept item selected", Toast.LENGTH_SHORT).show();
} else if (pos == 2) { //Upload item selected
Toast.makeText(Example1Activity.this, "Upload items selected", Toast.LENGTH_SHORT).show();
}
}
});
Line 1: Create quickaction instance
Line 3-5: Add the action items into quikaction
Line 8: Setup listener for action item clicked, the pos argument on onItemClick method shows which action item is clicked.
Show quickAction dialog
btn1.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
mQuickAction.show(v);
}
});
Line 04: Show quickaction dialog, the v argument used as the anchor where the quickaction displayed.
Gallery3D-like QuickActions
Implementation on My Application
BlitzDroid
Minapolitan (Prototype)
Buy me a coffee
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.
Related post:
277 Responses to “How to Create QuickAction Dialog in Android”
Leave a Reply
-
Subscribe in a reader
Atom Feed URL
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..
Any suggestion how to prevent this??
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?
So it turns out that this looks fine as long as I have icons that are exactly the size of the icons in the example.
Hi Brandon, do you have any tutorial about that? thanks a lot!
Hi! Thanks a million for your great work!
I run into a problem which is maybe interesting for you, maybe you can help me!
I posted it already on stackoverflow
http://stackoverflow.com/questions/10109526/combination-of-service-progressbar-gridview-and-his-notifydatasetchanged-an
this post is so helpful and so nice but is possible to update the 3d part to can add multi row icons i want use it to add emoticons in the view in mtrack u use linear layout i want to put table layout
[...] http://www.londatiga.net/it/how-to-create-quickaction-dialog-in-android/ [...]
On ICS the animation on the slide are very bad, any suggestion?
Hi, this is really great! Does anyone know how to implement this from an onSingleTapConfirmed, where I only have a MotionEvent and no View?
Thanx in advance!
HI,
Thanks lot for such an amazing control, its working perfect in my phone.. Thanks lot for posting the code…
[...] http://www.londatiga.net/it/how-to-create-quickaction-dialog-in-android/ [...]
congratulations for the wonderful job.
You can start the activity with QuickAction already open,
without using the method onClick ()?
I was wondering if it’s possible to add a view (xml) in Quick Action. I have designed a table layout in xml and not sure how to fit that into QuickAction.
Waw! great! thx for your share… Keep post!
Thx for your code. It’s quite helpful for me but i have a problem. Popup’s width is not full screen. How can i solve that?
hi. using your Gallery3D-like QuickActions, what if this will be used in a tablet, how can the menus get bigger?
just use bigger icons?
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?
Hi
the code is working fine only the Horizontal separator is not coming for the quick action any suggestions for the problem ?
Thanks
KD
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.
Regards
Zhimin
Can you add xhdpi image resources?
Do anybody know how to set the dialog height? its too big in my tablet.
tks
Great!!! Thank you so much
Thanks, It works nice.
You need to add this in the AndroidManifest.xml:
This will fix the display issues, like the text being too big in places, and the Toast messages being too small.
Hi
Thanks for nice tutorial.
I need to Add simple Listview in QuickAction Dialog.
Pls suggestion me any suggestion for this
i have create some stuff but not solved
pls check this
http://stackoverflow.com/questions/12129689/how-to-add-listview-in-quickaction-dailog-in-android/12129718#12129718
hello brother. Can you give me sample about how to inject radio button on list menu drop down like?
Hello Bro….
The application you have posted is really awosome flag for u….
Hello,
This library is great, the sample application seems to work but when I added it to my library in my application I get an NullPointerException error when I’m adding the action item on the quick action.
Can anyone tell me what’s happening?
I want to implement a Quick Action Dialog .After searching in web I have found a very nice tutorial in this link :
http://www.londatiga.net/it/how-to-create-quickaction-dialog-in-android/
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, Thank u for giving good example on Quickaction Dialog…
How to break into 2 parts in dialog… just check this link for more info…
http://stackoverflow.com/questions/12351670/quick-dialog-using-onclick-search-view-in-android#comment16587604_12351670
thank u once again Bro…
[...] I want to add my own application icon to QucikAction Dialog in Contacts in Android. I found this http://www.londatiga.net/it/how-to-create-quickaction-dialog-in-android/ [...]
[...] I want to add my own application icon to QucikAction Dialog in Contacts in Android. I found this http://www.londatiga.net/it/how-to-create-quickaction-dialog-in-android/ [...]
[...] I have implemented a QuickAction menu using the code and tutorial found here. [...]
i have implemented your code according to my requirement i need to add dynamic data in popup list but i’m unable to do this please suggest me how to do this thanks for excellent code.
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.
Sorry for my english.
Regards
Hi, thank you for your code.
I have a problem when I try modify ActionItem title.
@Override
public void onItemClick(QuickAction source, int pos, int actionId) {
ActionItem actionItem = quickAction.getActionItem(pos);
if (actionId == 0) {
actionItem.setTitle(”New title”);
}
etc…
I miss something?
Thank you again.
Well finally I rebuild all QuickAction & QuickItems and works good. But I dont understand what does setTitle, setActionId, etc if dont change anythng.
Thank you.
[...] How to Create QuickAction Dialog in Android [...]
[...] http://www.londatiga.net/it/how-to-create-quickaction-dialog-in-android/ [...]
[...] http://www.londatiga.net/it/how-to-create-quickaction-dialog-in-android/ [...]
Hi,can u plz tell me where to post this code… I mean where shud I keep this code in library??
I get an error when I write ActionItem in Java file.
Thanks.
to marav
Thanks very much.
Hi Thank you for this helpful post.
I am new to Android dev and I want to use your implementation on my current Android app project.
I am using Mono for Android, VS2010 plugin. I just want to ask how can I incorporate or reference your implementation on my project
Thank you very much!
[...] http://www.londatiga.net/it/how-to-create-quickaction-dialog-in-android/ [...]
Thanks for the awesome tool. I tried to use it, but it seems to pop up covering my button, rather than popping up from it, like your examples…any ideas?
nevermind, my button was in a different layout, once i moved the buttons out it worked.
Thank you, that’s fine. But I have a question. How to display the menu
mQuickAction.show(v);
to do when the user clicks the physical menu button?
replace view1 with the name of the buttons view you want the QA to popup from.
Perhaps you should learn android a little better, as capturing hardware button presses is a fundamental task in android.
@Override
public boolean onKeyDown(int keycode, KeyEvent e) {
switch (keycode) {
case KeyEvent.KEYCODE_MENU:
View v = (View) findViewById(R.id.view1);
mQuickAction.show(v);
btnSocialMenu.performClick();
return true;
}
return super.onKeyDown(keycode, e);
}
remove the “btnsocialmenu…” code, I have my menu key doing something else in my app besides triggering the QA menu.
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?
Thanx