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:
218 Responses to “How to Create QuickAction Dialog in Android”
Leave a Reply
-
Subscribe in a reader
Atom Feed URL
this is a god send!
This is huge man. I’ve been searching for Tweeter app source code all time since it was published just to find out how this QuickActions bar works.
Thank you very much.
Thank you, I was searching for this a long time ago.
Thank you.
I modified a bit your code (i did it first with Qberticus.
Replacing in CustomPopupWindow
this :
if (rootHeight > anchorHeight) {
by :
if (rootHeight > anchor.getTop() {
Cause in Listview, i managed to have Quickactionbar over my title bar, not so nice. With getTop, no problem anymore.
Okay thanx Akex for the correction
[...] http://www.londatiga.net/it/how-to-create-quickaction-dialog-in-android/ [...]
Shared your page with some other french devs. Lot of thanks for you
and Qberticus
Okay & you’re welcome
Thanks for the code. I’m guessing the code is released under the same licence as the original code (new BSD licence)?
Thanks again. I’ll make sure to mention it at the MANGTUG meeting next week
You’re welcome & yes
Perfect. Thank you
Hi Lorenz,
If i wanna like t olearn adnroid prgramming development and contribute, how it can be started. I have done and replciated exact tools steps which you have mentioned in your blog.
Now what are the resources where i can learn to program and develop android application.
Appreciate your time and support on your blog.
Thanks,
Hi 5xnewx,
Glad to hear you are interested in Android Programming. You can find android resources on android developers site http://developer.android.com/guide/index.html. Sample tutorials can be found here http://developer.android.com/resources/samples/get.html
Thanks a lot … !!!
I was stuck in my project without this ….
u r an angel
Thanks, can’t wait to try it out later. Did you look into the Action bar that’s also mentioned in the google I/O talk and in the Twitter app.
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 …
Thanx in advance..
Hi Ash,
You can read the source code of Contacts app from android source tree, there is a method inside QuickContactWindow.java that implements it. Sorry i can’t give you the exact solution.
OMG YOU are awesome. I cant believe that 3 months later they still havent published the source code for this even though they say its “best practices”. Good on you man!
Thanx Clay, i couldn’t wait for their source code so it pushed me to read the Contact app source code
.
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?
Hi Christoffer,
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).
Hi. Your stuff is awesome!
But is it possible to dim the screen behind the PopupWindow, just like with the context menu?
Houses are expensive and not everybody is able to buy it. Nevertheless, personal loans are created to help different people in such hard situations.
Hi can I use the code in my application? Is there any thing else that I need to do regarding the license like referring you or something else to use this code?
Thank you for the code. Have been looking for this since a few days.
Yes you can, feel free to use it
Hi, I’d like to make for than 2 items in the QuickAction. How can I do this?
Thanks!
Create new ActionItem object then add it to QuickAction as described on example code above.
I have ever do that but it always only shows two of them…weird!
Sorry I was tired, I fix it…stupid error.
Thanks for this awesome stuff!
You’re welcome..:-)
Nice post, I will create this api. too in my mobile.
[...] LinkedIn [...]
Nice post,
I hava a question, how to dismiss the quickaction when the activity don’t to change.
Hi Herbert, i’ll update this post & upload the new code including the dismis listener & implementation on listview..maybe 1-2 days ahead…
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.
Helo Rui, yes currently my apps using this quickaction are for 2.1 and above. I don’t know similiar component on old cupcake & donut
I have modified your layout to present the label for the icon below the icon itself, much like the Twitter application. In order to do this, make the following changes to res/layout/action_item.xml:
LinearLayout:
android:orientation = “vertical”
android:paddingTop = “0dip”
android:paddingBottom = “0dip”
ImageView:
android:layout_height = “fill_parent”
android:paddingLeft = “5dip”
android:paddingRight = “5dip”
TextView:
android:layout_width = “wrap_content”
android:textSize = “10sp”
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 hope that helps someone! Thank you so much for the code!
Tnx, very nice, tnx for this
@Michael, that is also a nice adjustment
That is sexy, thanks
hopefully I can fiddle with it some more
Just noticed it’s 2.1 and above
I could code it to check the version and then fall back to an AlertDialog but whats the point in supporting two varieties
Have you tested it? Because I ran it in an 1.6 emulator and that worked..
This post is a winner! Love the tips and everything you suggest.. Thanks
Your tips are really great except the one suggesting to steal our competition articles haha . Nice tipps, thanks!
Thank you for taking the time to publish this information very useful!
Thank you!
Awesome work buddy. This has helped me a lot.
[...] Androidに関する、はてなブックマーク新着情報です。 How to Create QuickAction Dialog in Android | All About Web & Mobile Application Development [...]
You Sir, are my official hero of he week! This is simply great
I hope Google sees this and pulls it into the official Android API ASAP.
And thanks to Michael Herold as well, for his alternative layout making the text appear below the icons.
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!
Thanks really very helpfull
Great tutorial.
I am fairly new to Android and Java. I implemented this in my app, but I do not know how to make the Pop-up dismiss automatically when an option is selected.
Please help!!
I also like to know this.
To Mike and Calium,
I’ve updated this post and added new example that shows how to dismiss popup.
Checkout section “QuickActions With Dismiss on Action Selected”
Thank you so much, Lorenz!!
You are my star!
VERY good job man. It’s a shame that android doesn’t provide that by default.
Great job! Thanks for your work
I will try to testing in my UI enviroment
Trims dude
You’re welcome bro
hi. this is just what I’m looking for. thx.
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.
thx
Thanks man!
[...] have been a few implementations of this by Android developers. The best I’ve found so far is available here and is developed by lorenz. I’ve talked about this in a previous post so I wont add too much [...]
Lorenz,
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?
[...] добавление QuickActions в [...]
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?
[...] stumbled on some work that Lorenz did around QuickActions and the code was free to use, easy to understand and easy to modify which [...]
[...] [...]
thanks, amazing bunch of code. really gives a nice look to the application!
I found a bug…
if (rootHeight > anchor.getTop()) {
…
should be
if (rootHeight > anchor.top) {
…
because anchor.getTop() will give the relative and not the absolute top.
Hi man! thanks so much for this, i made a slight change is the CustomPopupWindow class to make dissmissing a quickaction look much better, with this code it wont become see-through when pressed.
thanks once again!
public void dismiss() {
Handler mHandler = new Handler(); mHandler.postDelayed(mUpdateTimeTask,10);
}
Runnable mUpdateTimeTask = new Runnable(
{
public void run() {
window.dismiss();
}
};
Fantastic work! Exactly what I was looking for.