Your SlideShare is downloading. ×
Filthy Rich Android Clients
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Filthy Rich Android Clients

1,823
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
1,823
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
29
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Filthy Rich Android Clients Romain Guy UI Toolkit Engineer, Android Google www.devoxx.com
  • 2. Overall Presentation Goal Learn how to apply Filthy Rich Clients techniques to the Android platform. www.devoxx.com
  • 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. 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. Agenda Architecture Graphics Animation Performance 5 www.devoxx.com
  • 6. Agenda Architecture Graphics Animation Performance 6 www.devoxx.com
  • 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. Architecture 8 www.devoxx.com
  • 9. Architecture 9 www.devoxx.com
  • 10. Architecture 10 www.devoxx.com
  • 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. 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. Redrawing 13 www.devoxx.com
  • 14. Drawing sequence 14 www.devoxx.com
  • 15. Agenda Architecture Graphics Animation Performance 15 www.devoxx.com
  • 16. DEMO 3D Reflection www.devoxx.com
  • 17. Fundamentals Paints Gradients Transfer modes 3D Transformations Shadows 17 www.devoxx.com
  • 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. DEMO Color filter in Home Screen transfer mode in Shelves Faded edges in lists www.devoxx.com
  • 20. Gradients Shader Horizontal span of colors LinearGradient RadialGradient SweepGradient 20 www.devoxx.com
  • 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. 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. 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. 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. 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. DEMO 3D transition www.devoxx.com
  • 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. Agenda Architecture Graphics Animation Performance 28 www.devoxx.com
  • 29. Animation Why? Better visual feedback UI appears more responsive How? Animation LayoutAnimation 29 www.devoxx.com
  • 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. 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. 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. 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. DEMO Animation in Home Animation in Shelves www.devoxx.com
  • 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. 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. 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. DEMO Layout animations www.devoxx.com
  • 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. 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. Transitions Long operations Long-press for contextual actions Changes Avoid jarring effect TransitionDrawable Contains 2 drawables Fade between them 41 www.devoxx.com
  • 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. 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. DEMO Transition in Home Transition in Shelves www.devoxx.com
  • 45. Agenda Architecture Graphics Animation Performance 45 www.devoxx.com
  • 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. 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. DEMO HierarchyViewer DDMS www.devoxx.com
  • 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. Backgrounds Remove unnecessary backgrounds No “opaque view” optimization getWindow().setBackgroundDrawable(null) For instance: Home, Google Maps, Shelves Prefer ColorDrawable 50 www.devoxx.com
  • 51. DEMO Home Maps Shelves www.devoxx.com
  • 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. DEMO Home ListView www.devoxx.com
  • 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. Q&A romainguy@android.com www.devoxx.com
  • 56. Thanks for your attention! http://www.android.com http://source.android.com http://code.google.com/android www.devoxx.com