Holo to material design - Devoxx France 2015

@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

• FAB

• Cards

• Animations

• Material design dans le monde réel

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 Google

●“Cross-platform”

@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 design

• Ce n’est qu’un guide, à vous de faire le reste… Mais ce

n’est pas une raison pour faire n’importe quoi !

@Aerilys#HoloToMaterial

« Suivez les standards, sauf s’il

existe une alternative vraiment

meilleure »About Face – Alan Cooper

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

@Aerilys#HoloToMaterial

Demo - code

@Aerilys#HoloToMaterial

Demo - résultat

@Aerilys#HoloToMaterial

Colors

• Nouveaux attributs pour

colorer son application

• colorPrimary : couleur

principale de l’application

• colorPrimaryDark : variante

plus sombre

• Librairie Palette (support v7)

@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’écran

• Pas plus d’un par écran, mais

pas obligatoire

@Aerilys#HoloToMaterial

FAB - code

• View customisée, drawable

ou reprise d’un projet Github

existant

• iosched

• FloatingActionButton

• Compatible jusqu’à 2.x avec

des adaptations

@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

@Aerilys#HoloToMaterial

@Override

protected void onDraw(Canvas canvas)

{

canvas.drawCircle(getWidth()/2, getHeight()/2,(float)

(getWidth()/2.6), mButtonPaint);

}

FAB - code

@Aerilys#HoloToMaterial

Demo

@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

@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

• Ne s’applique pas à toutes

les listes

@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

@Aerilys#HoloToMaterial

Demo

@Aerilys#HoloToMaterial

Animation

• Nombreuses nouvelles APIs

Transitions entre activities

Ripple effect

Shadows

Et plus !

@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="match_parent"

android:layout_height="@dimen/tile_height"

android:scaleType="centerCrop"

android:transitionName="gameappImage"

android:src="@drawable/action"/>

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

@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:

http://www.polymer-project.org/docs/elements/material.html

Material with Angular:

http://material.angularjs.org/

@Aerilys#HoloToMaterial

Conclusion

• Material Design is cool!

• Possibilité de l’appliquer

avant Android Lollipop

• … Et même sur d’autres

plateformes !

@YourTwitterHandle@YourTwitterHandle@Aerilys#HoloToMaterial

Q & A