Your SlideShare is downloading. ×
Graphicsand animations devoxx2010 (1)
Graphicsand animations devoxx2010 (1)
Graphicsand animations devoxx2010 (1)
Graphicsand animations devoxx2010 (1)
Graphicsand animations devoxx2010 (1)
Graphicsand animations devoxx2010 (1)
Graphicsand animations devoxx2010 (1)
Graphicsand animations devoxx2010 (1)
Graphicsand animations devoxx2010 (1)
Graphicsand animations devoxx2010 (1)
Graphicsand animations devoxx2010 (1)
Graphicsand animations devoxx2010 (1)
Graphicsand animations devoxx2010 (1)
Graphicsand animations devoxx2010 (1)
Graphicsand animations devoxx2010 (1)
Graphicsand animations devoxx2010 (1)
Graphicsand animations devoxx2010 (1)
Graphicsand animations devoxx2010 (1)
Graphicsand animations devoxx2010 (1)
Graphicsand animations devoxx2010 (1)
Graphicsand animations devoxx2010 (1)
Graphicsand animations devoxx2010 (1)
Graphicsand animations devoxx2010 (1)
Graphicsand animations devoxx2010 (1)
Graphicsand animations devoxx2010 (1)
Graphicsand animations devoxx2010 (1)
Graphicsand animations devoxx2010 (1)
Graphicsand animations devoxx2010 (1)
Graphicsand animations devoxx2010 (1)
Graphicsand animations devoxx2010 (1)
Graphicsand animations devoxx2010 (1)
Graphicsand animations devoxx2010 (1)
Graphicsand animations devoxx2010 (1)
Graphicsand animations devoxx2010 (1)
Graphicsand animations devoxx2010 (1)
Graphicsand animations devoxx2010 (1)
Graphicsand animations devoxx2010 (1)
Graphicsand animations devoxx2010 (1)
Graphicsand animations devoxx2010 (1)
Graphicsand animations devoxx2010 (1)
Graphicsand animations devoxx2010 (1)
Graphicsand animations devoxx2010 (1)
Graphicsand animations devoxx2010 (1)
Graphicsand animations devoxx2010 (1)
Graphicsand animations devoxx2010 (1)
Graphicsand animations devoxx2010 (1)
Graphicsand animations devoxx2010 (1)
Graphicsand animations devoxx2010 (1)
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

Graphicsand animations devoxx2010 (1)

