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!

1. Holo Material Design
Transition

2. About me
Quentin Sallat
Développeur Android à iD.apps
@Aerilys

3. Mais enfin c'est quoi Material ?

4. L'évolution du design sur Android
● 1.x/2.x (Depuis 2008)
o Thème Dark/light
o Droid

5. L'évolution du design sur Android
● 3.x (2011)
o Holo

6. L'évolution du design sur Android
● 4.x (2011)
o Roboto
o Design guidelines

7. Material Design
Android L (2014)
● Material design
● Même design pour tous les produits Google
● “Cross-platform”

8. Material Design
Material is the
metaphor
Bold, graphic,
intentional
Motion provides
meaning

9. De Holo à Material

10. Steam Explorer - Holo

11. Material theme

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. Demo - code

14. Demo - résultat

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. Colors

17. Demo - résultat

18. Floating Action Button

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

21. FAB - code

22. Demo

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. Démo

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

27. Demo

28. Animation
 Nombreuses nouvelles APIs
 Transitions entre activities
 Ripple effect
 Shadows
 Reveal effect, curve motion, state list drawables…
 Et plus !

29. Animations – Elément partagé
 XML
 Java

30. Demo – élément partagé

31. Demo – Ripple effect

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 !

34. iD.apps
http://www.id-apps.fr
http://blog.id-apps.info
@iD_apps
Quentin SALLAT
@Aerilys
https://github.com/neferetheka