Le document présente une synthèse sur l'évolution du design sur Android, en mettant l'accent sur le passage du design Holo au Material Design, introduit avec Android L en 2014. Il décrit les principes clés de Material Design, ses avantages, ainsi que des codes et démonstrations pour l'implémentation de divers éléments d'interface tels que les Floating Action Buttons et les Card Views. Enfin, il souligne la possibilité d'utiliser Material Design sur d'autres plateformes et propose des ressources pour approfondir le sujet.

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