Filthy Rich Android Clients

2,236 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,236
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
33
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Filthy Rich Android Clients

  1. 1. Filthy Rich Android Clients Romain Guy UI Toolkit Engineer, Android Google www.devoxx.com
  2. 2. Overall Presentation Goal Learn how to apply Filthy Rich Clients techniques to the Android platform. www.devoxx.com
  3. 3. Speaker’s qualifications Romain works on the Android UI toolkit at Google Romain co-authored the book Filthy Rich Clients Romain enjoy writing Filthy Rich Client applications Romain knows how to use Keynote 3 www.devoxx.com
  4. 4. Filthy Rich Clients are not specific to any particular platform or software stack. The are a set of techniques applicable across many platforms and toolkits. Android is a modern mobile operating system offering advanced features for graphical effects. Let’s discover some of these features. www.devoxx.com
  5. 5. Agenda Architecture Graphics Animation Performance 5 www.devoxx.com
  6. 6. Agenda Architecture Graphics Animation Performance 6 www.devoxx.com
  7. 7. Glossary Canvas: 2D drawing context Drawable: Abstract painter PixelFlinger: Rasterizer (OpenGL JIT for ARM) SGL: 2D drawing API (Skia) Surface: Drawing buffer SurfaceFlinger: Surface manager View: UI widget ViewGroup/Layout: UI widget container 7 www.devoxx.com
  8. 8. Architecture 8 www.devoxx.com
  9. 9. Architecture 9 www.devoxx.com
  10. 10. Architecture 10 www.devoxx.com
  11. 11. How to draw 1 public class CustomView extends View { 2 @Override 3 protected void onDraw(Canvas canvas) { 4 // draw stuff 5 } 6 } 11 www.devoxx.com
  12. 12. How to draw 1 public class CustomDrawable extends Drawable { 2 @Override 3 public void draw(Canvas canvas) { 4 // draw stuff 5 } 6 } 12 www.devoxx.com
  13. 13. Redrawing 13 www.devoxx.com
  14. 14. Drawing sequence 14 www.devoxx.com
  15. 15. Agenda Architecture Graphics Animation Performance 15 www.devoxx.com
  16. 16. DEMO 3D Reflection www.devoxx.com
  17. 17. Fundamentals Paints Gradients Transfer modes 3D Transformations Shadows 17 www.devoxx.com
  18. 18. About paints Canvas is mostly stateless Transformation matrix Paint contains the state Opacity, color and color filter Transfer mode, mask filter and shader Anti-aliasing, filtering and dithering Stroke and fill 18 www.devoxx.com
  19. 19. DEMO Color filter in Home Screen transfer mode in Shelves Faded edges in lists www.devoxx.com
  20. 20. Gradients Shader Horizontal span of colors LinearGradient RadialGradient SweepGradient 20 www.devoxx.com
  21. 21. Gradients 1 Paint mPaint = new Paint(); 2 mPaint.setShader(new LinearGradient( 3 0, 0, 0, 20.0f, 0xFF000000, 0, 4 TileMode.CLAMP)); 5 6 // in onDraw(Canvas) 7 canvas.drawRect(0.0f, 0.0f, 8 20.0f, 20.0f, mPaint); 21 www.devoxx.com
  22. 22. Transfer modes In Java2D, AlphaComposite Does more Modes Porter-Duff (SrcOver, Atop, DstOut, etc.) Color blending (Screen, Darken, Multiply, etc.) 22 www.devoxx.com
  23. 23. Transfer modes 1 Shader gradientShader = new LinearGradient(0, 0, 0, 1, 2 0xFF000000, 0, TileMode.CLAMP); 3 4 Shader bitmapShader = new BitmapShader(mBitmap, 5 TileMode.CLAMP, TileMode.CLAMP); 6 7 Shader composeShader = new ComposeShader( 8 bitmapShader, gradientShader, 9 new PorterDuffXfermode(Mode.DST_OUT)); 10 11 Paint mPaint = new Paint(); 12 mPaint.setShader(composeShader); 23 www.devoxx.com
  24. 24. 3D transformations 2D Canvas transformations scale(), translate(), rotate() Canvas uses a 4x4 transformation matrix 3D transformations Use android.graphics.Camera 24 www.devoxx.com
  25. 25. 3D transformations 1 Camera mCamera = new Camera(); 2 // Z translation 3 mCamera.translate(0.0f, 0.0f, 350.0f); 4 // rotation around the Y axis in degrees 5 mCamera.rotateY(45); 6 7 // in onDraw(Canvas) 8 canvas.save(); 9 canvas.concat(mCamera.getMatrix()); 10 canvas.drawBitmap(bitmap, 0.0f, 0.0f, null); 11 canvas.restore(); 25 www.devoxx.com
  26. 26. DEMO 3D transition www.devoxx.com
  27. 27. Shadows 1 Paint mShadow = new Paint(); 2 // radius=10, y-offset=2, color=black 3 mShadow.setShadowLayer(10.0f, 0.0f, 2.0f, 4 0xFF000000); 5 6 // in onDraw(Canvas) 7 canvas.drawBitmap(bitmap, 0.0f, 0.0f, 8 mShadow); 27 www.devoxx.com
  28. 28. Agenda Architecture Graphics Animation Performance 28 www.devoxx.com
  29. 29. Animation Why? Better visual feedback UI appears more responsive How? Animation LayoutAnimation 29 www.devoxx.com
  30. 30. Bring life to your application Life is restless Transitions, highlights, progress, motion, etc. Animate changes Adding/removing views Keep animations short and simple 30 www.devoxx.com
  31. 31. Animation features Start delay Start time Duration Repeat mode Repeat count Interpolation Fill before/after Defined in XML or code 31 www.devoxx.com
  32. 32. Inside animations Subclass of Animation Tied to a View View.setAnimation()/startAnimation() Not driven by a timer But time driven Driven by the drawing code View.getDrawingTime() 32 www.devoxx.com
  33. 33. Inside animations Fixed set of animated properties AlphaAnimation RotateAnimation ScaleAnimation TranslateAnimation View itself is not animated Only a bitmap copy is Drawing cache API 33 www.devoxx.com
  34. 34. DEMO Animation in Home Animation in Shelves www.devoxx.com
  35. 35. Defining the animation res/anim/slide_in.xml 1 <set xmlns:android="http://schemas.android.com/apk/res/android"> 2 <translate 3 android:fromYDelta="0" 4 android:toYDelta="100%" 5 android:duration="200" /> 6 <alpha 7 android:fromAlpha="1.0" 8 android:toAlpha="0.0" 9 android:duration="200" /> 10 </set> 35 www.devoxx.com
  36. 36. Playing the animation 1 Animation animation; 2 animation = AnimationUtils.loadAnimation( 3 context, R.anim.slide_in); 4 view.startAnimation(animation); 36 www.devoxx.com
  37. 37. Layout animations Apply to a ViewGroup’s children One animation Each child has the same animation Each child has a different start delay Layout animation controller Defines the start delay for each child Based on the index, position, column, row, etc. 37 www.devoxx.com
  38. 38. DEMO Layout animations www.devoxx.com
  39. 39. Defining the layout animation res/anim/layout_fade 1 <gridLayoutAnimation 2 android:columnDelay="50%" 3 android:directionPriority="row" 4 android:direction="right_to_left|bottom_to_top" 5 android:animation="@anim/fade" /> 39 www.devoxx.com
  40. 40. Playing the layout animation 1 <GridView 2 android:layoutAnimation="@anim/layout_fade" 3 4 android:layout_width="fill_parent" 5 android:layout_height="fill_parent"/> 40 www.devoxx.com
  41. 41. Transitions Long operations Long-press for contextual actions Changes Avoid jarring effect TransitionDrawable Contains 2 drawables Fade between them 41 www.devoxx.com
  42. 42. Defining a transition res/drawable/transition 1 <transition> 2 <item android:drawable="@drawable/start" /> 3 <item android:drawable="@drawable/end" /> 4 </transition> 42 www.devoxx.com
  43. 43. Playing a transition 1 TransitionDrawable drawable; 2 drawable = getDrawable(R.drawable.transition); 3 view.setBackgroundDrawable(drawable); 4 drawable.startTransition(1000); 43 www.devoxx.com
  44. 44. DEMO Transition in Home Transition in Shelves www.devoxx.com
  45. 45. Agenda Architecture Graphics Animation Performance 45 www.devoxx.com
  46. 46. Performance G1 hardware ~384 Mhz CPU 16 MB of RAM per process ATI Imageon GPU Interpreted VM Simple Garbage Collector SGL is not hardware accelerated Native code is not supported (yet) 46 www.devoxx.com
  47. 47. General optimizations Do not allocate at drawing time Avoid method calls Especially interface calls Avoid invalidate() Invalidate only what you need invalidate(left, top, right, bottom) Flatten the view hierarchy 47 www.devoxx.com
  48. 48. DEMO HierarchyViewer DDMS www.devoxx.com
  49. 49. Bitmaps Drawable stretch bitmaps Size your bitmap accordingly Bitmap.createScaledBitmap() BitmapFactory.Options.inSampleSize Dithering at drawing time is costly Pre-dither bitmaps (Photoshop plugin) BitmapFactory.Options.inDither 49 www.devoxx.com
  50. 50. Backgrounds Remove unnecessary backgrounds No “opaque view” optimization getWindow().setBackgroundDrawable(null) For instance: Home, Google Maps, Shelves Prefer ColorDrawable 50 www.devoxx.com
  51. 51. DEMO Home Maps Shelves www.devoxx.com
  52. 52. Drawing cache Intermediate bitmap Special API View.setDrawingCacheEnabled() View.buildDrawingCache() View.getDrawingCache() Sometimes managed automatically ViewGroup (animations) ListView (scrolling) 52 www.devoxx.com
  53. 53. DEMO Home ListView www.devoxx.com
  54. 54. Concluding statement Filthy Rich Clients are possible on today’s mobile devices. Powerful APIs and hardware open new possibilities that have barely been explored. www.devoxx.com
  55. 55. Q&A romainguy@android.com www.devoxx.com
  56. 56. Thanks for your attention! http://www.android.com http://source.android.com http://code.google.com/android www.devoxx.com

×