Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Beautiful Android Apps

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.

Jérémie Laval

April 28, 2016

More Decks by Jérémie Laval

Other Decks in Technology


  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%
  5. None
  6. None
  7. None
  8. None
  9. None
  10. AppCompat Theme

  11. Let’s take a look

  12. None
  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

  25. None
  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

  46. None
  47. None
  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

  52. None
  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

  59. None
  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!