$30 off During Our Annual Pro Sale. View Details »

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
Tweet

More Decks by Jérémie Laval

Other Decks in Technology

Transcript

  1. Beautiful Android Apps
    James Montemagno / Jérémie Laval
    Android Fanboys

    View Slide

  2. James
    Montemagno
    Developer Evangelist, Xamarin
    [email protected]
    motzcod.es
    @JamesMontemagno
    Jérémie
    Laval
    Android Designer Lead, Xamarin
    [email protected]
    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