View
298
Download
1
Category
Preview:
Citation preview
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
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.
Recommended