Menu

Tutorial details

Quick Actions - Tutorial | App Code for Sale | Preview

Quick Actions - Tutorial

This tutorial is based on the component Quick Actions
Download

Overview PAGE TOP

Quick action is a pop-up-like component which displays actions that can be performed on an object. It can be also used to display custom messages like a tooltip pop-up anchored to a certain component of your screen.

In this tutorial you will learn how to implement a simple quick action. Eclipse 3.7.2 will be used as IDE and Android Ice Cream Sandwich 4.0 as the platform.

The final product will look like this:

tut_screen2.png

Initial configurations PAGE TOP

Make a new project from File -> New -> Android Project. Name your project QuickActions and for the package name write com.chupamobile.android.quickactions.

Quick Action Item PAGE TOP

We firstly must create an entity which will represent a particular item of out quick action. It will mainly contain an icon and a title (what is visible for the user). Besides this, the item will have an id (in order to recognize it when we want to listen on click events on it), and two states – sticky or not (i.e. after taping on the item the quick action will disappear or not).

Create a new class and name it QuickActionItem. The class should look like this:

package com.chupamobile.android.quickactions;

import android.graphics.drawable.Drawable;

public class QuickActionItem {

 private Drawable icon;
 private String title;
 private int actionId = -1;
 private boolean sticky;

public QuickActionItem(int actionId, String title, Drawable icon) {

    this.title = title;
    this.icon = icon;
    this.actionId = actionId;
    }

  public QuickActionItem() {

    this(-1, null, null);
      }

    public QuickActionItem(int actionId, String title) {

        this(actionId, title, null);
}

    public QuickActionItem(Drawable icon) {

        this(-1, null, icon);
    }

    public QuickActionItem(int actionId, Drawable icon) {

        this(actionId, null, icon);
    }

 public void setTitle(String title) {

    this.title = title;
    }

    public String getTitle() {
    return this.title;
    }

 public void setIcon(Drawable icon) {
    this.icon = icon;
    }

 public Drawable getIcon() {
    return this.icon;
    }

    public void setActionId(int actionId) {

    this.actionId = actionId;
    }

    public int getActionId() {

    return actionId;
    }

    public void setSticky(boolean sticky) {

    this.sticky = sticky;
    }

    public boolean isSticky() {

    return sticky;
    }

}           

It’s basically an object that holds the information for a particular item from the quick action.

My Popup Window PAGE TOP

Next, we must make a base class for our quick action implementation and for other types of quick actions you would want to implement. What this class does is basically create a floating window on the screen at certain coordinates. Its main component is the PopupWindow class from the Android framework. Additional info on this class can be found here.

Create a new class and name it MyPopupWindow. Your class should look like this:

package com.chupamobile.android.quickactions;

import android.content.Context;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.Drawable;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.view.WindowManager;
import android.view.View.OnTouchListener;
import android.widget.PopupWindow;

public class MyPopupWindow {

    protected Context mContext;
    protected PopupWindow mWindow;
    protected View mRootView;
    protected Drawable mBackground = null;
    protected WindowManager mWindowManager;

