Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Holo material design transition

9,023 views

Published on

Slides from my Droidcon Paris 2014 talk about Holo-Material design transition

Published in: Technology
  • Be the first to comment

Holo material design transition

  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  Au-dessus de l’UI (couche supérieure)  Action majeure de l’écran (promoted action)  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  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  Et plus !
  29. 29. Demo – Ripple effect
  30. 30. Demo – élément partagé
  31. 31. Animations – Elément partagé  XML  Java
  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

×