2,251

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,251
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
144
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. Android Graphics and Animations Romain Guy and Chet Haase Google
  • 2. Welcome @romainguy @chethaase
  • 3. Agenda• Architecture• Graphics• Animations 3
  • 4. Agenda• Architecture• Graphics• Animations 4
  • 5. Glossary Canvas 2D drawing context Skia 2D drawing API OpenGL 3D rendering API RenderScript Language + API 5
  • 6. Glossary Surface Drawing buffer SurfaceFlinger Surface manager PixelFlinger Rasterizer 6
  • 7. Glossary View UI widget ViewGroup View container SurfaceView Render in a surface 7
  • 8. Architecture 8
  • 9. OpenGL 9
  • 10. Compositor 10
  • 11. Views 11
  • 12. ViewGroups 12
  • 13. SurfaceView 13
  • 14. SurfaceView 14
  • 15. Agenda• Architecture• Graphics• Animations 15
  • 16. Demo
  • 17. Drawing tools• Paints• Shaders• ColorFilters• Xfermodes• Bitmaps 17
  • 18. Paints• Canvas is almost stateless – Transformations – Layers• Paint has many states – Color, opacity, filtering, dithering, anti-aliasing...• Don’t allocate paints onDraw() – Paint is not cheap 18
  • 19. Shaders• Draw horizontal span of colors – Text, paths, rounded rectangles, etc.• Kinda like fragment shaders• Pre-defined set – LinearGradient – RadialGradient – SweepGradient – BitmapShader – ComposeShader 19
  • 20. Color filters• Math operation on each pixel• Pre-defined set – ColorMatrixColorFilter – LightingColorFilter – PorterDuffColorFilter 20
  • 21. Xfermodes• Weird name for blending modes• Porter-Duff alpha blending – SrcOver – DstOut – etc.• Color blending – Darken – Lighten – Multiply – Screen 21
  • 22. Reflection time 22
  • 23. Reflection time 1 Shader gradientShader = new LinearGradient( 2 0, 0, 0, b.getHeight(), 0xFF000000, 0, 3 TileMode.CLAMP); 4 Shader bitmapShader = new BitmapShader(bitmap, 5 TileMode.CLAMP, TileMode.CLAMP); 6 Shader composeShader = new ComposeShader( 7 bitmapShader, gradientShader, 8 new PorterDuffXfermode(Mode.DST_OUT)); 9 Paint paint = new Paint(); 10 paint.setShader(composeShader); 11 c.drawRect(0.0f, 0.0f, 12 b.getWidth(), b.getHeight(), p); 23
  • 24. Bitmaps• Mutable or immutable• Density• Recyclable• 4 formats 24
  • 25. Formats• ALPHA_8 To store alpha masks (font cache, etc.)• ARGB_4444 Don’t use it• ARGB_8888 Full color, translucency, it’s awesome• RGB_565 No alpha channel, saves memory, dithering 25
  • 26. Choose the right format• Quality – Preload Bitmaps in the right format – Paint.setDither(true) – Drawable.setDither(true)• Performance• Avoid blending – Opaque ARGB_8888 bitmaps are optimized• Render onto compatible surfaces – Draw 32 bits onto 32 bits windows, etc. – getWindow().getAttributes().format 26
  • 27. Bitmaps demo
  • 28. Performance 16 bits 16 bits 32 bits dithered ARGB_8888 6.0 ms 7.5 ms 2.0 ms ARGB_4444 4.0 ms 5.0 ms 3.5 ms RGB_565 0.5 ms 0.5 ms 6.0 ms Performance measured with HVGA 2.2 emulator 28
  • 29. In Gingerbread...• All windows are 32 bits – Transparent: RGBA_8888 – Opaque: RGBX_8888• OpenGL surfaces are 16 bits• All bitmaps loaded in 32 bits (ARGB_8888)• For quality reasons – No more banding, no more dithering 29
  • 30. Create, save, destroy• Bitmap.createBitmap()• Bitmap.createScaledBitmap()• BitmapFactory.decode*()• Bitmap.copy()• Bitmap.compress()• Bitmap.recycle() 30
  • 31. Draw on Bitmap• Only if mutable 1 Paint p = new Paint(); 2 p.setAntiAlias(true); 3 p.setTextSize(24); 4 5 Bitmap b = Bitmap.createBitmap(256, 256, 6 Bitmap.Config.ARGB_8888); 7 Canvas c = new Canvas(b); 8 c.drawText("Devoxx", 0.0f, 128.0f, p); 31
  • 32. Copy a View 1 int spec = MeasureSpec.makeMeasureSpec( 2 0, MeasureSpec.UNDEFINED); 3 view.measure(spec, spec); 4 view.layout(0, 0, view.getMeasuredWidth(), 5 view.getMeasuredHeight()); 6 7 Bitmap b = Bitmap.createBitmap( 8 view.getWidth(), view.getHeight(), 9 Bitmap.Config.ARGB_8888); 10 Canvas c = new Canvas(b); 11 c.translate(-view.getScrollX(), -view.getScrollY()); 12 view.draw(c); 32
  • 33. Copy a View 1 view.setDrawingCacheEnabled(true); 2 Bitmap b = view.getDrawingCache(); 3 // Make a copy, then call 4 // view.destroyDrawingCache() 33
  • 34. Agenda• Architecture• Graphics• Animations 34
  • 35. Animation in Android• Motivation• Current Animation Support –Animation superclass –Animation subclasses• The Future! 35
  • 36. Why Animation?• Liven up the UI• Transition between application states• Keep the user engaged 36
  • 37. Animation Superclass• Timing: duration, startDelay• Repetition: repeatMode, repeatCount• Easing: Interpolator• End state: fillAfter, fillBefore 37
  • 38. Animation Types• Transforming –Translation, Rotation, Scale• Fading• Sequences• Cross-fading• Layout 38
  • 39. Transform Animations• TranslateAnimation• RotateAnimation• ScaleAnimation• Changes rendering matrix of View –But not the object’s real matrix <translate android:fromYDelta=”0” android:toYDelta=”100%” android:duration=”200”/> 39
  • 40. Fading• FadeAnimation• Changes translucency of View’s rendering –Not the translucency of the object itself <alpha android:fromAlpha=”1” android:toAlpha=”0” android:duration=”200”/> 40
  • 41. Sequences• AnimationSet• Plays child animations together –Use startDelay on children to stagger start times <set> <translate ... / <alpha ... /> </set> 41
  • 42. Crossfading• TransitionDrawable• Crossfades between multiple Drawables –startTransition(duration): crossfades to top drawable –reverseTransition(duration): crossfades to bottom<transition> <item android:drawable="@drawable/start" /> <item android:drawable="@drawable/end" /></transition> 42
  • 43. Layout Animations• Single animation applied to layout’s children• Start times are staggeredres/anim/layout_fade: <gridLayoutAnimation android:columnDelay="50%" android:directionPriority="row" android:direction="right_to_left|bottom_to_top" android:animation="@anim/fade" /> <GridView android:layoutAnimation="@anim/layout_fade" android:layout_width="fill_parent" android:layout_height="fill_parent"/> 43
  • 44. Performance Tips• enable drawing cache –setDrawingCacheEnabled(true);• layout animations –ViewGroup: animationCache = true 44
  • 45. The Future!• Problem: –Current animations handle only specific View actions –Not easy to animate anything else • Drawable’s alpha property • Paint’s color property • Custom object’s properties –Animated views haven’t actually been altered • Just drawn in a different location/orientation• Solution: –Property animation system • “Animate ‘x’on Foo” • Detects and calls set/get functions 45
  • 46. Discla imThe Future not re er: This API pre ex any pa sent a com ample does rt m interfa icular imple itment to c menta If ther e in any fut t e were ure re ion or is not s lease. guara uch a releas nteed e, whic<objectAnimator . h android:propertyName="x" android:valueFrom="0" android:valueTo="100"/>ObjectAnimator anim = new ObjectAnimator(shape, “alpha”, 0, 100);anim.start(); 46
  • 47. For More Information• Android developer site –developer.android.com• Romain –@romainguy –curious-creature.org• Chet –@chethaase –graphics-geek.blogspot.com 47
  • 48. Q&A

×