    public MyPopupWindow(Context context) {

     mContext = context;
        mWindow = new PopupWindow(context);

    mWindow.setTouchInterceptor(new OnTouchListener() {

     @Override
        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 onDismiss() {

    }

    /**
    * Set initial configurations before showing the actual quick action.
    */
    protected void preShow() {

        if (mRootView == null)
        throw new IllegalStateException("setContentView was not called with a view to display.");
        if (mBackground == null)
            mWindow.setBackgroundDrawable(new BitmapDrawable());
        else
         mWindow.setBackgroundDrawable(mBackground);
            mWindow.setWidth(WindowManager.LayoutParams.WRAP_CONTENT);
            mWindow.setHeight(WindowManager.LayoutParams.WRAP_CONTENT);
            mWindow.setTouchable(true);
            mWindow.setFocusable(true);
            mWindow.setOutsideTouchable(true);
            mWindow.setContentView(mRootView);

    }

     public void setBackgroundDrawable(Drawable background) {

            mBackground = background;

        }

     public void setContentView(View root) {

         mRootView = root;
         mWindow.setContentView(root);

        }

     public void setContentView(int layoutResID) {

            LayoutInflater inflator = (LayoutInflater) mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            setContentView(inflator.inflate(layoutResID, null));

        }

        public void setOnDismissListener(PopupWindow.OnDismissListener listener) {
         mWindow.setOnDismissListener(listener);

        }

        public void dismiss() {

            mWindow.dismiss();
        }
}

You can see that our class has a PopupWindow delegate for which we specify its layout, background and a touch listener in order to intercept outside taping (when the user taps outside the window, it dismisses). At this stage we also do some initial verification whether the user specified or not a layout for the window. Having this class built, we now can extend it and create our own custom Quick actions, all based on this class.

In the following section, the creation of a simple quick action will be described.

Quick Action PAGE TOP

Firstly, we must define a layout for our quick action and for a particular element from it – the quick action item.

Create a new xml in res/layout/ folder and name it popup_horizontal.xml. This layout will be for quick actions that will have their elements arranged horizontally. Your layout should look like this:

<?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"
    >

    <ScrollView 
        android:id="@+id/scroller"
        android:layout_marginTop="16dip"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/popup"
        android:fadingEdgeLength="5dip"
        android:scrollbars="none">

        <LinearLayout
            android:id="@+id/tracks"
            android:orientation="horizontal"
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:padding="5dip" android:weightSum="1"/>

    </ScrollView >

    <ImageView
        android:id="@+id/arrow_up"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/arrow_up" />

    <ImageView
        android:id="@+id/arrow_down"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/scroller"
        android:layout_marginTop="-4dip"
        android:src="@drawable/arrow_down" />

</RelativeLayout>

The drawables for the arrow down, arrow up and scroller elements should look like this (the background of the popup must be a 9 patch):

arrow_down.png
arrow_up.png
popup.9.png

Next, we will define the layout for the vertical quick action. Create in /res/layout an xml named popup_vertical.xml. It’s basically the same layout, but the layout that contains the elements is oriented vertically this time, not horizontally. It should look like this:

<?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"
    android:gravity="center" >

    <ScrollView
        android:id="@+id/scroller"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dip"
        android:background="@drawable/popup"
        android:fadingEdgeLength="5dip"
        android:scrollbars="none" >

        <LinearLayout
            android:id="@+id/tracks"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="vertical"
            android:padding="10dip" />

    </ScrollView >

    <ImageView
        android:id="@+id/arrow_up"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/arrow_up" />

    <ImageView
        android:id="@+id/arrow_down"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/scroller"
        android:layout_marginTop="-4dip"
        android:src="@drawable/arrow_down" />

</RelativeLayout>


These are the possible layouts for the quick action. Now, we will define two layouts for quick action items: one for horizontal orientation and one for vertical orientation. A quick action will have, as defined in its class, an icon and a title. For the horizontal type the icon will be placed above the title and for the vertical type the icon will be place to the left of the title. 

Create a new xml file named action_item_horizontal.xml in /res/layout. The file should look like this:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/action_item_btn"
    android:clickable="true"
    android:focusable="true"
    android:orientation="horizontal"
    android:padding="5dp" >

    <ImageView
        android:id="@+id/iv_icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true" />

    <TextView
        android:id="@+id/tv_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/iv_icon"
        android:layout_centerHorizontal="true"
        android:gravity="center_horizontal"
        android:paddingLeft="5dip"
        android:paddingRight="5dip"
        android:text="Chart"
        android:textColor="#fff"
        android:textSize="16sp" />

</RelativeLayout>

In a similar way, create the action_item_vertical.xml layout:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_marginBottom="20dp"
    android:layout_marginTop="20dp"
    android:background="@drawable/action_item_btn"
    android:clickable="true"
    android:focusable="true"
    android:orientation="horizontal"
    android:padding="5dp" >

    <ImageView
        android:id="@+id/iv_icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/tv_title"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_marginLeft="5dp"
        android:gravity="center_vertical"
        android:text="Title"
        android:textColor="#ffffff"
        android:textSize="18sp" />

</LinearLayout>

Now you are ready to create your quick action class. Create a new class named QuickActionPopup:

package com.chupamobile.android.quickactions;

import java.util.ArrayList;
import java.util.List;

import android.content.Context;
import android.graphics.Rect;
import android.graphics.drawable.Drawable;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.view.ViewGroup.LayoutParams;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.PopupWindow.OnDismissListener;
import android.widget.ScrollView;
import android.widget.TextView;

public class QuickActionPopup extends MyPopupWindow implements OnDismissListener {
    private View mRootView;
    private ImageView mArrowUp;
    private ImageView mArrowDown;
    private LayoutInflater mInflater;
    private ViewGroup mTrack;
    private ScrollView mScroller;

    private OnActionItemClickListener mItemClickListener;
    private OnDismissListener mDismissListener;

    private List<QuickActionItem> actionItems = new ArrayList<QuickActionItem>();

    private boolean mDidAction;
    private boolean reverseOrientationItem = false;

    private int mChildPos;
        private int mInsertPos;
    private int mAnimStyle;
    private int mOrientation;
    private int rootWidth=0;


        public static final int HORIZONTAL = 0;
        public static final int VERTICAL = 1;

        public static final int ANIM_GROW_FROM_LEFT = 1;


    /**
     * Constructor for default vertical layout
     * 
     * @param context  Context
     */
    public QuickActionPopup(Context context) {
        this(context, VERTICAL);
    }






    /**
     * Constructor allowing orientation override
     * 
     * @param context    Context
     * @param orientation Layout orientation, can be vartical or horizontal
     */
    public QuickActionPopup(Context context, int orientation) {
        super(context);

        mOrientation = orientation;

        mInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

        if (mOrientation == HORIZONTAL) {
            setRootViewId(R.layout.popup_horizontal);
        } else {
            setRootViewId(R.layout.popup_vertical);
        }

        mAnimStyle  = ANIM_GROW_FROM_LEFT;
        mChildPos   = 0;
    }

    /**
     * Set the background of the popup and the two arrows. Must be 9-patch.
     * @param popup
     * @param arrowUp
     * @param arrowDown
     */
    public void setBackgroundResources(int popup, int arrowUp, int arrowDown){

        if(popup!=0 && arrowUp!=0 && arrowDown!=0){

            mScroller.setBackgroundResource(popup);
            mArrowDown.setImageResource(arrowDown);
            mArrowUp.setImageResource(arrowUp);

        }
    }


    /**
     * Get action item at an index
     * 
     * @param index  Index of item (position from callback)
     * 
     * @return  Action Item at the position
     */
    public QuickActionItem getActionItem(int index) {
        return actionItems.get(index);
    }

    /**
     * Set root view.
     * 
     * @param id Layout resource id
     */
    private void setRootViewId(int id) {
        mRootView   = (ViewGroup) mInflater.inflate(id, null);
        mTrack  = (ViewGroup) mRootView.findViewById(R.id.tracks);

        mArrowDown  = (ImageView) mRootView.findViewById(R.id.arrow_down);
        mArrowUp    = (ImageView) mRootView.findViewById(R.id.arrow_up);
        mScroller   = (ScrollView) mRootView.findViewById(R.id.scroller);

        mRootView.setLayoutParams(new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));

        setContentView(mRootView);
    }

    /**
     * Set animation style
     * 
     * @param mAnimStyle animation style, default is set to ANIM_AUTO
     */
    public void setAnimStyle(int mAnimStyle) {
        this.mAnimStyle = mAnimStyle;
    }

    /**
     * Set listener for action item clicked.
     * 
     * @param listener Listener
     */
    public void setOnActionItemClickListener(OnActionItemClickListener listener) {
        mItemClickListener = listener;
    }

    /**
     * Add action item
     * 
     * @param action  {@link QuickActionItem}
     */
    public void addActionItem(QuickActionItem action) {
        actionItems.add(action);

        String title    = action.getTitle();
        Drawable icon   = action.getIcon();

        View container;


        if (mOrientation == HORIZONTAL && !reverseOrientationItem) {
            container = mInflater.inflate(R.layout.action_item_horizontal, null);
        } else {
            container = mInflater.inflate(R.layout.action_item_vertical, null);
        }

        ImageView img   = (ImageView) container.findViewById(R.id.iv_icon);
        TextView text   = (TextView) container.findViewById(R.id.tv_title);

        if (icon != null) {
            img.setImageDrawable(icon);
        } else {
            img.setVisibility(View.GONE);
        }

        if (title != null) {
            text.setText(title);
        } else {
            text.setVisibility(View.GONE);
        }

        final int pos   =  mChildPos;
        final int actionId  = action.getActionId();

        container.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                if (mItemClickListener != null) {
                    mItemClickListener.onItemClick(QuickActionPopup.this, pos, actionId);
                }

                if (!getActionItem(pos).isSticky()) {  
                    mDidAction = true;

                    dismiss();
                }
            }
        });

