Successfully reported this slideshow.
@Aerilys#HoloToMaterial
Holo to Material Design Transition
@Aerilys#HoloToMaterial
Présentation
QUENTIN SALLAT
@Aerilys
Android developer at
iD.apps
@Aerilys#HoloToMaterial
De Holo à Material design
• Mais enfin c’est quoi le Material design ?
• Steam Explorer
• Thème
• ...
Objectif
Se convertir au Material Design en 45 minutes !
@Aerilys#HoloToMaterial
@Aerilys#HoloToMaterial
L'évolution du design sur Android
●1.x/2.x (Depuis 2008)
●Thème Dark/light
@Aerilys#HoloToMaterial
L'évolution du design sur Android
●3.x (2011)
●Holo
@Aerilys#HoloToMaterial
L'évolution du design sur Android
●4.x (2011)
●Design guidelines
@Aerilys#HoloToMaterial
Material Design
Android 5.0 Lollipop (2014)
●Material design
●Même design pour tous les produits G...
@Aerilys#HoloToMaterial
Material Design
Material is
the metaphor
Bold,
graphic,
intentional
Motion
provides
meaning
@Aerilys#HoloToMaterial
Mais je suis développeur moi !
• Material Design = Guidelines != Règles
• Outils pour faciliter le...
@Aerilys#HoloToMaterial
« Suivez les standards, sauf s’il
existe une alternative vraiment
meilleure »
About Face – Alan Co...
@Aerilys#HoloToMaterial
De Holo à Material
@Aerilys#HoloToMaterial
Steam Explorer - Holo
@Aerilys#HoloToMaterial
Material theme
@Aerilys#HoloToMaterial
Material theme
• Créer un dossier pour
Android 5.0
•res/values-v21/styles.xml
• Faire hériter son ...
@Aerilys#HoloToMaterial
Demo - code
@Aerilys#HoloToMaterial
Demo - résultat
@Aerilys#HoloToMaterial
Colors
• Nouveaux attributs pour
colorer son application
• colorPrimary : couleur
principale de l’...
@Aerilys#HoloToMaterial
Colors
@Aerilys#HoloToMaterial
Demo - résultat
@Aerilys#HoloToMaterial
Floating action button
@Aerilys#HoloToMaterial
FAB - design rules
• Bouton flottant
• Au-dessus de l’UI (couche
supérieure)
• Action majeure de l...
@Aerilys#HoloToMaterial
FAB - code
• View customisée, drawable
ou reprise d’un projet Github
existant
•iosched
•FloatingAc...
@Aerilys#HoloToMaterial
public void init(int fabColor)
{
setWillNotDraw(false);
this.setLayerType(View.LAYER_TYPE_SOFTWARE...
@Aerilys#HoloToMaterial
@Override
protected void onDraw(Canvas canvas)
{
canvas.drawCircle(getWidth()/2, getHeight()/2,(fl...
@Aerilys#HoloToMaterial
Demo
@Aerilys#HoloToMaterial
FAB - scrolling effect
• Effet à la Google Plus pour ne pas cacher le contenu
• Cache le bouton en...
@YourTwitterHandle@YourTwitterHandle@Aerilys#HoloToMaterial
Démo
@Aerilys#HoloToMaterial
Cards - Design rules
• Popularisées par Google
Now, Facebook…
• 1 card = 1 idée, notion ou
contenu...
@Aerilys#HoloToMaterial
Cardviews - code
• Avant : cards avec un
drawable
 Peu customisable
 Pas standard
 Pas de gesti...
@Aerilys#HoloToMaterial
Demo
@Aerilys#HoloToMaterial
Animation
• Nombreuses nouvelles APIs
 Transitions entre activities
 Ripple effect
 Shadows
 E...
@YourTwitterHandle@YourTwitterHandle@Aerilys#HoloToMaterial
Demo
@YourTwitterHandle@YourTwitterHandle@Aerilys#HoloToMaterial
Demo
@Aerilys#HoloToMaterial
Animations – Elément partagé
XML
<ImageView
android:id="@+id/categoryImage"
android:layout_width="...
@Aerilys#HoloToMaterial
Animations – Elément partagé
Java
Intent intent = GameActivity_.intent(this).get();
intent.putExtr...
@Aerilys#HoloToMaterial
Material design dans le monde réel
@Aerilys#HoloToMaterial
Evernote
@Aerilys#HoloToMaterial
Asparagus
@Aerilys#HoloToMaterial
Google Plus
@Aerilys#HoloToMaterial
Pushbullet
@Aerilys#HoloToMaterial
Inbox
@YourTwitterHandle@YourTwitterHandle@Aerilys#HoloToMaterial
Conclusion
@Aerilys#HoloToMaterial
Quelques liens
Material design guidelines:
http://www.google.com/design/
Material with Polymer:
ht...
@Aerilys#HoloToMaterial
Conclusion
• Material Design is cool!
• Possibilité de l’appliquer
avant Android Lollipop
• … Et m...
@YourTwitterHandle@YourTwitterHandle@Aerilys#HoloToMaterial
Q & A
Prochain SlideShare
Chargement dans…5
×

Holo to material design - Devoxx France 2015

7 962 vues

Publié le

An improved version of my talk from Droidcon Paris 2014, for Devoxx France 2015

Publié dans : Technologie
  • Soyez le premier à commenter

Holo to material design - Devoxx France 2015

  1. 1. @Aerilys#HoloToMaterial Holo to Material Design Transition
  2. 2. @Aerilys#HoloToMaterial Présentation QUENTIN SALLAT @Aerilys Android developer at iD.apps
  3. 3. @Aerilys#HoloToMaterial De Holo à Material design • Mais enfin c’est quoi le Material design ? • Steam Explorer • Thème • FAB • Cards • Animations • Material design dans le monde réel
  4. 4. Objectif Se convertir au Material Design en 45 minutes !
  5. 5. @Aerilys#HoloToMaterial
  6. 6. @Aerilys#HoloToMaterial L'évolution du design sur Android ●1.x/2.x (Depuis 2008) ●Thème Dark/light
  7. 7. @Aerilys#HoloToMaterial L'évolution du design sur Android ●3.x (2011) ●Holo
  8. 8. @Aerilys#HoloToMaterial L'évolution du design sur Android ●4.x (2011) ●Design guidelines
  9. 9. @Aerilys#HoloToMaterial Material Design Android 5.0 Lollipop (2014) ●Material design ●Même design pour tous les produits Google ●“Cross-platform”
  10. 10. @Aerilys#HoloToMaterial Material Design Material is the metaphor Bold, graphic, intentional Motion provides meaning
  11. 11. @Aerilys#HoloToMaterial Mais je suis développeur moi ! • Material Design = Guidelines != Règles • Outils pour faciliter le design • Ce n’est qu’un guide, à vous de faire le reste… Mais ce n’est pas une raison pour faire n’importe quoi !
  12. 12. @Aerilys#HoloToMaterial « Suivez les standards, sauf s’il existe une alternative vraiment meilleure » About Face – Alan Cooper
  13. 13. @Aerilys#HoloToMaterial De Holo à Material
  14. 14. @Aerilys#HoloToMaterial Steam Explorer - Holo
  15. 15. @Aerilys#HoloToMaterial Material theme
  16. 16. @Aerilys#HoloToMaterial Material theme • Créer un dossier pour Android 5.0 •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.DarkActi onBar
  17. 17. @Aerilys#HoloToMaterial Demo - code
  18. 18. @Aerilys#HoloToMaterial Demo - résultat
  19. 19. @Aerilys#HoloToMaterial Colors • Nouveaux attributs pour colorer son application • colorPrimary : couleur principale de l’application • colorPrimaryDark : variante plus sombre • Librairie Palette (support v7)
  20. 20. @Aerilys#HoloToMaterial Colors
  21. 21. @Aerilys#HoloToMaterial Demo - résultat
  22. 22. @Aerilys#HoloToMaterial Floating action button
  23. 23. @Aerilys#HoloToMaterial FAB - design rules • Bouton flottant • Au-dessus de l’UI (couche supérieure) • Action majeure de l’écran • Pas plus d’un par écran, mais pas obligatoire
  24. 24. @Aerilys#HoloToMaterial FAB - code • View customisée, drawable ou reprise d’un projet Github existant •iosched •FloatingActionButton • Compatible jusqu’à 2.x avec des adaptations
  25. 25. @Aerilys#HoloToMaterial public void init(int fabColor) { setWillNotDraw(false); this.setLayerType(View.LAYER_TYPE_SOFTWARE, null); mButtonPaint = new Paint(Paint.ANTI_ALIAS_FLAG); mButtonPaint.setColor(fabColor); mButtonPaint.setStyle(Paint.Style.FILL); mButtonPaint.setShadowLayer(10.0f, 0.0f, 3.5f, Color.argb(100, 0, 0, 0)); invalidate(); } FAB - code
  26. 26. @Aerilys#HoloToMaterial @Override protected void onDraw(Canvas canvas) { canvas.drawCircle(getWidth()/2, getHeight()/2,(float) (getWidth()/2.6), mButtonPaint); } FAB - code
  27. 27. @Aerilys#HoloToMaterial Demo
  28. 28. @Aerilys#HoloToMaterial 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 Github • Pensez à la petite animation 
  29. 29. @YourTwitterHandle@YourTwitterHandle@Aerilys#HoloToMaterial Démo
  30. 30. @Aerilys#HoloToMaterial Cards - Design rules • Popularisées par Google Now, Facebook… • 1 card = 1 idée, notion ou contenu • Ne s’applique pas à toutes les listes
  31. 31. @Aerilys#HoloToMaterial Cardviews - code • Avant : cards avec un drawable  Peu customisable  Pas standard  Pas de gestion dynamique des ombres • Avec Android Lollipop  Facilement customisable  Support v7  Attribut elevation pour gérer les ombres
  32. 32. @Aerilys#HoloToMaterial Demo
  33. 33. @Aerilys#HoloToMaterial Animation • Nombreuses nouvelles APIs  Transitions entre activities  Ripple effect  Shadows  Et plus !
  34. 34. @YourTwitterHandle@YourTwitterHandle@Aerilys#HoloToMaterial Demo
  35. 35. @YourTwitterHandle@YourTwitterHandle@Aerilys#HoloToMaterial Demo
  36. 36. @Aerilys#HoloToMaterial Animations – Elément partagé XML <ImageView android:id="@+id/categoryImage" android:layout_width="match_parent" android:layout_height="@dimen/tile_height" android:scaleType="centerCrop" android:transitionName="gameappImage" android:src="@drawable/action"/>
  37. 37. @Aerilys#HoloToMaterial Animations – Elément partagé Java Intent intent = GameActivity_.intent(this).get(); intent.putExtra(GameActivity.INTENT_SELECTED_GAME, gameApp); ActivityOptions options = ActivityOptions .makeSceneTransitionAnimation(this, view.findViewById(R.id.categoryImage), "gameappImage"); startActivity(intent, options.toBundle());
  38. 38. @Aerilys#HoloToMaterial Material design dans le monde réel
  39. 39. @Aerilys#HoloToMaterial Evernote
  40. 40. @Aerilys#HoloToMaterial Asparagus
  41. 41. @Aerilys#HoloToMaterial Google Plus
  42. 42. @Aerilys#HoloToMaterial Pushbullet
  43. 43. @Aerilys#HoloToMaterial Inbox
  44. 44. @YourTwitterHandle@YourTwitterHandle@Aerilys#HoloToMaterial Conclusion
  45. 45. @Aerilys#HoloToMaterial Quelques liens Material design guidelines: http://www.google.com/design/ Material with Polymer: http://www.polymer-project.org/docs/elements/material.html Material with Angular: http://material.angularjs.org/
  46. 46. @Aerilys#HoloToMaterial Conclusion • Material Design is cool! • Possibilité de l’appliquer avant Android Lollipop • … Et même sur d’autres plateformes !
  47. 47. @YourTwitterHandle@YourTwitterHandle@Aerilys#HoloToMaterial Q & A

×