$30 off During Our Annual Pro Sale. View Details »

Tips & Tricks to spice up your Android app

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.

Jérémie Laval

April 17, 2013
Tweet

More Decks by Jérémie Laval

Other Decks in Technology

Transcript

  1. Jérémie Laval
    Happy Hacker
    Xamarin
    [email protected]
    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