        container.setFocusable(true);
        container.setClickable(true);            

        mTrack.addView(container, mInsertPos);

        mChildPos++;
        mInsertPos++;
    }

    /**
     * Show quickaction popup. Popup is automatically positioned, on top or bottom of anchor                                
     * 
     */
    public void show (View anchor) {
        preShow();

        int xPos, yPos, arrowPos;

        mDidAction          = false;

        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.measure(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);

        int rootHeight = mRootView.getMeasuredHeight();

        if (rootWidth == 0) {

            rootWidth   = mRootView.getMeasuredWidth();
        }

        int screenWidth     = mWindowManager.getDefaultDisplay().getWidth();
        int screenHeight    = mWindowManager.getDefaultDisplay().getHeight();

        if ((anchorRect.left + rootWidth) > screenWidth) {


            xPos        = anchorRect.left - (rootWidth-anchor.getWidth());          
            xPos        = (xPos < 0) ? 0 : xPos;

            arrowPos    = anchorRect.centerX()-xPos;

        } else {
            if (anchor.getWidth() > rootWidth) {
                xPos = anchorRect.centerX() - (rootWidth/2);


            } else {
                xPos = anchorRect.left;
            }

            arrowPos = anchorRect.centerX()-xPos;
        }

        int dyTop           = anchorRect.top;
        int dyBottom        = screenHeight - anchorRect.bottom;

        boolean onTop       = (dyTop > dyBottom) ? true : false;

        if (onTop) {
            if (rootHeight > dyTop) {
                yPos            = 15;
                LayoutParams l  = mScroller.getLayoutParams();
                l.height        = dyTop - anchor.getHeight();
            } else {
                yPos = anchorRect.top - rootHeight;
            }
        } else {
            yPos = anchorRect.bottom;

            if (rootHeight > dyBottom) { 
                LayoutParams l  = mScroller.getLayoutParams();
                l.height        = dyBottom;
            }
        }

        showArrow(((onTop) ? R.id.arrow_down : R.id.arrow_up), arrowPos);

        setAnimationStyle(screenWidth, anchorRect.centerX(), onTop);

        mWindow.showAtLocation(anchor, Gravity.NO_GRAVITY, xPos, yPos);
    }

    /**
     * Set animation style
     * 
     * @param screenWidth screen width
     * @param requestedX distance from left edge
* @param onTop flag to indicate where the popup should be displayed. Set TRUE if  *displayed on top of anchor view and vice versa
     */

    private void setAnimationStyle(int screenWidth, int requestedX, boolean onTop) {
        int arrowPos = requestedX - mArrowUp.getMeasuredWidth()/2;

        switch (mAnimStyle) {
        case ANIM_GROW_FROM_LEFT:
            mWindow.setAnimationStyle((onTop) ? R.style.Animations_PopUpMenu_Left : R.style.Animations_PopDownMenu_Left);
            break;

        }
    }


    private void showArrow(int whichArrow, int requestedX) {

        final View showArrow = (whichArrow == R.id.arrow_up) ? mArrowUp : mArrowDown;
        final View hideArrow = (whichArrow == R.id.arrow_up) ? mArrowDown : mArrowUp;

        final int arrowWidth = mArrowUp.getMeasuredWidth();

        showArrow.setVisibility(View.VISIBLE);

        ViewGroup.MarginLayoutParams param = (ViewGroup.MarginLayoutParams)showArrow.getLayoutParams();

        param.leftMargin = requestedX - arrowWidth / 2;

        hideArrow.setVisibility(View.INVISIBLE);
    }

    /**
     * Listener for dismissing the window.
     */

    public void setOnDismissListener(QuickActionPopup.OnDismissListener listener) {
        setOnDismissListener(this);

        mDismissListener = listener;
    }

    @Override
    public void onDismiss() {
        if (!mDidAction && mDismissListener != null) {
            mDismissListener.onDismiss();
        }
    }

    /**
     * If we want to reverse the item orientation.
     */

    public boolean isReverseOrientationItem() {
        return reverseOrientationItem;
    }

    public void setReverseOrientationItem(boolean reverseOrientationItem) {
        this.reverseOrientationItem = reverseOrientationItem;
    }

    /**
     * Listener for item click
     *
     */
    public interface OnActionItemClickListener {

        public abstract void onItemClick(QuickActionPopup source, int pos, int actionId);
    }

    /**
     * Listener for window dismiss
     * 
     */
    public interface OnDismissListener {
        public abstract void onDismiss();
    }
}

