Beautiful Android Apps
James Montemagno / Jérémie Laval
Android Fanboys
Slide 2
Slide 2 text
James
Montemagno
Developer Evangelist, Xamarin
[email protected]
motzcod.es
@JamesMontemagno
Jérémie
Laval
Android Designer Lead, Xamarin
[email protected]
neteril.org
@jeremie_laval
Slide 3
Slide 3 text
Given an app, in average
25% of its users open it
once and never return.
SOURCE: “Principles of Mobile App Design: Delight Users and Drive Conversions” March 2016. ThinkWithGoogle.com
Slide 4
Slide 4 text
The average person spends
80% of their time on mobile
devices using only 3 apps
SOURCE: “Life and death in the App Store” March 2016. The Verge
80%
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
AppCompat Theme
Slide 11
Slide 11 text
Let’s take a look
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
TextInputLayout
Slide 14
Slide 14 text
FAB – Floating Action Button
Slide 15
Slide 15 text
CardView
Slide 16
Slide 16 text
NavigationView
Slide 17
Slide 17 text
Headers
Any Layout You Want
Slide 18
Slide 18 text
NavigationView - MenuItem
Slide 19
Slide 19 text
MenuItem - Grouped
Slide 20
Slide 20 text
Snackbar
Slide 21
Slide 21 text
Alert Dialogs
Slide 22
Slide 22 text
Alerts, toast, and snacks… oh my!
• Interruptive
• Up to two actions
• Use for CRITICAL moments
• Easily overlooked
• No actions
• Use for simple alerts
• Pretty awesome
• One action
• Use for everything else
Slide 23
Slide 23 text
And So Much More!
Slide 24
Slide 24 text
A Hint
Of Motion
Slide 25
Slide 25 text
No content
Slide 26
Slide 26 text
www.google.com/design/spec/animation/
Slide 27
Slide 27 text
Our UIs have never been so reactive
Slide 28
Slide 28 text
Coordinator Layout
Animated Vector Drawable
Slide 29
Slide 29 text
Support compatibility
support- design
vector-drawable
animated-vector-drawable
X.A.Support. Design
Vector.Drawable
Animated.Vector.Drawable
Slide 30
Slide 30 text
Coordinator
Layout
Slide 31
Slide 31 text
Coordinator Layout
New widget in support-design package
Container similar FrameLayout
Meant as a top-level element
Behaviors
Attach piece of code to views
Proxy touch, layout, scroll, … calls
View dependency system
Slide 36
Slide 36 text
How To Use
Create
Instantiate
public class CustomBehavior
: CoordinatorLayout.Behavior
var lp = (CoordinatorLayout.LayoutParams)fab.LayoutParameters;
lp.Behavior = new CustomBehavior ();
fab.LayoutParameters = lp;
Slide 37
Slide 37 text
ANIMATED VECTOR
DRAWABLE
Animated
Vector
Drawable
Slide 38
Slide 38 text
Animated Vector Drawable
Backported in new support-animated-vector-drawable
Based on density-independent VectorDrawable
Animate individual pieces with ObjectAnimator
Slide 39
Slide 39 text
3 Key Parts – A Vector File
Slide 40
Slide 40 text
http://inloop.github.io/svg2android/
Slide 41
Slide 41 text
3 Key Parts – An Object Animator
Slide 42
Slide 42 text
3 Key Parts – Animated Vector
Slide 43
Slide 43 text
How To Use
Static scalable images Infinite spinners State transitions (cheat)
(g.co/design/icons)
Slide 44
Slide 44 text
DEMO TIME!
Slide 45
Slide 45 text
A Key Affair
Slide 46
Slide 46 text
No content
Slide 47
Slide 47 text
No content
Slide 48
Slide 48 text
Tin foil
Solar Panel
Engine
Buzzer
Phone Flashlight
Slide 49
Slide 49 text
There should be
an app for this
Slide 50
Slide 50 text
Goal: Add Material Motion
Use standard swipe-to-dismiss pattern
Apply curved motion principles
Bring joy to this sad Floating Action Button
CoordinatorLayout
Animated Vector
Slide 51
Slide 51 text
DEMO
Slide 52
Slide 52 text
No content
Slide 53
Slide 53 text
What about Xamarin.Forms?
Slide 54
Slide 54 text
AppCompat.Forms
• Same theme
• Same attributes
• New Activity Base
• FormsAppCompatActivity
• 2 new resources
• Tabs & Toolbar
Slide 55
Slide 55 text
Update your Activity
Slide 56
Slide 56 text
CardView
Slide 57
Slide 57 text
FAB
Checkout my GitHub
https://github.com/jamesmontemagno/FloatingActionButton-for-Xamarin.Android
Slide 58
Slide 58 text
Animations
Slide 59
Slide 59 text
No content
Slide 60
Slide 60 text
Get the codes
• Buzzeroid app
• https://github.com/garuma/Buzzeroid
• Monkeys App:
• https://github.com/jamesmontemagno/MonkeysApp-AppIndexing
• Evolve 2016 App:
• Check the blog later this week!
• Follow @jeremie_laval and @JamesMontemagno
for more resource links!