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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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%
   

   View Slide

5. View Slide

6. View Slide

7. View Slide

8. View Slide

9. View Slide

10. AppCompat Theme
    

    View Slide

11. Let’s take a look
    

    View Slide

12. View Slide

13. TextInputLayout
    

    View Slide

14. FAB – Floating Action Button
    

    View Slide

15. CardView
    

    View Slide

16. NavigationView
    

    View Slide

17. Headers
    Any Layout You Want
    

    View Slide

18. NavigationView - MenuItem
    

    View Slide

19. MenuItem - Grouped
    

    View Slide

20. Snackbar
    

    View Slide

21. Alert Dialogs
    

    View Slide

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
    

    View Slide

23. And So Much More!
    

    View Slide

24. A Hint
    Of Motion
    

    View Slide

25. View Slide

26. www.google.com/design/spec/animation/
    

    View Slide

27. Our UIs have never been so reactive
    

    View Slide

28. Coordinator Layout
    Animated Vector Drawable
    

    View Slide

29. Support compatibility
    support- design
    vector-drawable
    animated-vector-drawable
    X.A.Support. Design
    Vector.Drawable
    Animated.Vector.Drawable
    

    View Slide

30. Coordinator
    Layout
    

    View Slide

31. Coordinator Layout
    New widget in support-design package
    Container similar FrameLayout
    Meant as a top-level element
    

    View Slide

32. Coordinator Layout
    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">
    
    
    
    
    
    
    

    View Slide

33. CoordinatorLayout
    Interactions
    Decor Positioning
    

    View Slide

34. Interactions
    Coordinator Layout
    touch
    scroll
    fling
    

    View Slide

35. Behaviors
    Attach piece of code to views
    Proxy touch, layout, scroll, … calls
    View dependency system
    

    View Slide

36. How To Use
    Create
    Instantiate
    public class CustomBehavior
    : CoordinatorLayout.Behavior
    app:layout_behavior="namespace.MyCustomBehavior" />
    var lp = (CoordinatorLayout.LayoutParams)fab.LayoutParameters;
    lp.Behavior = new CustomBehavior ();
    fab.LayoutParameters = lp;
    

    View Slide

37. ANIMATED VECTOR
    DRAWABLE
    Animated
    Vector
    Drawable
    

    View Slide

38. Animated Vector Drawable
    Backported in new support-animated-vector-drawable
    Based on density-independent VectorDrawable
    Animate individual pieces with ObjectAnimator
    

    View Slide

39. 3 Key Parts – A Vector File
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24">
    android:fillColor="#ffffff"
    android:pathData="M 20 2 H 22 V 22 H 20 V 2 Z" />
    
    android:pathData="M 15 5.5 H 21 V 18.5 H 15 V 5.5 Z" />
    
    
    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" />
    
    
    

    View Slide

40. http://inloop.github.io/svg2android/
    

    View Slide

41. 3 Key Parts – An Object Animator
    android:ordering="together">
    android:duration="400"
    android:propertyName="scaleX"
    android:valueFrom="1"
    android:startOffset="450"
    android:valueTo="0.0001" />
    android:duration="400"
    android:propertyName="scaleY"
    android:valueFrom="1"
    android:startOffset="450"
    android:valueTo="0.0001" />
    
    

    View Slide

42. 3 Key Parts – Animated Vector
    android:drawable="@drawable/buzzer_animation_base_vector" >
    android:name="finger_grp"
    android:animation="@anim/buzzer_finger_move" />
    android:name="buzzer_button_grp"
    android:animation="@anim/buzzer_button_compress" />
    android:name="global_buzzer_group"
    android:animation="@anim/buzzer_fade_out" />
    
    

    View Slide

43. How To Use
    Static scalable images Infinite spinners State transitions (cheat)
    (g.co/design/icons)
    

    View Slide

44. DEMO TIME!
    

    View Slide

45. A Key Affair
    

    View Slide

46. View Slide

47. View Slide

48. Tin foil
    Solar Panel
    Engine
    Buzzer
    Phone Flashlight
    

    View Slide

49. There should be
    an app for this
    

    View Slide

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
    

    View Slide

51. DEMO
    

    View Slide

52. View Slide

53. What about Xamarin.Forms?
    

    View Slide

54. AppCompat.Forms
    • Same theme
    • Same attributes
    • New Activity Base
    • FormsAppCompatActivity
    • 2 new resources
    • Tabs & Toolbar
    

    View Slide

55. Update your Activity
    

    View Slide

56. CardView
    

    View Slide

57. FAB
    Checkout my GitHub
    https://github.com/jamesmontemagno/FloatingActionButton-for-Xamarin.Android
    

    View Slide

58. Animations
    

    View Slide

59. View Slide

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!
    

    View Slide

61. Thank you!
    

    View Slide