This might seem a complicated class, but is not that complicated. It extends MyPopupWindow and implements OnDismissListener in order to listen when the user clicks outside the quick action.

Firstly, there are defined fields for the visual elements, the listeners, a list of items, position fields, orientation fields and a type of animation. After defining different types of constructors we have setBackgroundResources(int,int,int) method through which we can specify our custom drawables for the quick action body and arrows. For inflating the appropriate layouts for the quick action components the class uses setRootViewId(int) method.

In order to add an action item to the quick action the class defines addActionItem(QuickActionItem) method. Here it is inflated the quick action item layout and sat its title and icon. If one of the item’s components is not specified, it will not be displayed. Here it is also defined the click listener on the item.

Another important method is show(View). This is where the position of the quick action is computed based on the position of the element on which is anchored. With some simple mathematical calculus, it is determined whether the quick action should be on top of the anchored item, or below it and also how much width space it should take.

The setAnimationStyle(int,int,int), as its name states selects the type of the animation to be used to display the quick action. Here we have only a single type of animation, but you can add other ones and complete this method. When the quick action is displayed only one arrow from the two (up or down) is displayed. This selection is done through showArrow(int, int) method. Lastly, the listeners are defined.

The only thing remained to be defined is the animation style we provided. In order to do this, create in /res/values an xml named styles.xml. Here we define the styles for our particular animation. If you want to add more animations, here is where you should add them. Your styles xml should look like this:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="Animations" />

    <style name="Animations.PopDownMenu" />

    <style name="Animations.PopDownMenu.Left">
        <item name="@android:windowEnterAnimation">@anim/grow_from_topleft_to_bottomright</item>
        <item name="@android:windowExitAnimation">@anim/shrink_from_bottomright_to_topleft</item>
    </style>


    <style name="Animations.PopUpMenu" />

    <style name="Animations.PopUpMenu.Left">
        <item name="@android:windowEnterAnimation">@anim/grow_from_bottomleft_to_topright</item>
        <item name="@android:windowExitAnimation">@anim/shrink_from_topright_to_bottomleft</item>
    </style>    

