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).

QuickContact QuickContact

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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:

1
2
3
4
5
6
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

 

Leave a comment