evovle 2016 - everyone can create beautiful apps with material design
TRANSCRIPT
Beautiful Android AppsJames Montemagno / Jérémie LavalAndroid Fanboys
JamesMontemagnoDeveloperEvangelist,Xamarin
@JamesMontemagno
JérémieLaval
AndroidDesignerLead,Xamarin
@jeremie_laval
On average 25% of users install and open an app once and never return.
SOURCE: “Principles of Mobile App Design” March 2016. ThinkWithGoogle.com
Users spend 80% of their time using only 3 apps
SOURCE: “Life and death in the App Store” March 2016. The Verge
80%
AppCompat Theme
TextInputLayout
FAB – Floating Action Button
CardView
NavigationView
Headers
Any Layout You Want
NavigationView - MenuItem
MenuItem - Grouped
Snackbar
Alert Dialogs
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
And So Much More!
A HintOf Motion
www.google.com/design/spec/animation/
Material UIs are reactive
A Key Affair
Tin foil
Solar Panel
Engine
BuzzerPhone Flashlight
Goal: Add Material Motion
Proper notification with swipe-to-dismiss
Apply curved motion principles
Bring joy to this sad Floating Action Button
DEMO
New support libraries
support- designvector-drawableanimated-vector-drawable
X.A.Support. DesignVector.DrawableAnimated.Vector.Drawable
Coordinator Layout
Animated Vector Drawable
Coordinator Layout
Coordinator Layout
New widget in support-design
Container similar to FrameLayout
Meant as a top-level element
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>
CoordinatorLayout
InteractionsDecor Positioning
Interactions
Coordinator Layout
touchscroll fling
Behaviors
Attach a piece of code to views
Proxy touch, layout, scroll, … calls
View dependency system
Swipe to Dismiss
public class NotificationBehavior : SwipeDismissBehavior, IOnDismissListener
{public NotificationBehavior (){
SetSwipeDirection (SwipeDismissBehavior.SwipeDirectionStartToEnd);SetDragDismissDistance (.98f);SetStartAlphaSwipeDistance (.1f);SetListener (this);
}
void IOnDismissListener.OnDismiss (View view){}
}
How To Use
Create
Instantiate
public class MyCustomBehavior: CoordinatorLayout.Behavior
<android.designer.support.FloatingActionButtonapp:layout_behavior="namespace.MyCustomBehavior" />
var lp = (CoordinatorLayout.LayoutParams)fab.LayoutParameters;lp.Behavior = new CustomBehavior ();fab.LayoutParameters = lp;
ANIMATED VECTOR DRAWABLE
AnimatedVectorDrawable
Animated Vector Drawable
Backported in animated-vector-drawable
Based on density-independent VectorDrawable
Animate individual pieces with ObjectAnimator
3 Key Parts – A Vector Drawable<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.8c0,-1.8 -1.9,-1.8 -4.2,-1.8" />
</group></vector>
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" />
<objectAnimatorandroid:duration="400"android:propertyName="scaleY"android:valueFrom="1"android:startOffset="450"android:valueTo="0.0001" />
</set>
3 Key Parts – Animated Vector
<animated-vector xmlns:android="..."android:drawable="@drawable/buzzer_animation_base_vector" ><target
android:name="finger_grp"android:animation="@anim/buzzer_finger_move" />
<targetandroid:name="buzzer_button_grp"android:animation="@anim/buzzer_button_compress" />
<targetandroid:name="global_buzzer_group"android:animation="@anim/buzzer_fade_out" />
</animated-vector>
How To Use
Static scalable images Infinite spinners State transitions (cheat)
(g.co/design/icons)
What about Xamarin.Forms?
AppCompat.Forms
• Same theme• Same attributes• New Activity Base• FormsAppCompatActivity
• 2 new resources• Tabs & Toolbar
Update your Activity
Animations
CardView
FAB + Anything else!
• Custom Renderer….• BUT WAIT• Embedded Native Control!
developer.xamarin.com/guides/xamarin-forms/user-interface/layouts/add-platform-controls/
Get the codes
• Buzzeroid apphttps://github.com/garuma/Buzzeroidhttps://github.com/garuma/BuzzerPi
• 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!
Thank you!