1
0
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.
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:
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.
Figure 2: Shows the image of quick action pattern in twitter
This same application is also used 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.
Figure 4: Shows the image of main activity
Figure 5: Shows the image of a pop-up appeared when user taps on ImageView
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;
}
}
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!
See the prices for this post in Mr.Bool Credits System below: