MrBool
You must be logged in to give feedback. Click here to login
[Close]

You must be logged to download.

Click here to login

[Close]

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

[Close]

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

How to implement quick action pattern in Android

In this article, we will be exploring Quick action pattern in Android and then implementing it for some of the mostly used applications.

[close]

You didn't like the quality of this content?

Would you like to comment what you didn't like?

Quick action pattern is a way of making the applications more interesting and interactive for the users. It is a context menu that doesn't cover up the data that is being acted on. Most of time, this Quick actions dialog is not present in the android by default, so we have to create it.

Before going into the details of creating this, I would like to give a pictorial demonstration of the Quick Action pattern to the users, so that they can have a clear and better understanding of what they are going to do in this article.

Shows the image of how quick actions pattern appears

Figure 1: Shows the image of how quick actions pattern appears

In the above figure, the numbers written by red colour describe the following things:

  • One shows a distinct visual target that is tapped by the user.
  • Two shows a quick actions pop up that is layered over the current screen containing the most important and obvious actions that can be performed.
  • Three shows the option selected by the user.

I hope with the above given example, users can easily get a clear picture of what they are going to do.

Now this pattern is used when the user wants to provide actions for items that have competing internal targets. It has to be triggered from a distinct visual target, so the user knows that there's something he/she can do with it.

Note - 1: Here, one thing that needs to be checked is that the pop over is not blocking the screen like a traditional dialog, but popping above or below the item. Because of this, it is used only for the most important and obvious actions in the quick actions pop over.

Note - 2: The next important thing is that quick actions should not be used when multiple selection is supported. In such a situation a button bar is used.

Twitter is the most common example of an application that is using Quick action pattern. The new android UI feature includes this quick action pattern for official twitter application.

Shows the image of quick action pattern in twitter

Figure 2: Shows the image of quick action pattern in twitter

This same application is also used in Samsung Galaxy S contact list.

Shows the image of quick action pattern in Samsung Galaxy S contact list

Figure 3: Shows the image of quick action pattern in Samsung Galaxy S contact list

Now after understanding what quick action pattern in detail is, we will build a simple demo for quick action. In this main activity will contain an ImageView and a button. When user taps on these components, a popup will appear. It contains 3 options for the user to select from.

Shows the image of main activity

Figure 4: Shows the image of main activity

Shows the image of a pop-up appeared when user taps on ImageView

Figure 5: Shows the image of a pop-up appeared when user taps on ImageView

Shows the image of pop-up appeared when user taps on Button

Figure 6: Shows the image of pop-up appeared when user taps on Button

Now, we will be dealing with the coding that is used for creating this feature. Coding is done for three parts i.e., Quick Action Item, Popup Window and Quick Action.

Firstly, we will discuss the code involved for Quick Action Item. It is an entity which will represent a particular item of out quick action. It will mainly contain an icon and a title. It’s basically an object that holds the information for a particular item from the quick action. Now a new class is created and it is named QuickAction.

Listing 1: Shows the code for creating a new class

public QuickAction(Context context) {
	super(context);
	inflater = (LayoutInflater) context
			.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        // load animation
	mTrackAnim = AnimationUtils.loadAnimation(context, R.anim.rail);
	mTrackAnim.setInterpolator(new Interpolator() {
		public float getInterpolation(float t) {
			final float inner = (t * 1.55f) - 1.1f;
			return 1.2f - inner * inner;
		}
	});
	setRootViewId(R.layout.quickaction);
	animStyle = ANIM_AUTO;
	animateTrack = true;
	mChildPos = 0;
}
// show the popup with animation.
 public void show(View anchor) {
	preShow();
	int[] location = new int[2];
	anchor.getLocationOnScreen(location);
	Rect anchorRect = new Rect(location[0], location[1], location[0]
			+ anchor.getWidth(), location[1] + anchor.getHeight());
	mRootView.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT,
				LayoutParams.WRAP_CONTENT));
	mRootView.measure(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
	int rootWidth = mRootView.getMeasuredWidth();
	int rootHeight = mRootView.getMeasuredHeight();
	int screenWidth = mWindowManager.getDefaultDisplay().getWidth();
	int xPos = (screenWidth - rootWidth) / 2;
	int yPos = anchorRect.top - rootHeight;
	boolean onTop = true;
	if (rootHeight > anchor.getTop()) {
		yPos = anchorRect.bottom;
		onTop = false;
	}
	showArrow(((onTop) ? R.id.arrow_down : R.id.arrow_up),
			anchorRect.centerX());
	setAnimationStyle(screenWidth, anchorRect.centerX(), onTop);
	mWindow.showAtLocation(anchor, Gravity.NO_GRAVITY, xPos, yPos);
	if (animateTrack)
		mTrack.startAnimation(mTrackAnim);
	}  

After this, we will deal with Popup window. It is a base class which is made for quick action implementation and for other types of quick actions that the user would want to implement. This class creates a floating window on the screen at certain coordinates. Its main component is the PopupWindow class from the Android framework. A new class is created and it is named PopupWindows.

Listing 2: Shows the code for creating a new class i.e., PopupWindows

