How to Create QuickAction Dialog in Android
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 list
final ActionItem chart = new ActionItem();
chart.setTitle("Chart");
chart.setIcon(getResources().getDrawable(R.drawable.chart));
chart.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(TestQuickAction.this, "Chart selected" , Toast.LENGTH_SHORT).show();
}
});
final ActionItem production = new ActionItem();
production.setTitle("Products");
production.setIcon(getResources().getDrawable(R.drawable.production));
production.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(TestQuickAction.this, "Products selected", Toast.LENGTH_SHORT).show();
}
});
Line 01: Create new action
Line 03: Set action title
Line 03: Set action icon
Line 04: Set on click listener
Show QuickAction dialog
Button btn1 = (Button) this.findViewById(R.id.btn1);
btn1.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
QuickAction qa = new QuickAction(v);
qa.addActionItem(chart);
qa.addActionItem(production);
qa.setAnimStyle(QuickAction.ANIM_AUTO);
qa.show();
}
});
Line 05: Create new QuickAction dialog
Line 07-08: Add action item
Line 09: Set animation style
Line 011: Show QuickAction
Gallery3D-like QuickActions
Implementation on My Application
BlitzDroid
Minapolitan (Prototype)
Related post:
24 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.