</resources>

For the enter and exit animations we have to define the actual animation files. Next, I’ll present all the animations involved here. All the files must be created into /res/anim folder.

grow_from_topleft_to_bottomright.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <scale
        android:fromXScale="0.3" android:toXScale="1.0"
        android:fromYScale="0.3" android:toYScale="1.0"
        android:pivotX="0%" android:pivotY="0%"
        android:duration="@android:integer/config_shortAnimTime"
    />
    <alpha
        android:interpolator="@android:anim/decelerate_interpolator"
        android:fromAlpha="0.0" android:toAlpha="1.0"
        android:duration="@android:integer/config_shortAnimTime"
    />
</set>

shrink_from_bottomright_to_topleft.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <scale
        android:fromXScale="1.0" android:toXScale="0.3"
        android:fromYScale="1.0" android:toYScale="0.3"
        android:pivotX="0%" android:pivotY="0%"
        android:duration="@android:integer/config_shortAnimTime"
    />
    <alpha
        android:interpolator="@android:anim/accelerate_interpolator"
        android:fromAlpha="1.0" android:toAlpha="0.0"
        android:duration="@android:integer/config_shortAnimTime"
    />
</set>

grow_from_bottomleft_to_topright.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <scale
        android:fromXScale="0.3" android:toXScale="1.0"
        android:fromYScale="0.3" android:toYScale="1.0"
        android:pivotX="0%" android:pivotY="50%"
        android:duration="@android:integer/config_shortAnimTime"
    />
    <alpha
        android:interpolator="@android:anim/decelerate_interpolator"
        android:fromAlpha="0.0" android:toAlpha="1.0"
        android:duration="@android:integer/config_shortAnimTime"
    />
