Date post: | 18-Jul-2015 |
Category: |
Technology |
Upload: | quentin-sallat |
View: | 1,714 times |
Download: | 0 times |
@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