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:
274 Responses to “How to Create QuickAction Dialog in Android”
Leave a Reply
-
Subscribe in a reader
Atom Feed URL
Lorenz, you are my hero!
Just to be absolutely sure: I can use parts of your sample code and the drawables in my own app? Of course I give big thanks to you in the About Dialog of my app, but you’re okay with that, right?
Hello Manuel,
Thank you, feel free to use it;)
Regards
So cool!
I will post a screenshot of how I use QuickAction in my app.
Hi Manuel, thanx.
Btw, i’m working on new updates for this quickaction. Fixing some bugs and the code is more efficient now. I’ll make an update to this post within next few days.
Regards
Great to hear.
At the moment I’m using the Gallery3D-like QuickAction. Will they be updated as well?
Great find for me. I’ve tried it and it works fine, although I’ll wait for your updates before implementing it into my own app.
Great work.
You are the man!!! Really great stuff.
Thanks a lot for sharing. Keep up the good work.
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?
Best wishes and king regards.
Bruiser
i want program on mapviews .in that mapview contains many overlayitems .if u tap on the icon it displays one windownc
This is really great, thanks for sharing!!
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?
Thanks again
Great tutorial Lorenz!
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 this great tutorial/code!
I have the same “issue”. Didn’t find a way to prevent this, yet, but I am interested in a solution, too.
Hi, the animation on popup dismiss causes that, you can disable exit animation to solve the problem.
Hi Lorenz,
thanks for your comment. I deleted the overridden dismiss()-Method in the CustomPopupWindow class which solves the problem. Is that want you meant with disable the exit animation?
Thanks again for this great tutorial!
Andy
Argh, well it doesn’t solve the problem. It just leads to not closing the bar…
Can you give me some more detailed information what I need to do? This would be much appreciated.
Thanks in advance
Andy
[...] we have to implement our own. However, I found this great article on how this could be Impleted. http://www.londatiga.net/it/how-to-create-quickaction-dialog-in-android/ LikeBe the first to like this [...]
Hello, could you please specify under witch licence is id distributed?
Thank you
New BSD License
New BSD License
>> How could be ? There is no sign of BSD License Information inside the code itself.
Can you explain a little ?
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.
It would be nice if there will be an ability to use custom layouts for quick actions. For example, I want to use only icons placed on 3×4 table layout.
[...] one with that problem. I found some pretty good implementations for ActionBar and QuickActions, but I was looking for a more “integrated” solution, so I continued my research. Hours [...]
I have created the quick action bar successfully. Now I want to open a context menu on clicking the buttons on quick action bar. How can I do this?
Done a Superb job buddy!!!
Please help me for creating a multi-row quick action bar
Great job man! Works perfectly…
Surely cut my development time
I think that:
if move”createActionList()” before “root.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));” . It well be better.
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?
Thanks
Nice one mate, exactly what im looking for
Nice one, exactly what I’m looking for.
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, thanx for sharing
Grate. Thanks. I was looking for this. I’ll do some customization to use it in my app.
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?
Thanx man…really helpful…now i will be able to save a lot of screen space with such good looking interface…
Great job on this lorenz!
Just a quick pointer for the Gallery3D quick actions:
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);
}
Keep up the good work!
Ok thanx for your correction ..
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)
Any idea?
Thank you.
hmm, sorry i have no idea ..
Hello Lorenz,
A big thanks for you. and can i use your sample code and the drawables in my app? my app is here : https://market.android.com/details?id=com.morgoo.launcher
Hi, yes you can use the codes and all the resources here..
Thanks for sharing this, very helpful!
I wanted some more info that I could use from ActionItem so I customized the callback. Here’s the addition.
/// some info so callback will have the action item to pass
private static class ListenInfo {
public ActionItem ai;
public View v;
public ListenInfo (View v, ActionItem ai) {
this.ai = ai;
this.v = v;
}
}
/// New Callback function
public static class OnClickListener {
public void onClick(View v, ActionItem ai) {
}
};
/// Internal view callback handler
private View.OnClickListener quickListener = new View.OnClickListener() {
public void onClick(View v) {
// retrieve action info from tag
ListenInfo li = (ListenInfo) v.getTag();
// call the callback
li.ai.listener.onClick(li.v, li.ai);
}
};
Then when adding an action add:
view.setTag(new ListenInfo(view,actionList.get(i)));
Cheers
Nice work Lorenz!!!
Big thx to share it. Very helpful. Can I use it for my own application?
Yes you can
Nice work Lorenz
I’m using your code in my academic android project, hopes you don’t mind
Unbelievably helpful piece of code, and it works like it should. Easy and smooth – thumbs up from me!
Ok Jakub, feel free to use it. Hope it helps you.
Bro,
you owe a hug from me. Very nice code and works like a charm . Thanks for sharing the code .
Tareq
You’re welcome
Thanks for this.
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:
public void onClick(View v) {
// Instead of calling dismiss() directly, do:
new Handler().postDelayed(new Runnable() {
@Override
public void run() {
// Give the button time to draw its “pressed” state.
// Without this delay, the pressed button is transparent
// while the exit animation runs.
dw.dismiss();
}
}, 10);
}
This is fucking awesome man. I got here originally from StackOverflow. Very informative. I’ll be watching you.
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
Satura
Awesome man, this is damn cool. Copying it in one of my project. Thanks.
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;
if u add parentheses shown below it will work
param.leftMargin = (requestedX – arrowWidth) / 2;
Thankfully i listen to a maths class when i was younger, go BODMAS
Hi Lorenz,
Great code!
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!
thanks!
rafa
Hi Rafael, yes the code is newest than Gallery3D example.
Hi! Congratulations, great job! I will start following your blog
What is the git hub url? Are these examples in a repository? I would be really usefull to be up to date with these really nice components
Thanks
Hi, thank you. This is the github url: https://github.com/lorensiuswlt/NewQuickAction
Hi, thanks for the source! I made a little modification to the quickaction: http://bit.ly/pxJr83
How to create nested quick actions???
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…
hey lorenz.. first of all thanks a lot for providing this beautiful piece of code to everyone.
secondly i want to use quickaction on click on list view item or infact a button in list view. how do i find out which row of the listview fired the quickaction?
thirdly i wanna knw wats d difference in the quick action and new quick action code?
Hello Lorens, Thanks for your code
We are happy with the code Lorenz, many thanks
woah.. such a masterpiece .. thanks a lot. This will help me a lot.
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.
Hello,
Yes there is a bug in my implementation. The actionitem background becomes dark when the dialog dismissed. I’m working on fixing this issue. Watch my github repository for latest update.
Hi,
Very good job.
Is there a way to have icons on 2-3 lines ?
I m searching since 2 days without success.
VERY nice, Lorenz. Thank you SO MUCH, it’s exactly what I needed. I’m still fairly new at this, so not only was it something I can use, but it’s also a nice learning experience. Well done.
You’re welcome Tim..;)
Hello Loennz,
Thanks for your tutorial, How can make it Circular..give me some guidance .
thanks
My eclipse shows no ActionItem Class.. ???
what it’s showing…did u see files are available in your project folder or not
Hello Lorens, Thanks for your code. But how to insert new quick action dialog in quick action dialog??
Hi, what did you mean by insert new quick action dialog in quick action dialog?
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