public PopupWindows(Context context) {
	mContext = context;
	mWindow = new PopupWindow(context);
        // A popup window that can be used to display an arbitrary view.
	mWindow.setTouchInterceptor(new OnTouchListener() {
		public boolean onTouch(View v, MotionEvent event) {
			if (event.getAction() == MotionEvent.ACTION_OUTSIDE) {
				mWindow.dismiss();
				return true;
			}
			return false;
		}
	});
	mWindowManager = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
}  
protected void preShow() {if (mRootView == null)
	throw new IllegalStateException("setContentView was not called with a view to display.");
        onShow();
	if (mBackground == null)
		mWindow.setBackgroundDrawable(new BitmapDrawable());
	else
		mWindow.setBackgroundDrawable(mBackground);
        // set some needed attributes.
	mWindow.setWidth(WindowManager.LayoutParams.WRAP_CONTENT);
	mWindow.setHeight(WindowManager.LayoutParams.WRAP_CONTENT);
	mWindow.setTouchable(true);
	mWindow.setFocusable(true);
	mWindow.setOutsideTouchable(true);
	mWindow.setContentView(mRootView);
}

Last but not the least, Quick Action is left. It is a layout for quick action and that too for a particular element from it i.e., the quick action item. In this, create a new xml in res/layout/ folder and name it quickaction.xml. This layout will be for quick actions that will have their elements arranged horizontally.

Listing 3: Shows the code to define how the pop up will appear in the layout

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">
        
     <FrameLayout
        android:layout_marginTop="10dip"
        android:id="@+id/header2"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/quickaction_top_frame"/>
       <ImageView
           android:id="@+id/arrow_up"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:contentDescription="@string/contentdesc4pic1"
           android:src="@drawable/quickaction_arrow_up" />
       
    <HorizontalScrollView
        android:id="@+id/scroll"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:fadingEdgeLength="0dip"
        android:layout_below="@id/header2"
        android:paddingLeft="1dip"
        android:background="@drawable/quickaction_slider_background"
        android:scrollbars="none">
        <LinearLayout
            android:id="@+id/tracks"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingTop="4dip"
            android:paddingBottom="4dip" 
            android:orientation="horizontal">
        
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:contentDescription="@string/contentdesc4pic1"
                android:src="@drawable/quickaction_slider_grip_left" />
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:contentDescription="@string/contentdesc4pic1"
                android:src="@drawable/quickaction_slider_grip_right" />
                
        </LinearLayout>
            
    </HorizontalScrollView>
    <FrameLayout
        android:id="@+id/footer"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/scroll"
        android:background="@drawable/quickaction_bottom_frame" />
    <ImageView
        android:id="@+id/arrow_down"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="-1dip"
        android:layout_below="@id/footer"
        android:contentDescription="@string/contentdesc4pic1"
        android:src="@drawable/quickaction_arrow_down" />
</RelativeLayout>

Finally, there is a need to add a code in MainActivity. It is the activity in which the user will be implementing the Quick Action.

Listing 4: Shows the code that needs to be added

package vn.com.enclaveit.phatbeo.quickaction;
import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.ImageView;
import android.widget.Button;
import android.widget.Toast;
/**
 * 
 * @author Phat (Phillip) H. VU
 *
 */
public class MainActivity extends Activity {
	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);
                // Implement Quick Action here.
                // A pop up will have 3  actions for user select:
                // Phone, Gmail and GTalk.
		// Action item  - Phone
		ActionItem addAction = new ActionItem();
		addAction.setTitle("Phone");
		addAction.setIcon(getResources().getDrawable(R.drawable.phone));

		// Action item - Gmail
		ActionItem accAction = new ActionItem();
		accAction.setTitle("Gmail");
		accAction.setIcon(getResources().getDrawable(R.drawable.gmail));

		// Action item - Talk
		ActionItem upAction = new ActionItem();
		upAction.setTitle("Talk");
		upAction.setIcon(getResources().getDrawable(R.drawable.talk));
		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() {
			public void onItemClick(int pos) {
				if (pos == 0) { // Phone item selected
					Toast.makeText(MainActivity.this,
					"PHONE item selected",Toast.LENGTH_SHORT).show();
                                        // Place code handling for Phone action here
				} else if (pos == 1) { // Gmail item selected
					Toast.makeText(MainActivity.this,
					"GMAIL item selected",Toast.LENGTH_SHORT).show();
                                        // Place code handling for Gmail action here
				} else if (pos == 2) { // Talk item selected
					Toast.makeText(MainActivity.this, "TALK selected",Toast.LENGTH_SHORT).show();
                                        // Place code handling for Talk action here
				}
			}
		});
                // now, add onClick trigger on ivPic1.
                // when users tap on this, a popup that contains 3 actions will appear.
		ImageView ivPic1 = (ImageView) this.findViewById(R.id.ivPic1);
		ivPic1.setOnClickListener(new OnClickListener() {
			public void onClick(View v) {
				mQuickAction.show(v);
				mQuickAction.setAnimStyle(QuickAction.ANIM_GROW_FROM_CENTER);
			}
		});
		Button btClickMe = (Button) this.findViewById(R.id.button1);
		btClickMe.setOnClickListener(new OnClickListener() {
			public void onClick(View v) {
				mQuickAction.show(v);
				mQuickAction.setAnimStyle(QuickAction.ANIM_GROW_FROM_CENTER);
			}
		});
	}
	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		getMenuInflater().inflate(R.menu.main, menu);
		return true;
	}
}

Conclusion

In this article, we have learnt about quick action patterns. We have also learned how they are used in different application, and finally the method of creating them.

Hope you like the reading!



I am well versed with Computer Programming languages and possess good working knowledge on software languages such as C, Java, PHP, HTML and CSS

What did you think of this post?
Services
Know how to keep MrBool Online
SUPPORT US
SUPPORT US
With your help, we can keep providing free content and helping you to be a better professional
support us
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually � in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits � in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login