Quick Actions
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.
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.
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.
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);
}
});
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);
}
});
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);
}
});
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);
}
});
This is how you can integrate the library in your own project. The component contains, besides the library, a demo project for exemplification.
More item by Electryc
Night Club Application Template
RateMyApp library
Real Estate Application Template


