Download - Graphicsand animations devoxx2010 (1)
![Page 1: Graphicsand animations devoxx2010 (1)](https://reader034.vdocuments.us/reader034/viewer/2022042623/54b4bbf04a79592c3b8b4629/html5/thumbnails/1.jpg)
Android Graphics and Animations
Romain Guy and Chet HaaseGoogle
![Page 2: Graphicsand animations devoxx2010 (1)](https://reader034.vdocuments.us/reader034/viewer/2022042623/54b4bbf04a79592c3b8b4629/html5/thumbnails/2.jpg)
Welcome@romainguy@chethaase
![Page 3: Graphicsand animations devoxx2010 (1)](https://reader034.vdocuments.us/reader034/viewer/2022042623/54b4bbf04a79592c3b8b4629/html5/thumbnails/3.jpg)
Agenda• Architecture• Graphics• Animations
3
![Page 4: Graphicsand animations devoxx2010 (1)](https://reader034.vdocuments.us/reader034/viewer/2022042623/54b4bbf04a79592c3b8b4629/html5/thumbnails/4.jpg)
Agenda• Architecture• Graphics• Animations
4
![Page 5: Graphicsand animations devoxx2010 (1)](https://reader034.vdocuments.us/reader034/viewer/2022042623/54b4bbf04a79592c3b8b4629/html5/thumbnails/5.jpg)
Glossary
5
Canvas 2D drawing context
Skia 2D drawing API
OpenGL 3D rendering API
RenderScript Language + API
![Page 6: Graphicsand animations devoxx2010 (1)](https://reader034.vdocuments.us/reader034/viewer/2022042623/54b4bbf04a79592c3b8b4629/html5/thumbnails/6.jpg)
Glossary
6
Surface Drawing buffer
SurfaceFlinger Surface manager
PixelFlinger Rasterizer
![Page 7: Graphicsand animations devoxx2010 (1)](https://reader034.vdocuments.us/reader034/viewer/2022042623/54b4bbf04a79592c3b8b4629/html5/thumbnails/7.jpg)
Glossary
7
View UI widget
ViewGroup View container
SurfaceView Render in a surface
![Page 8: Graphicsand animations devoxx2010 (1)](https://reader034.vdocuments.us/reader034/viewer/2022042623/54b4bbf04a79592c3b8b4629/html5/thumbnails/8.jpg)
Architecture
8
![Page 9: Graphicsand animations devoxx2010 (1)](https://reader034.vdocuments.us/reader034/viewer/2022042623/54b4bbf04a79592c3b8b4629/html5/thumbnails/9.jpg)
OpenGL
9
![Page 10: Graphicsand animations devoxx2010 (1)](https://reader034.vdocuments.us/reader034/viewer/2022042623/54b4bbf04a79592c3b8b4629/html5/thumbnails/10.jpg)
Compositor
10
![Page 11: Graphicsand animations devoxx2010 (1)](https://reader034.vdocuments.us/reader034/viewer/2022042623/54b4bbf04a79592c3b8b4629/html5/thumbnails/11.jpg)
Views
11
![Page 12: Graphicsand animations devoxx2010 (1)](https://reader034.vdocuments.us/reader034/viewer/2022042623/54b4bbf04a79592c3b8b4629/html5/thumbnails/12.jpg)
ViewGroups
12
![Page 13: Graphicsand animations devoxx2010 (1)](https://reader034.vdocuments.us/reader034/viewer/2022042623/54b4bbf04a79592c3b8b4629/html5/thumbnails/13.jpg)
SurfaceView
13
![Page 14: Graphicsand animations devoxx2010 (1)](https://reader034.vdocuments.us/reader034/viewer/2022042623/54b4bbf04a79592c3b8b4629/html5/thumbnails/14.jpg)
SurfaceView
14
![Page 15: Graphicsand animations devoxx2010 (1)](https://reader034.vdocuments.us/reader034/viewer/2022042623/54b4bbf04a79592c3b8b4629/html5/thumbnails/15.jpg)
Agenda• Architecture• Graphics• Animations
15
![Page 16: Graphicsand animations devoxx2010 (1)](https://reader034.vdocuments.us/reader034/viewer/2022042623/54b4bbf04a79592c3b8b4629/html5/thumbnails/16.jpg)
Demo
![Page 17: Graphicsand animations devoxx2010 (1)](https://reader034.vdocuments.us/reader034/viewer/2022042623/54b4bbf04a79592c3b8b4629/html5/thumbnails/17.jpg)
Drawing tools• Paints• Shaders• ColorFilters• Xfermodes• Bitmaps
17
![Page 18: Graphicsand animations devoxx2010 (1)](https://reader034.vdocuments.us/reader034/viewer/2022042623/54b4bbf04a79592c3b8b4629/html5/thumbnails/18.jpg)
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
![Page 19: Graphicsand animations devoxx2010 (1)](https://reader034.vdocuments.us/reader034/viewer/2022042623/54b4bbf04a79592c3b8b4629/html5/thumbnails/19.jpg)
Shaders• Draw horizontal span of colors
– Text, paths, rounded rectangles, etc.• Kinda like fragment shaders• Pre-defined set
– LinearGradient– RadialGradient– SweepGradient– BitmapShader– ComposeShader
19
![Page 20: Graphicsand animations devoxx2010 (1)](https://reader034.vdocuments.us/reader034/viewer/2022042623/54b4bbf04a79592c3b8b4629/html5/thumbnails/20.jpg)
Color filters• Math operation on each pixel• Pre-defined set
– ColorMatrixColorFilter– LightingColorFilter– PorterDuffColorFilter
20
![Page 21: Graphicsand animations devoxx2010 (1)](https://reader034.vdocuments.us/reader034/viewer/2022042623/54b4bbf04a79592c3b8b4629/html5/thumbnails/21.jpg)
Xfermodes• Weird name for blending modes• Porter-Duff alpha blending
– SrcOver– DstOut– etc.
• Color blending– Darken– Lighten– Multiply– Screen
21
![Page 22: Graphicsand animations devoxx2010 (1)](https://reader034.vdocuments.us/reader034/viewer/2022042623/54b4bbf04a79592c3b8b4629/html5/thumbnails/22.jpg)
Reflection time
22
![Page 23: Graphicsand animations devoxx2010 (1)](https://reader034.vdocuments.us/reader034/viewer/2022042623/54b4bbf04a79592c3b8b4629/html5/thumbnails/23.jpg)
Reflection time
23
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);
![Page 24: Graphicsand animations devoxx2010 (1)](https://reader034.vdocuments.us/reader034/viewer/2022042623/54b4bbf04a79592c3b8b4629/html5/thumbnails/24.jpg)
Bitmaps• Mutable or immutable• Density• Recyclable• 4 formats
24
![Page 25: Graphicsand animations devoxx2010 (1)](https://reader034.vdocuments.us/reader034/viewer/2022042623/54b4bbf04a79592c3b8b4629/html5/thumbnails/25.jpg)
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
![Page 26: Graphicsand animations devoxx2010 (1)](https://reader034.vdocuments.us/reader034/viewer/2022042623/54b4bbf04a79592c3b8b4629/html5/thumbnails/26.jpg)
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
![Page 27: Graphicsand animations devoxx2010 (1)](https://reader034.vdocuments.us/reader034/viewer/2022042623/54b4bbf04a79592c3b8b4629/html5/thumbnails/27.jpg)
Bitmaps demo
![Page 28: Graphicsand animations devoxx2010 (1)](https://reader034.vdocuments.us/reader034/viewer/2022042623/54b4bbf04a79592c3b8b4629/html5/thumbnails/28.jpg)
Performance
28
16 bits 16 bitsdithered 32 bits
ARGB_8888
ARGB_4444
RGB_565
6.0 ms 7.5 ms 2.0 ms
4.0 ms 5.0 ms 3.5 ms
0.5 ms 0.5 ms 6.0 ms
Performance measured with HVGA 2.2 emulator
![Page 29: Graphicsand animations devoxx2010 (1)](https://reader034.vdocuments.us/reader034/viewer/2022042623/54b4bbf04a79592c3b8b4629/html5/thumbnails/29.jpg)
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
![Page 30: Graphicsand animations devoxx2010 (1)](https://reader034.vdocuments.us/reader034/viewer/2022042623/54b4bbf04a79592c3b8b4629/html5/thumbnails/30.jpg)
Create, save, destroy• Bitmap.createBitmap()• Bitmap.createScaledBitmap()• BitmapFactory.decode*()• Bitmap.copy()• Bitmap.compress()• Bitmap.recycle()
30
![Page 31: Graphicsand animations devoxx2010 (1)](https://reader034.vdocuments.us/reader034/viewer/2022042623/54b4bbf04a79592c3b8b4629/html5/thumbnails/31.jpg)
Draw on Bitmap• Only if mutable
31
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);
![Page 32: Graphicsand animations devoxx2010 (1)](https://reader034.vdocuments.us/reader034/viewer/2022042623/54b4bbf04a79592c3b8b4629/html5/thumbnails/32.jpg)
Copy a View
32
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);
![Page 33: Graphicsand animations devoxx2010 (1)](https://reader034.vdocuments.us/reader034/viewer/2022042623/54b4bbf04a79592c3b8b4629/html5/thumbnails/33.jpg)
Copy a View
33
1 view.setDrawingCacheEnabled(true); 2 Bitmap b = view.getDrawingCache(); 3 // Make a copy, then call 4 // view.destroyDrawingCache()
![Page 34: Graphicsand animations devoxx2010 (1)](https://reader034.vdocuments.us/reader034/viewer/2022042623/54b4bbf04a79592c3b8b4629/html5/thumbnails/34.jpg)
Agenda• Architecture• Graphics• Animations
34
![Page 35: Graphicsand animations devoxx2010 (1)](https://reader034.vdocuments.us/reader034/viewer/2022042623/54b4bbf04a79592c3b8b4629/html5/thumbnails/35.jpg)
Animation in Android• Motivation• Current Animation Support
–Animation superclass–Animation subclasses
• The Future!
35
![Page 36: Graphicsand animations devoxx2010 (1)](https://reader034.vdocuments.us/reader034/viewer/2022042623/54b4bbf04a79592c3b8b4629/html5/thumbnails/36.jpg)
Why Animation?• Liven up the UI• Transition between application states• Keep the user engaged
36
![Page 37: Graphicsand animations devoxx2010 (1)](https://reader034.vdocuments.us/reader034/viewer/2022042623/54b4bbf04a79592c3b8b4629/html5/thumbnails/37.jpg)
Animation Superclass• Timing: duration, startDelay• Repetition: repeatMode, repeatCount• Easing: Interpolator• End state: fillAfter, fillBefore
37
![Page 38: Graphicsand animations devoxx2010 (1)](https://reader034.vdocuments.us/reader034/viewer/2022042623/54b4bbf04a79592c3b8b4629/html5/thumbnails/38.jpg)
Animation Types• Transforming
–Translation, Rotation, Scale• Fading• Sequences• Cross-fading• Layout
38
![Page 39: Graphicsand animations devoxx2010 (1)](https://reader034.vdocuments.us/reader034/viewer/2022042623/54b4bbf04a79592c3b8b4629/html5/thumbnails/39.jpg)
Transform Animations• TranslateAnimation• RotateAnimation• ScaleAnimation• Changes rendering matrix of View
–But not the object’s real matrix
39
<translate android:fromYDelta=”0” android:toYDelta=”100%” android:duration=”200”/>
![Page 40: Graphicsand animations devoxx2010 (1)](https://reader034.vdocuments.us/reader034/viewer/2022042623/54b4bbf04a79592c3b8b4629/html5/thumbnails/40.jpg)
Fading• FadeAnimation• Changes translucency of View’s rendering
–Not the translucency of the object itself
40
<alpha android:fromAlpha=”1” android:toAlpha=”0” android:duration=”200”/>
![Page 41: Graphicsand animations devoxx2010 (1)](https://reader034.vdocuments.us/reader034/viewer/2022042623/54b4bbf04a79592c3b8b4629/html5/thumbnails/41.jpg)
Sequences• AnimationSet• Plays child animations together
–Use startDelay on children to stagger start times
41
<set> <translate ... / <alpha ... /></set>
![Page 42: Graphicsand animations devoxx2010 (1)](https://reader034.vdocuments.us/reader034/viewer/2022042623/54b4bbf04a79592c3b8b4629/html5/thumbnails/42.jpg)
Crossfading• TransitionDrawable• Crossfades between multiple Drawables
–startTransition(duration): crossfades to top drawable–reverseTransition(duration): crossfades to bottom
42
<transition> <item android:drawable="@drawable/start" /> <item android:drawable="@drawable/end" /></transition>
![Page 43: Graphicsand animations devoxx2010 (1)](https://reader034.vdocuments.us/reader034/viewer/2022042623/54b4bbf04a79592c3b8b4629/html5/thumbnails/43.jpg)
Layout Animations• Single animation applied to layout’s children• Start times are staggered
43
<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"/>
res/anim/layout_fade:
![Page 44: Graphicsand animations devoxx2010 (1)](https://reader034.vdocuments.us/reader034/viewer/2022042623/54b4bbf04a79592c3b8b4629/html5/thumbnails/44.jpg)
Performance Tips• enable drawing cache
–setDrawingCacheEnabled(true);• layout animations
–ViewGroup: animationCache = true
44
![Page 45: Graphicsand animations devoxx2010 (1)](https://reader034.vdocuments.us/reader034/viewer/2022042623/54b4bbf04a79592c3b8b4629/html5/thumbnails/45.jpg)
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
![Page 46: Graphicsand animations devoxx2010 (1)](https://reader034.vdocuments.us/reader034/viewer/2022042623/54b4bbf04a79592c3b8b4629/html5/thumbnails/46.jpg)
The Future
46
Disclaimer: This API example does not represent a commitment to
any particular implementation or interface in any future release.
<objectAnimator android:propertyName="x" android:valueFrom="0" android:valueTo="100"/>
ObjectAnimator anim = new ObjectAnimator(shape, “alpha”, 0, 100);anim.start();
If there were such a release, which is not guaranteed.
![Page 47: Graphicsand animations devoxx2010 (1)](https://reader034.vdocuments.us/reader034/viewer/2022042623/54b4bbf04a79592c3b8b4629/html5/thumbnails/47.jpg)
For More Information• Android developer site
–developer.android.com• Romain
–@romainguy–curious-creature.org
• Chet–@chethaase–graphics-geek.blogspot.com
47
![Page 48: Graphicsand animations devoxx2010 (1)](https://reader034.vdocuments.us/reader034/viewer/2022042623/54b4bbf04a79592c3b8b4629/html5/thumbnails/48.jpg)
Q&A