Holo to material design - Devoxx France 2015

@Aerilys#HoloToMaterial
Holo to Material Design Transition

Présentation
QUENTIN SALLAT
@Aerilys
Android developer at
iD.apps

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

Objectif
Se convertir au Material Design en 45 minutes !

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

●3.x (2011)
●Holo

●4.x (2011)
●Design guidelines

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

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

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 !

« Suivez les standards, sauf s’il
existe une alternative vraiment
meilleure »
About Face – Alan Cooper

De Holo à Material

Steam Explorer - Holo

Material theme

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

Demo - code

Demo - résultat

Colors
• Nouveaux attributs pour
colorer son application
• colorPrimary : couleur
principale de l’application
• colorPrimaryDark : variante
plus sombre
• Librairie Palette (support v7)

Colors

Floating action button

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

FAB - code
• View customisée, drawable
ou reprise d’un projet Github
existant
•iosched
•FloatingActionButton
• Compatible jusqu’à 2.x avec
des adaptations

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

@Override
protected void onDraw(Canvas canvas)
{
canvas.drawCircle(getWidth()/2, getHeight()/2,(float)
(getWidth()/2.6), mButtonPaint);
}
FAB - code

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 

@YourTwitterHandle@YourTwitterHandle@Aerilys#HoloToMaterial
Démo

Cards - Design rules
• Popularisées par Google
Now, Facebook…
• 1 card = 1 idée, notion ou
contenu
• Ne s’applique pas à toutes
les listes

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

Animation
• Nombreuses nouvelles APIs
 Transitions entre activities
 Ripple effect
 Shadows
 Et plus !

Demo

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"/>

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());

Material design dans le monde réel

Evernote

Asparagus

Google Plus

Pushbullet

Conclusion

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/

Conclusion
• Material Design is cool!
• Possibilité de l’appliquer
avant Android Lollipop
• … Et même sur d’autres
plateformes !

Q & A

Holo to material design - Devoxx France 2015

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (20)

Holo to material design - Devoxx France 2015

Notas del editor