http://fr.droidcon.com/2014/agenda/
http://fr.droidcon.com/2014/agenda/detail?title=Holo+-%3E+Material+Design+Transition
Avec l'arrivée d'Android L, Google a décidé d'apporter à son OS mobile un nouvel ensemble de règles visuelles nommé Material Design. Mais il n'est pour autant pas nécessaire de changer intégralement le design de son application pour respecter ces nouvelles guidelines.
Cette conférence vous montrera en direct comment passer de Holo à Material au travers d'une application. Du floating button aux cartes à la Google Now, en passant par les nouvelles APIs d'animation, vous saurez tout ce qui est nécessaire pour effectuer une transition en douceur.
Speaker : Quentin Sallat, iD.apps
Android Developer for more than three years, I'm a huge fan of mobile and web development. I've been blogging for years about .NET, HTML5 and Java development, and I'm now a Professional Android developer.
I'm especially interested in app design, and with more than fifteen apps published under my personal account, Aerilys, I've some things I'd like to share with my fellow developers!
12. Material theme
Créer un dossier pour Android L
res/values-v21/styles.xml
Faire hériter son thème du thème Material
<style name="SteamTheme"
parent="@android:style/Theme.Material.Light.DarkActionBar">
Trois thèmes
Theme.Material (dark)
Theme.Material.Light (light)
Theme.Material.Light.DarkActionBar
15. Colors
Nouveaux attributs pour colorer son application
colorPrimary : couleur principale de l’application
colorPrimaryDark : variante plus sombre
Pour aller plus loin
https://developer.android.com/preview/material/theme.html
Librairie Palette (support v7)
19. FAB - design rules
Bouton flottant
Action majeure de l’écran (promoted action)
Au-dessus de l’UI (couche supérieure)
Pas plus d’un par écran, mais pas obligatoire
20. FAB - code
View customisée, drawable ou reprise d’un projet
Github existant
iosched
FloatingActionButton
Compatible jusqu’à 2.x avec des adaptations
23. FAB - scrolling effect
Effet à la Google Plus pour ne pas cacher le contenu
Cache le bouton en scroll descendant, l’affiche en scroll ascendant
Utilise un ScrollListener sur une ScrollView ou une ListView/GridView
Blog de Cyril Mottier
QuickreturnListView sur Github
Pensez à la petite animation
25. Cards - Design rules
Popularisées par Google Now, Facebook…
1 card = 1 idée, notion ou contenu
Ne s’applique pas à toutes les listes
26. Cardviews - code
Avant : cards avec un drawable
Peu customisable
Pas standard
Pas de gestion dynamique des ombres
Avec Android L
Facilement customisable
Nouvelle classe de la librairie de support v7
Attribut elevation pour gérer les ombres
28. Animation
Nombreuses nouvelles APIs
Transitions entre activities
Ripple effect
Shadows
Reveal effect, curve motion, state list drawables…
Et plus !
32. Quelques liens
Material design rules:
http://www.google.com/design/
Material with Polymer:
http://www.polymer-project.org/docs/elements/material.html
Material with Angular:
http://material.angularjs.org/
33. Conclusion
• Material Design is cool!
• Possibilité de l’appliquer avant Android L
• … Et même sur d’autres plateformes !
Material is the metaphor
A material metaphor is the unifying theory of a rationalized space and a system of motion. The material is grounded in tactile reality, inspired by the study of paper and ink, yet technologically advanced and open to imagination and magic.Surfaces and edges of the material provide visual cues that are grounded in reality. The use of familiar tactile attributes helps users quickly understand affordances. Yet the flexibility of the material creates new affordances that supercede those in the physical world, without breaking the rules of physics.The fundamentals of light, surface, and movement are key to conveying how objects move, interact, and exist in space in relation to each other. Realistic lighting shows seams, divides space, and indicates moving parts.
Bold, graphic, intentional
The foundational elements of print-based design—typography, grids, space, scale, color, and use of imagery—guide visual treatments. These elements do far more than please the eye; they create hierarchy, meaning, and focus. Deliberate color choices, edge-to-edge imagery, large-scale typography, and intentional white space create a bold and graphic interface that immerses the user in the experience.An emphasis on user actions makes core functionality immediately apparent and provides waypoints for the user.
Motion provides meaning
Motion respects and reinforces the user as the prime mover. Primary user actions are inflection points that initiate motion, transforming the whole design. All action takes place in a single environment. Objects are presented to the user without breaking the continuity of experience even as they transform and reorganize.Motion is meaningful and appropriate, serving to focus attention and maintain continuity. Feedback is subtle yet clear. Transitions are efficient yet coherent.