0
Android Graphics and Animations          Romain Guy and Chet Haase                            Google
Welcome   @romainguy   @chethaase
Agenda• Architecture• Graphics• Animations                 3
Agenda• Architecture• Graphics• Animations                 4
Glossary   Canvas         2D drawing context   Skia           2D drawing API   OpenGL         3D rendering API   RenderScr...
Glossary   Surface          Drawing buffer   SurfaceFlinger   Surface manager   PixelFlinger     Rasterizer               ...
Glossary   View          UI widget   ViewGroup     View container   SurfaceView   Render in a surface                     ...
Architecture               8
OpenGL         9
Compositor             10
Views        11
ViewGroups             12
SurfaceView              13
SurfaceView              14
Agenda• Architecture• Graphics• Animations                 15
Demo
Drawing tools• Paints• Shaders• ColorFilters• Xfermodes• Bitmaps                 17
Paints• Canvas is almost stateless – Transformations – Layers• Paint has many states – Color, opacity, filtering, ditherin...
Shaders• Draw horizontal span of colors – Text, paths, rounded rectangles, etc.• Kinda like fragment shaders• Pre-defined ...
Color filters• Math operation on each pixel• Pre-defined set – ColorMatrixColorFilter – LightingColorFilter – PorterDuffCo...
Xfermodes• Weird name for blending modes• Porter-Duff alpha blending – SrcOver – DstOut – etc.• Color blending –   Darken ...
Reflection time                  22
Reflection time   1 Shader gradientShader = new LinearGradient(   2         0, 0, 0, b.getHeight(), 0xFF000000, 0,   3    ...
Bitmaps• Mutable or immutable• Density• Recyclable• 4 formats                         24
Formats• ALPHA_8  To store alpha masks (font cache, etc.)• ARGB_4444  Don’t use it• ARGB_8888  Full color, translucency, i...
Choose the right format• Quality – Preload Bitmaps in the right format – Paint.setDither(true) – Drawable.setDither(true)•...
Bitmaps demo
Performance                             16 bits              16 bits                       32 bits                        ...
In Gingerbread...• All windows are 32 bits – Transparent: RGBA_8888 – Opaque: RGBX_8888• OpenGL surfaces are 16 bits• All ...
Create, save, destroy• Bitmap.createBitmap()• Bitmap.createScaledBitmap()• BitmapFactory.decode*()• Bitmap.copy()• Bitmap....
Draw on Bitmap• Only if mutable    1   Paint p = new Paint();    2   p.setAntiAlias(true);    3   p.setTextSize(24);    4 ...
Copy a View  1   int spec = MeasureSpec.makeMeasureSpec(  2           0, MeasureSpec.UNDEFINED);  3   view.measure(spec, s...
Copy a View   1   view.setDrawingCacheEnabled(true);   2   Bitmap b = view.getDrawingCache();   3   // Make a copy, then c...
Agenda• Architecture• Graphics• Animations                 34
Animation in Android• Motivation• Current Animation Support –Animation superclass –Animation subclasses• The Future!      ...
Why Animation?• Liven up the UI• Transition between application states• Keep the user engaged                             ...
Animation Superclass• Timing: duration, startDelay• Repetition: repeatMode, repeatCount• Easing: Interpolator• End state: ...
Animation Types• Transforming –Translation, Rotation, Scale• Fading• Sequences• Cross-fading• Layout                      ...
Transform Animations• TranslateAnimation• RotateAnimation• ScaleAnimation• Changes rendering matrix of View –But not the o...
Fading• FadeAnimation• Changes translucency of View’s rendering –Not the translucency of the object itself       <alpha   ...
Sequences• AnimationSet• Plays child animations together –Use startDelay on children to stagger start times       <set>   ...
Crossfading• TransitionDrawable• Crossfades between multiple Drawables –startTransition(duration): crossfades to top drawa...
Layout Animations• Single animation applied to layout’s children• Start times are staggeredres/anim/layout_fade: <gridLayo...
Performance Tips• enable drawing cache –setDrawingCacheEnabled(true);• layout animations –ViewGroup: animationCache = true...
The Future!• Problem: –Current animations handle only specific View actions –Not easy to animate anything else   • Drawabl...
Discla                                     imThe Future                   not re er: This API                             ...
For More Information• Android developer site –developer.android.com• Romain –@romainguy –curious-creature.org• Chet –@chet...
Q&A
Upcoming SlideShare
Loading in...5
×

Graphicsand animations devoxx2010 (1)

2,300

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

No notes for slide

Transcript of "Graphicsand animations devoxx2010 (1)"

  1. 1. Android Graphics and Animations Romain Guy and Chet Haase Google
  2. 2. Welcome @romainguy @chethaase
  3. 3. Agenda• Architecture• Graphics• Animations 3
  4. 4. Agenda• Architecture• Graphics• Animations 4
  5. 5. Glossary Canvas 2D drawing context Skia 2D drawing API OpenGL 3D rendering API RenderScript Language + API 5
  6. 6. Glossary Surface Drawing buffer SurfaceFlinger Surface manager PixelFlinger Rasterizer 6
  7. 7. Glossary View UI widget ViewGroup View container SurfaceView Render in a surface 7
  8. 8. Architecture 8
  9. 9. OpenGL 9
  10. 10. Compositor 10
  11. 11. Views 11
  12. 12. ViewGroups 12
  13. 13. SurfaceView 13
  14. 14. SurfaceView 14
  15. 15. Agenda• Architecture• Graphics• Animations 15
  16. 16. Demo
  17. 17. Drawing tools• Paints• Shaders• ColorFilters• Xfermodes• Bitmaps 17
  18. 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. 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. 20. Color filters• Math operation on each pixel• Pre-defined set – ColorMatrixColorFilter – LightingColorFilter – PorterDuffColorFilter 20
  21. 21. Xfermodes• Weird name for blending modes• Porter-Duff alpha blending – SrcOver – DstOut – etc.• Color blending – Darken – Lighten – Multiply – Screen 21
  22. 22. Reflection time 22
  23. 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. 24. Bitmaps• Mutable or immutable• Density• Recyclable• 4 formats 24
  25. 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. 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. 27. Bitmaps demo
  28. 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. 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. 30. Create, save, destroy• Bitmap.createBitmap()• Bitmap.createScaledBitmap()• BitmapFactory.decode*()• Bitmap.copy()• Bitmap.compress()• Bitmap.recycle() 30
  31. 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. 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. 33. Copy a View 1 view.setDrawingCacheEnabled(true); 2 Bitmap b = view.getDrawingCache(); 3 // Make a copy, then call 4 // view.destroyDrawingCache() 33
  34. 34. Agenda• Architecture• Graphics• Animations 34
  35. 35. Animation in Android• Motivation• Current Animation Support –Animation superclass –Animation subclasses• The Future! 35
  36. 36. Why Animation?• Liven up the UI• Transition between application states• Keep the user engaged 36
  37. 37. Animation Superclass• Timing: duration, startDelay• Repetition: repeatMode, repeatCount• Easing: Interpolator• End state: fillAfter, fillBefore 37
  38. 38. Animation Types• Transforming –Translation, Rotation, Scale• Fading• Sequences• Cross-fading• Layout 38
  39. 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. 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. 41. Sequences• AnimationSet• Plays child animations together –Use startDelay on children to stagger start times <set> <translate ... / <alpha ... /> </set> 41
  42. 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. 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. 44. Performance Tips• enable drawing cache –setDrawingCacheEnabled(true);• layout animations –ViewGroup: animationCache = true 44
  45. 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. 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. 47. For More Information• Android developer site –developer.android.com• Romain –@romainguy –curious-creature.org• Chet –@chethaase –graphics-geek.blogspot.com 47
  48. 48. Q&A
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×