Beautiful Android Apps

Building beautiful Android apps doesn't have to be hard. Since its original induction, Material Design (MD) has taken the Android world by storm, generating rapid adoption throughout the dev community. A lot has changed from the original material design specification, with the updates to the Android Support v7 AppCompat library and intro of the Support Design library, MD themes, controls, and features now available on all devices running Android. This session will show you how to transform your app into a stunning work of Material art, and even how to utilize MD in your Xamarin.Forms apps.

Transcript

1. Beautiful Android Apps James Montemagno / Jérémie Laval Android Fanboys
2. James Montemagno Developer Evangelist, Xamarin james@xamarin.com motzcod.es @JamesMontemagno Jérémie Laval Android Designer Lead, Xamarin jeremie.laval@xamarin.com neteril.org @jeremie_laval
3. 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
4. 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%
10. AppCompat Theme
11. Let’s take a look
13. TextInputLayout
14. FAB – Floating Action Button
15. CardView
16. NavigationView
17. Headers Any Layout You Want
18. NavigationView - MenuItem
19. MenuItem - Grouped
20. Snackbar
21. Alert Dialogs
22. 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
23. And So Much More!
24. A Hint Of Motion
26. www.google.com/design/spec/animation/
27. Our UIs have never been so reactive
28. Coordinator Layout Animated Vector Drawable
29. Support compatibility support- design vector-drawable animated-vector-drawable X.A.Support. Design Vector.Drawable Animated.Vector.Drawable
30. Coordinator Layout
31. Coordinator Layout New widget in support-design package Container similar FrameLayout Meant as a top-level element
32. Coordinator Layout <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/main_content" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.design.widget.AppBarLayout> <android.support.v7.widget.Toolbar /> </android.support.design.widget.AppBarLayout> <android.support.v4.view.ViewPager /> <android.support.design.widget.FloatingActionButton /> </android.support.design.widget.CoordinatorLayout>
33. CoordinatorLayout Interactions Decor Positioning
34. Interactions Coordinator Layout touch scroll fling
35. Behaviors Attach piece of code to views Proxy touch, layout, scroll, … calls View dependency system
36. How To Use Create Instantiate public class CustomBehavior : CoordinatorLayout.Behavior <android.designer.support.FloatingActionButton app:layout_behavior="namespace.MyCustomBehavior" /> var lp = (CoordinatorLayout.LayoutParams)fab.LayoutParameters; lp.Behavior = new CustomBehavior (); fab.LayoutParameters = lp;
37. ANIMATED VECTOR DRAWABLE Animated Vector Drawable
38. Animated Vector Drawable Backported in new support-animated-vector-drawable Based on density-independent VectorDrawable Animate individual pieces with ObjectAnimator
39. 3 Key Parts – A Vector File <vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="24dp" android:height="24dp" android:viewportWidth="24" android:viewportHeight="24"> <path android:name="buzzer_wall" android:fillColor="#ffffff" android:pathData="M 20 2 H 22 V 22 H 20 V 2 Z" /> <group android:name="buzzer_button_grp" android:pivotX="21"> <path android:fillColor="#ffffff" android:pathData="M 15 5.5 H 21 V 18.5 H 15 V 5.5 Z" /> </group> <group android:name="finger_grp"> <path android:name="finger" android:fillColor="#ffffff" android:pathData="M13,9.828c0,-1.802 -1.913,-1.828 -4.273,-1.828c-3.091,0 - 6.727,0 -6.727,0l0,8.556c0,0 1.186,0 4.275,0c2.542,0 6.725,-2.691 6.725,-6.728Z" /> </group> </vector>
40. http://inloop.github.io/svg2android/
41. 3 Key Parts – An Object Animator <set xmlns:android="http://schemas.android.com/apk/res/android" android:ordering="together"> <objectAnimator android:duration="400" android:propertyName="scaleX" android:valueFrom="1" android:startOffset="450" android:valueTo="0.0001" /> <objectAnimator android:duration="400" android:propertyName="scaleY" android:valueFrom="1" android:startOffset="450" android:valueTo="0.0001" /> </set>
42. 3 Key Parts – Animated Vector <animated-vector xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/buzzer_animation_base_vector" > <target android:name="finger_grp" android:animation="@anim/buzzer_finger_move" /> <target android:name="buzzer_button_grp" android:animation="@anim/buzzer_button_compress" /> <target android:name="global_buzzer_group" android:animation="@anim/buzzer_fade_out" /> </animated-vector>
43. How To Use Static scalable images Infinite spinners State transitions (cheat) (g.co/design/icons)
44. DEMO TIME!
45. A Key Affair
48. Tin foil Solar Panel Engine Buzzer Phone Flashlight
49. There should be an app for this
50. 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
51. DEMO
53. What about Xamarin.Forms?
54. AppCompat.Forms • Same theme • Same attributes • New Activity Base • FormsAppCompatActivity • 2 new resources • Tabs & Toolbar
55. Update your Activity
56. CardView
57. FAB Checkout my GitHub https://github.com/jamesmontemagno/FloatingActionButton-for-Xamarin.Android
58. Animations
60. 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!
61. Thank you!