Jérémie Laval Happy Hacker Xamarin [email protected] Tips & Tricks to Spice Up Your Android App 

Spice-Up Tricks 

ListView Tricks 

Why ListView? Ubiquity. 

Why ListView? Ubiquity. 

Why ListView? Ubiquity. 

Why ListView? Ubiquity. 

From Basic ListView… Boring 

… to Complete App 

Let’s Build This 

Breaking Things Up 1. The Basics Loading and data fetching 2. The Pretty Improving the look and feel 3. The Gimmick Spicing up the result 

The Basics 

DEMO 

ListFragment Customization 

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 ListFragment Customization                                                        

... LulzDog LulzCat ... ... Warning! Async Loading request callback 

01 02 03 04 05 06 07 08 09 10 11 12 13 14 Async Loading public  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  (...);   avatarView.SetImageDrawable  (EmptyAvatarDrawable);   FetchAvatar  (view,  avatarView,  item,  versionNumber);   return  view; } 

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 Async Loading (cont) var  imageCache  =  new  ConcurrentDictionary>  (); 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);         });     }); } 

The Pretty 

DEMO 

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 Prettify Your List Items                         

Prettify Your List Items 

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 Custom Drawable public  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);    } } 

Custom Drawable imageView.SetImageDrawable  (new  RoundCornersDrawable  (glacierBmp,  cornerRadius:  10)) 

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 Easy Inset Effects 

Easy Inset Effects 

The Gimmick 

The Animated Stuff 

“The best animations are the ones your users don’t notice because they feel natural” 

- Jérémie Laval “The best animations are the ones your users don’t notice because they feel natural” 

01 02 03 04 05 06 07 08 09 10 11 12 13 14 Fade ImageView public  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);        });    } } 

01 02 03 04 05 06 07 08 09 10 11 12 13 ListView Item Animations public  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; } 

01 02 03 04 05 06 07 08 09 10 11 12 13 Automatic Layout Transitions                 

01 02 03 04 05 06 07 08 09 10 11 12 13 14 Automatic Layout Transitions if  (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; } 

Last Call 

developers.android.com/design A worthy read for every app developer 

Thanks! /garuma/EvolveDemo