Card-Style Training2014/02/25 John

Outline

● What is Card-Style● Design● How to implement

○ Swipe dismiss○ Popup menu

● Summary● Homework

What is Card-Style

This source of inspiration is “Index-Card”.

What is Card-Style

Card-Style can improve more user expliences and easy to highlight multi-user conversation.

What is Card-Style

Google uses Card-Style around its app.

What is Card-Style

Google Drive

What is Card-Style

Google Play

What is Card-Style

Google Map

What is Card-Style

Google Now

What is Card-Style

Google Gmail

Design

Card Header

Card Content

Card Action

Card Expand

Design

Left Swipe

Right Swipe

How to implement

Swipe to dismissSet Custom OnTouchListener to ListView

How to implement

Swipe to dismissOverriding onTouch

How to implement

Swipe to dismiss

How to implement

Swipe to dismiss

How to implement

Swipe to dismisshandleUpEvent

How to implement

Swipe to dismiss perform dismiss

How to implement

Popup menu

How to implement

Popup menu

Summary

● To trim and streamline an organization.● Hight-light item.● Improving user experience.

Reference1. DevBytes: Animating Listview deletion2. nhaarman - ListviewAnimations

HomeworkSample source code: (You can also fInd it at the video record nearby if this link is invalid.)https://www.dropbox.com/s/e1usgun9gd0hjqc/TrainingCardStyle.zip

● Change list view to grid view as Google Play.

● Change popup menu to a information button that can display another information in card on clicking it.