All Android developers encounter difficulties when it comes to create great and user-friendly UIs. When developing on Android you need to make sure your applications are in accordance with Google UI and design guidelines. A usual way of developing UIs is to first look at what is already existing on other applications. For instance, you can study applications that are bundled with your phone. Most of those apps are designed by Google and can be considered as ‘standards’. Once you have picked several UI patterns and have a clear idea of your final application, you are almost ready to develop it … why ‘almost’? … Because something may block you in your development process: the fact that you are a developer and not a designer capable of creating good-looking and fancy UIs. Fortunately, GreenDroid can give you a hand with QuickActions!

Note: The GreenDroid library as well as an example project called GDCatalog can be found/downloaded on GitHub at the following address. A large set of articles is also available on this blog. Feel free to read some of them to be introduced to some of the GreenDroid features:

http://github.com/cyrilmottier/GreenDroid

At the Google I/O 2010, designers and ergonomists of the Android team suggested many UI patterns:

• Dashboard: This pattern may be used as the entry point and turntable of your application. It shows a set of icons that reveals application capabilities.

• ActionBar: Already included in GreenDroid, this widget replaced the regular title bar and may contain important actions

• QuickAction: May be use to present secondary and straightforward actions that are related to a particular View.

As of now, those patterns are not integrated to the current SDK (Gingerbread). Hence, each developer need to create it on his own. Fortunately, GreenDroid is here to help you!

The QuickAction related classes

GreenDroid’s QuickActions are based on the following classes:

• QuickAction: Represents an item in a QuickActionWidget. A QuickAction represents a single action and is composed of a text and an icon.

• QuickActionWidget: Abstraction of a QuickActions wrapper. This is the base class for a UI element that displays on top of the others.

• QuickActionBar: Displays QuickActions on a single scrollable row.

• QuickActionGrid: A widget displaying QuickActions in a grid manner

Implementing a QuickActionWidget

Now you are familiar with all of those classes, you are ready to dive into the code! The snippet of code below can be used to display a QuickActionBar containing three important actions:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

package com.cyrilmottier.android.gdcatalog;

import greendroid.app.GDActivity;
import greendroid.widget.QuickAction;
import greendroid.widget.QuickActionBar;
import greendroid.widget.QuickActionWidget;
import android.os.Bundle;
import android.view.View;

public class QuickActionActivity extends GDActivity {

    private QuickActionWidget mBar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setActionBarContentView(R.layout.quick_action);

        mBar = new QuickActionBar(this);
        mBar.addQuickAction(new QuickAction(this, R.drawable.gd_action_bar_compose_alt, R.string.gd_compose));
        mBar.addQuickAction(new QuickAction(this, R.drawable.gd_action_bar_export_alt, R.string.gd_export));
        mBar.addQuickAction(new QuickAction(this, R.drawable.gd_action_bar_share_alt, R.string.gd_share));
    }

    public void onShowBar(View v) {
        mBar.show(v);
    }

}

The onShowBar(View v) is called everytime you press the ‘QuickActionBar’ button via the android:onClick="onShowBar" field in the XML definition of the layout. Using the code above, A button click will give something similar to the screenshot below:

A QuickActionGrid is as simple to use as a QuickActionBar. Indeed, the main difference between those two widgets relies in the way they both layout information. As a result, no line of code is given here to introduce you to the QuickActionGrid. However, feel free to look at the code of the QuickActionActivity in the GDCatalog project to get a quick overview of this widget:

Listening to user actions

Developers may listen to user actions on a QuickActionWidget using a OnQuickActionClickListener. The snippet of code below shows a simple example of how to display a Toast everytime a QuickAction is pressed by the user. The notification shows the index of the clicked QuickAction

1
2
3
4
5

private OnQuickActionClickListener mActionListener = new OnQuickActionClickListener() {
    public void onQuickActionClicked(QuickActionWidget widget, int position) {
        Toast.makeText(QuickActionActivity.this, "Item " + position + " clicked", Toast.LENGTH_SHORT).show();
    }
};

You, now, have everything you need to create stunning UIs in your applications. Being new to GreenDroid, QuickActions may contain some minor bugs. If you are encountering problems, to not hesitate to contact me or to create a new bug report on the GreenDroid GitHub page. Most courageous developers can also participate to the GreenDroid library project by sending a pull request that patches some bugs.

Final note : This feature has been developed based on the code of Benjamin Fellous. I’d like to thank him for asking me to merge this feature to the GreenDroid library.