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