</set>

shrink_from_topright_to_bottomleft.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <scale
        android:fromXScale="1.0" android:toXScale="0.3"
        android:fromYScale="1.0" android:toYScale="0.3"
        android:pivotX="0%" android:pivotY="100%"
        android:duration="@android:integer/config_shortAnimTime"
    />
    <alpha
        android:interpolator="@android:anim/accelerate_interpolator"
        android:fromAlpha="1.0" android:toAlpha="0.0"
        android:duration="@android:integer/config_shortAnimTime"
    />
</set>

Running the application PAGE TOP

In order to test what we have done, we must create an activity in which we can display the quick action.

Create a new class named QuickActionActivity:

package com.chupamobile.android.quickactionsdemo;


import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.Toast;

import com.chupamobile.android.quickactions.QuickActionItem;
import com.chupamobile.android.quickactions.QuickActionPopup;


public class NormalActivity extends Activity{

    //action id
    private static final int ID_VLC    = 1;
    private static final int ID_MAIL   = 2;
    private static final int ID_SAFARI = 3;


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

        setContentView(R.layout.normal_activity);

        QuickActionItem mailItem    = new QuickActionItem(ID_MAIL, "Mail", getResources().getDrawable(R.drawable.email_open));
        QuickActionItem vlcItem     = new QuickActionItem(ID_VLC, "VLC", getResources().getDrawable(R.drawable.vlc));
        QuickActionItem safariItem  = new QuickActionItem(ID_SAFARI, "Safari", getResources().getDrawable(R.drawable.safari));
//create QuickActionPopup. Use QuickActionPopup.VERTICAL or QuickActionPopup.HORIZONTAL //param to define orientation
        final QuickActionPopup quickActionPopup1 = new QuickActionPopup(this, QuickActionPopup.VERTICAL);

        //add action items into QuickActionPopup
        quickActionPopup1.addActionItem(mailItem);
        quickActionPopup1.addActionItem(vlcItem);
            quickActionPopup1.addActionItem(safariItem);

        //Set listener for action item clicked
        quickActionPopup1.setOnActionItemClickListener(new QuickActionPopup.OnActionItemClickListener() {           
            @Override
            public void onItemClick(QuickActionPopup source, int pos, int actionId) {               

                //filtering items by id
                if (actionId == ID_MAIL) {
                    Toast.makeText(getApplicationContext(), "Mail clicked", Toast.LENGTH_SHORT).show();
                } else if (actionId == ID_VLC) {
                    Toast.makeText(getApplicationContext(), "VLC clicked", Toast.LENGTH_SHORT).show();
                } else if(actionId == ID_SAFARI){
                    Toast.makeText(getApplicationContext(), "Safari clicked", Toast.LENGTH_SHORT).show();
                }
            }
        });

        //set dismiss listener
        quickActionPopup1.setOnDismissListener(new QuickActionPopup.OnDismissListener() {           
            @Override
            public void onDismiss() {
                Toast.makeText(getApplicationContext(), "Dismissed", Toast.LENGTH_SHORT).show();
            }
        });



        //show on btn1
        Button btn1 = (Button) this.findViewById(R.id.btn1);
        btn1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                quickActionPopup1.show(v);
            }
        });


    }

}

We firstly define 3 action items and a quick action. Next, we add the items to the quick actions and set the click and dismiss listeners. Finally, we set the quick action to appear on click on a button by calling show(View) method. The layout for the activity simply contains one button.

You should see the following output:

tut_screen.png

Conclusions PAGE TOP

Quick Actions is an interesting component that can be used an enhanced in many ways. This is only an example of a simple quick action, but it can be upgraded in different ways. Check our component here to see its full features.

2 Comments Leave a comment

Please login in order to leave a comment.

Newest first
  • francis.njoroge.7777 2013-07-11 10:02:34 Thread id 43

    Thanks a lot guys, your tutor was the best. Be blessed

  • vikram.singh.712161 2012-06-07 05:40:23 Thread id 12

    I have a college project in Android, that to answer an incoming call, just close phone to your ear, that’s it. To answer/end a call, don’t touch screen any more ! To answer a incoming call, just close the phone to your ear. To end call during a call, just turn the phone over.

    How can I do this…Please help me with source code of android…

    Please reply me fast… Thanks in advance…

!