Quick Actions Android

* * * * (3 ratings)
Quick Actions | App Code for Sale | Hero

Screenshots

Overview

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.

The Quick Actions component is a project library that can be easily added to your current projects. It is fully customizable and easy to understand in order to add more features.

Content

Types of Quick Actions: - Normal Quick Actions : the normal quick actions seen everywhere in which the quick action has a list of elements - Image Quick Actions: a quick action containing an image + caption - Question Quick Actions: a quick action containing text + two icons (yes/no) - Tooltip Quick Actions: display a tooltip with title, icon and content

Features:

  • Fully customizable : set your own background shapes and colors

  • Preloaded with color themes: blue, purple, gray, indigo

  • Animations

  • Library project – easy to integrate into your own project

We created a Free Step by Step tutorial that explains and describes the Quick Actions implementation and library integration process into an Android application.

Usage

Import the project and add it as a library to your own project. Your project -> Properties -> Android -> Under library section -> Add -> Select QuickActions project. In a very simple manner you have access to all the features of the QuickActions library.

Normal quick actions

In order to add a normal quick action to your application place the following code to your 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));

final QuickActionPopup quickActionPopup1 = new QuickActionPopup(this, QuickActionPopup.VERTICAL);
quickActionPopup1.setBackgroundResources(R.drawable.purple_popup, R.drawable.arrow_up_purple, R.drawable.arrow_down_purple);

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

Set listeners on items and dismiss listener:

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

//filter 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();
    }
 }
});

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

Display the quick action on a button:

//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);
    }
});

Image Quick Actions

Create the ImageActionItem and the ImagePopup:

//create the image action item
ImageActionItem imgItem = new ImageActionItem("Image caption", getResources().getDrawable(R.drawable.butterfly));

//create the image popup
final ImagePopup imagePopup = new ImagePopup(this);
imagePopup.setBackgroundResources(R.drawable.gray_popup, R.drawable.arrow_up_gray, R.drawable.arrow_down_gray);
imagePopup.setImageItem(imgItem);
imagePopup.getCaption().setTextColor(Color.WHITE);

Display Image Quick Action on a button:

imgBtn.setOnClickListener(new OnClickListener() {
    @Override
    public void onClick(View v) {
        imagePopup.show(v);
        imagePopup.setAnimStyle(ImagePopup.ANIM_GROW_FROM_CENTER);
    }
});

Question Quick Actions

Create the QuestionActionItem and QuestionPopup:

QuestionActionItem questionItem = new QuestionActionItem("Are you sure you want to perform the action?", getResources().getDrawable(R.drawable.yes), getResources().getDrawable(R.drawable.no));

//create the question popup
final QuestionPopup questionPopup = new QuestionPopup(this);
questionPopup.setBackgroundResources(R.drawable.blue_popup, R.drawable.arrow_up_blue, R.drawable.arrow_down_blue);
questionPopup.setQuestionItem(questionItem);

Set listeners for “ok” and “cancel”:

questionPopup.setOkClickListener(new OnClickListener() {
    @Override
    public void onClick(View v) {
        Toast.makeText(EnhancedActivity.this, "Ok button pressed", Toast.LENGTH_LONG).show();
        questionPopup.dismiss();
    }
});

questionPopup.setCancelClickListener(new OnClickListener() {
    @Override
    public void onClick(View v) {
        Toast.makeText(EnhancedActivity.this, "Cancel button pressed",Toast.LENGTH_LONG).show(); questionPopup.dismiss();
    }
});

Display the Question Quick Action on a button:

actionBtn.setOnClickListener(new OnClickListener() {
    @Override
    public void onClick(View v) {
            questionPopup.show(v);
    questionPopup.setAnimStyle(QuestionPopup.ANIM_GROW_FROM_CENTER);
    }
});

Tooltip Quick Actions

Create the TooltipActionItem and TooltipPopup:

String content = "Lorem ipsum dolor sit amet consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.";
TooltipActionItem tooltipWithImage = new TooltipActionItem("Tooltip titile", getResources().getDrawable(R.drawable.bulb_green), content);
final TooltipPopup tooltipPopup = new TooltipPopup(this);
tooltipPopup.setBackgroundResources(R.drawable.blue_popup, R.drawable.arrow_up_blue, R.drawable.arrow_down_blue);
tooltipPopup.setTooltipItem(tooltipWithImage);

//set color for title and content
tooltipPopup.getTitle().setTextColor(Color.WHITE);
tooltipPopup.getContent().setTextColor(Color.WHITE);

Display tooltip on a button:

Button tooltipWithIconBtn = (Button)findViewById(R.id.enhanced_nd_tt_with_icon);
tooltipWithIconBtn.setOnClickListener(new OnClickListener() {
    @Override
    public void onClick(View v) {
        tooltipPopup.show(v);
    }
});

Conclusion

This is how you can integrate the library in your own project. The component contains, besides the library, a demo project for exemplification.

2 Comments Leave a comment

2 Comments

Please login in order to leave a comment.

Newest first
  • ekandeel 2013-04-27 00:15:02 Thread #2091

    is it working fine with widget ? will it appear over the desktop of mobile ? will it work when I click over button in widget ?

  • xaradutta Buyer 2012-08-27 09:25:19 Thread #399

    works fine but just two issues 1) want to show tool tip on image view (works with button but not with other views) 2) if tool tip is long, can it show the scroll bar regrads