@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 544 vues

Publié le

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

Publié dans : Technologie
0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
7 544
Sur SlideShare
0
Issues des intégrations
0
Intégrations
4 711
Actions
Partages
0
Téléchargements
19
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

  • Material is the metaphor
    A material metaphor is the unifying theory of a rationalized space and a system of motion. The material is grounded in tactile reality, inspired by the study of paper and ink, yet technologically advanced and open to imagination and magic. Surfaces and edges of the material provide visual cues that are grounded in reality. The use of familiar tactile attributes helps users quickly understand affordances. Yet the flexibility of the material creates new affordances that supercede those in the physical world, without breaking the rules of physics. The fundamentals of light, surface, and movement are key to conveying how objects move, interact, and exist in space in relation to each other. Realistic lighting shows seams, divides space, and indicates moving parts.


    Bold, graphic, intentional
    The foundational elements of print-based design—typography, grids, space, scale, color, and use of imagery—guide visual treatments. These elements do far more than please the eye; they create hierarchy, meaning, and focus. Deliberate color choices, edge-to-edge imagery, large-scale typography, and intentional white space create a bold and graphic interface that immerses the user in the experience. An emphasis on user actions makes core functionality immediately apparent and provides waypoints for the user.


    Motion provides meaning
    Motion respects and reinforces the user as the prime mover. Primary user actions are inflection points that initiate motion, transforming the whole design.  All action takes place in a single environment. Objects are presented to the user without breaking the continuity of experience even as they transform and reorganize. Motion is meaningful and appropriate, serving to focus attention and maintain continuity. Feedback is subtle yet clear. Transitions are efficient yet coherent.
  • Changer le QR code
  • http://cyrilmottier.com/2013/05/24/pushing-the-actionbar-to-the-next-level/
  • Contenu homogène vs non homogène
  • 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

    ×