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. 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
  2. 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%
  3. 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
  4. Behaviors Attach piece of code to views Proxy touch, layout,

    scroll, … calls View dependency system
  5. 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;
  6. 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>
  7. 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>
  8. 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>
  9. 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
  10. AppCompat.Forms • Same theme • Same attributes • New Activity

    Base • FormsAppCompatActivity • 2 new resources • Tabs & Toolbar
  11. 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!