Tips & Tricks to spice up your Android app

979 views

Published on

We will explore how Android (especially in recent versions) lets you develop awesomer apps and how you can tap into that potential with Xamarin.Android. Topics covered will include graphics, user interaction, best practices and animations.

Published in: Technology, Art & Photos
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
979
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
5
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Tips & Tricks to spice up your Android app

  1. 1. Jérémie LavalHappy HackerXamarinjeremie.laval@xamarin.comTips & Tricks to Spice UpYour Android App
  2. 2. Spice-Up Tricks
  3. 3. ListView Tricks
  4. 4. Why ListView? Ubiquity.
  5. 5. Why ListView? Ubiquity.
  6. 6. Why ListView? Ubiquity.
  7. 7. Why ListView? Ubiquity.
  8. 8. From Basic ListView…Boring
  9. 9. … to Complete App
  10. 10. Let’s Build This
  11. 11. Breaking Things Up1. The BasicsLoading and data fetching2. The PrettyImproving the look and feel3. The GimmickSpicing up the result
  12. 12. The Basics
  13. 13. DEMO
  14. 14. ListFragment Customization
  15. 15. 01020304050607080910111213141516ListFragment Customization<?xml  version="1.0"  encoding="utf-­‐8"?><LinearLayout  xmlns:android="http://schemas.android.com/apk/res/android"        android:orientation="vertical"        android:layout_width="fill_parent"        android:layout_height="fill_parent">        <LinearLayout                android:orientation="horizontal"                android:id="@id/android:empty">                <ProgressBar  />                <TextView  android:text="Loading..."  />        </LinearLayout>        <ListView                android:id="@id/android:list"                android:layout_weight="1"  /></LinearLayout
  16. 16. ...LulzDogLulzCat......Warning! Async Loadingrequestcallback
  17. 17. 0102030405060708091011121314Async Loadingpublic  override  View  GetView  (int  position,  View  convertView,  ViewGroup  parent){   MyCustomView  view  =  EnsureView  (convertView);   var  versionNumber  =  Interlocked.Increment  (ref  view.VersionNumber);   var  item  =  events  [position];   var  avatarView  =  view.FindViewById<ImageView>  (...);   avatarView.SetImageDrawable  (EmptyAvatarDrawable);   FetchAvatar  (view,  avatarView,  item,  versionNumber);   return  view;}
  18. 18. 010203040506070809101112131415Async Loading (cont)var  imageCache  =  new  ConcurrentDictionary<string,  Task<Bitmap>>  ();void  FetchAvatar  (...  view,  ...  avatarView,  string  url,  long  versionNumber){   var  bmp  =  imageCache.GetOrAdd  (url,  u  =>  Task.Run  (()  =>  DownloadData  (u)));   if  (bmp.IsCompleted  &&  bmp.Result  !=  null)     avatarView.SetImage  (bmp.Result);   else     bmp.ContinueWith  (t  =>  {       if  (view.VersionNumber  ==  versionNumber  &&  t.Result  !=  null)         handler.Post  (()  =>  {           if  (view.VersionNumber  ==  versionNumber)             avatarView.SetImageAnimated  (t.Result);         });     });}
  19. 19. The Pretty
  20. 20. DEMO
  21. 21. 010203040506070809101112131415Prettify Your List Items<?xml  version="1.0"  encoding="utf-­‐8"?><shape  xmlns:android="http://schemas.android.com/apk/res/android"              android:shape="rectangle">        <corners  android:radius="3dp"  />        <gradient                  android:startColor="@android:color/transparent"                  android:endColor="#10000000"                  android:type="linear"                  android:centerColor="@android:color/transparent"                  android:centerY="0.8"                  android:angle="270"  />        <stroke                  android:width="1dp"                  android:color="#D0D0D0"  /></shape>
  22. 22. Prettify Your List Items<FrameLayout  android:background="@drawable/list_item_box"  />
  23. 23. 010203040506070809101112131415Custom Drawablepublic  class  RoundCornersDrawable  :  Drawable{    public  RoundCornersDrawable  (Bitmap  bitmap,  float  cornerRadius  =  5)    {        this.cornerRadius  =  cornerRadius;        this.paint  =  new  Paint  ()  {  AntiAlias  =  true  };        var  tileMode  =  Shader.TileMode.Clamp;        paint.SetShader  (new  BitmapShader  (bitmap,  tileMode,  tileMode));    }    public  override  void  Draw  (Canvas  canvas)    {        canvas.DrawRoundRect  (rect,  cornerRadius,  cornerRadius,  paint);    }}
  24. 24. Custom DrawableimageView.SetImageDrawable  (new  RoundCornersDrawable  (glacierBmp,  cornerRadius:  10))
  25. 25. 01020304050607080910111213141516Easy Inset Effects<TextView        android:text="White-­‐based  inset"        android:shadowColor="@android:color/white"        android:shadowDx="1"        android:shadowDy="1"        android:shadowRadius="0.1"  /><TextView        android:text="Black-­‐based  inset"        android:shadowColor="@android:color/black"        android:shadowDx="-­‐1"        android:shadowDy="-­‐1"        android:shadowRadius="0.1"  />
  26. 26. Easy Inset Effects
  27. 27. The Gimmick
  28. 28. The Animated Stuff
  29. 29. “The best animations are the ones your usersdon’t notice because they feel natural”
  30. 30. - Jérémie Laval“The best animations are the ones your usersdon’t notice because they feel natural”
  31. 31. 0102030405060708091011121314Fade ImageViewpublic  static  class  ImageViewExtensions{    public  static  void  SetImageDrawableAnimated  (this  ImageView  view,                                                                                                  Drawable  drawable)    {        var  lng  =  view.Resources.GetInteger  (ConfigLongAnimTime);        var  med  =  view.Resources.GetInteger  (ConfigMediumAnimTime);        view.Animate  ().Alpha  (0).SetDuration  (med).WithEndAction  (()  =>  {            view.SetImageDrawable  (drawable);            view.Animate  ().Alpha  (1).SetDuration  (lng);        });    }}
  32. 32. 01020304050607080910111213ListView Item Animationspublic  override  View  GetView  (int  position,  View  convertView,  ViewGroup  parent){   var  view  =  EnsureView  (convertView);   var  item  =  events  [position];   if  (!item.Consumed)  {     item.Consumed  =  true;     var  animation  =  AnimationUtils.MakeInChildBottomAnimation  (context);     view.StartAnimation  (animation);   }   return  view;}
  33. 33. 01020304050607080910111213Automatic Layout Transitions<LinearLayout        android:orientation="vertical"        android:id="@+id/AnimatedLayout"        android:animateLayoutChanges="true"        android:minHeight="49dp"        android:layout_height="wrap_content">        <LinearLayout  android:id="@+id/PresentationLayout"  />        <LinearLayout  android:id="@+id/ActionLayout"                                    android:layout_height="1px"  /></LinearLayout>
  34. 34. 0102030405060708091011121314Automatic Layout Transitionsif  (presentationLayout.Visibility  ==  ViewStates.Gone)  {   presentationLayout.Visibility  =  ViewStates.Visible;   var  lp  =  new  LayoutParams  (actionLayout.LayoutParameters)  {     Height  =  1   };   actionLayout.LayoutParameters  =  lp;}  else  {   var  lp  =  new  LayoutParams  (actionLayout.LayoutParameters)  {     Height  =  ViewGroup.LayoutParams.WrapContent,     Gravity  =  GravityFlags.Center   };   actionLayout.LayoutParameters  =  lp;   presentationLayout.Visibility  =  ViewStates.Gone;}
  35. 35. Last Call
  36. 36. developers.android.com/designA worthy read for every app developer
  37. 37. Thanks!/garuma/EvolveDemo

×