Tips & Tricks to spice up your Android app

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.

Transcript

1. Jérémie Laval
   Happy Hacker
   Xamarin
   jeremie.laval@xamarin.com
   Tips & Tricks to Spice Up
   Your Android App
   

   View Slide

2. Spice-Up Tricks
   

   View Slide

3. ListView Tricks
   

   View Slide

4. Why ListView? Ubiquity.
   

   View Slide

5. Why ListView? Ubiquity.
   

   View Slide

6. Why ListView? Ubiquity.
   

   View Slide

7. Why ListView? Ubiquity.
   

   View Slide

8. From Basic ListView…
   Boring
   

   View Slide

9. … to Complete App
   

   View Slide

10. Let’s Build This
    

    View Slide

11. 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
    

    View Slide

12. The Basics
    

    View Slide

13. DEMO
    

    View Slide

14. ListFragment Customization
    

    View Slide

15. 01
    02
    03
    04
    05
    06
    07
    08
    09
    10
    11
    12
    13
    14
    15
    16
    ListFragment Customization
    
           android:orientation="vertical"
           android:layout_width="fill_parent"
           android:layout_height="fill_parent">
                           android:orientation="horizontal"
                   android:id="@id/android:empty">
                   
                   
           
                           android:id="@id/android:list"
                   android:layout_weight="1"  />
    

    View Slide

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

    View Slide

17. 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;
    }
    

    View Slide

18. 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);
            });
        });
    }
    

    View Slide

19. The Pretty
    

    View Slide

20. DEMO
    

    View Slide

21. 01
    02
    03
    04
    05
    06
    07
    08
    09
    10
    11
    12
    13
    14
    15
    Prettify Your List Items
    
                 android:shape="rectangle">
           
                             android:startColor="@android:color/transparent"
                     android:endColor="#10000000"
                     android:type="linear"
                     android:centerColor="@android:color/transparent"
                     android:centerY="0.8"
                     android:angle="270"  />
                             android:width="1dp"
                     android:color="#D0D0D0"  />
    
    

    View Slide

22. Prettify Your List Items
    
    

    View Slide

23. 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);
       }
    }
    

    View Slide

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

    View Slide

25. 01
    02
    03
    04
    05
    06
    07
    08
    09
    10
    11
    12
    13
    14
    15
    16
    Easy Inset Effects
           android:text="White-­‐based  inset"
           android:shadowColor="@android:color/white"
           android:shadowDx="1"
           android:shadowDy="1"
           android:shadowRadius="0.1"  />
           android:text="Black-­‐based  inset"
           android:shadowColor="@android:color/black"
           android:shadowDx="-­‐1"
           android:shadowDy="-­‐1"
           android:shadowRadius="0.1"  />
    

    View Slide

26. Easy Inset Effects
    

    View Slide

27. The Gimmick
    

    View Slide

28. The Animated Stuff
    

    View Slide

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

    View Slide

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

    View Slide

31. 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);
           });
       }
    }
    

    View Slide

32. 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;
    }
    

    View Slide

33. 01
    02
    03
    04
    05
    06
    07
    08
    09
    10
    11
    12
    13
    Automatic Layout Transitions
           android:orientation="vertical"
           android:id="@+id/AnimatedLayout"
           android:animateLayoutChanges="true"
           android:minHeight="49dp"
           android:layout_height="wrap_content">
           
                                               android:layout_height="1px"  />
    
    

    View Slide

34. 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;
    }
    

    View Slide

35. Last Call
    

    View Slide

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

    View Slide

37. Thanks!
    /garuma/EvolveDemo
    

    View Slide