Holo Material Design 
Transition
About me 
Quentin Sallat 
Développeur Android à iD.apps 
@Aerilys
Mais enfin c'est quoi Material ?
L'évolution du design sur Android 
● 1.x/2.x (Depuis 2008) 
o Thème Dark/light 
o Droid
L'évolution du design sur Android 
● 3.x (2011) 
o Holo
L'évolution du design sur Android 
● 4.x (2011) 
o Roboto 
o Design guidelines
Material Design 
Android L (2014) 
● Material design 
● Même design pour tous les produits Google 
● “Cross-platform”
Material Design 
Material is the 
metaphor 
Bold, graphic, 
intentional 
Motion provides 
meaning
De Holo à Material
Steam Explorer - Holo
Material theme
Material theme 
 Créer un dossier pour Android L 
 res/values-v21/styles.xml 
 Faire hériter son thème du thème Materia...
Demo - code
Demo - résultat
Colors 
 Nouveaux attributs pour colorer son application 
 colorPrimary : couleur principale de l’application 
 colorPr...
Colors
Demo - résultat
Floating Action Button
FAB - design rules 
 Bouton flottant 
 Action majeure de l’écran (promoted action) 
 Au-dessus de l’UI (couche supérieu...
FAB - code 
 View customisée, drawable ou reprise d’un projet 
Github existant 
 iosched 
 FloatingActionButton 
 Comp...
FAB - code
Demo
FAB - scrolling effect 
 Effet à la Google Plus pour ne pas cacher le contenu 
 Cache le bouton en scroll descendant, l’...
Démo
Cards - Design rules 
 Popularisées par Google Now, Facebook… 
 1 card = 1 idée, notion ou contenu 
 Ne s’applique pas ...
Cardviews - code 
 Avant : cards avec un drawable 
 Peu customisable 
 Pas standard 
 Pas de gestion dynamique des omb...
Demo
Animation 
 Nombreuses nouvelles APIs 
 Transitions entre activities 
 Ripple effect 
 Shadows 
 Reveal effect, curve...
Animations – Elément partagé 
 XML 
 Java
Demo – élément partagé
Demo – Ripple effect
Quelques liens 
Material design rules: 
http://www.google.com/design/ 
Material with Polymer: 
http://www.polymer-project....
Conclusion 
• Material Design is cool! 
• Possibilité de l’appliquer avant Android L 
• … Et même sur d’autres plateformes...
iD.apps 
http://www.id-apps.fr 
http://blog.id-apps.info 
@iD_apps 
Quentin SALLAT 
@Aerilys 
https://github.com/neferethe...
Prochain SlideShare
Chargement dans…5
×

Holo material design transition - DroidCon Paris 2014

1 224 vues

Publié le

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!

Publié dans : Technologie
  • Soyez le premier à commenter

Holo material design transition - DroidCon Paris 2014

  1. 1. Holo Material Design Transition
  2. 2. About me Quentin Sallat Développeur Android à iD.apps @Aerilys
  3. 3. Mais enfin c'est quoi Material ?
  4. 4. L'évolution du design sur Android ● 1.x/2.x (Depuis 2008) o Thème Dark/light o Droid
  5. 5. L'évolution du design sur Android ● 3.x (2011) o Holo
  6. 6. L'évolution du design sur Android ● 4.x (2011) o Roboto o Design guidelines
  7. 7. Material Design Android L (2014) ● Material design ● Même design pour tous les produits Google ● “Cross-platform”
  8. 8. Material Design Material is the metaphor Bold, graphic, intentional Motion provides meaning
  9. 9. De Holo à Material
  10. 10. Steam Explorer - Holo
  11. 11. Material theme
  12. 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
  13. 13. Demo - code
  14. 14. Demo - résultat
  15. 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)
  16. 16. Colors
  17. 17. Demo - résultat
  18. 18. Floating Action Button
  19. 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. 20. FAB - code  View customisée, drawable ou reprise d’un projet Github existant  iosched  FloatingActionButton  Compatible jusqu’à 2.x avec des adaptations
  21. 21. FAB - code
  22. 22. Demo
  23. 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 
  24. 24. Démo
  25. 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. 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
  27. 27. Demo
  28. 28. Animation  Nombreuses nouvelles APIs  Transitions entre activities  Ripple effect  Shadows  Reveal effect, curve motion, state list drawables…  Et plus !
  29. 29. Animations – Elément partagé  XML  Java
  30. 30. Demo – élément partagé
  31. 31. Demo – Ripple effect
  32. 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. 33. Conclusion • Material Design is cool! • Possibilité de l’appliquer avant Android L • … Et même sur d’autres plateformes !
  34. 34. iD.apps http://www.id-apps.fr http://blog.id-apps.info @iD_apps Quentin SALLAT @Aerilys https://github.com/neferetheka

×