filthy rich android clients
TRANSCRIPT
![Page 1: Filthy Rich Android Clients](https://reader033.vdocuments.net/reader033/viewer/2022060108/554dc1e5b4c905c2488b4da0/html5/thumbnails/1.jpg)
www.devoxx.com
Filthy Rich Android Clients
Romain GuyUI Toolkit Engineer, AndroidGoogle
![Page 2: Filthy Rich Android Clients](https://reader033.vdocuments.net/reader033/viewer/2022060108/554dc1e5b4c905c2488b4da0/html5/thumbnails/2.jpg)
www.devoxx.com
Overall Presentation Goal
Learn how to apply Filthy Rich Clients techniques to the Android platform.
![Page 3: Filthy Rich Android Clients](https://reader033.vdocuments.net/reader033/viewer/2022060108/554dc1e5b4c905c2488b4da0/html5/thumbnails/3.jpg)
www.devoxx.com
Speaker’s qualificationsRomain 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
![Page 4: Filthy Rich Android Clients](https://reader033.vdocuments.net/reader033/viewer/2022060108/554dc1e5b4c905c2488b4da0/html5/thumbnails/4.jpg)
www.devoxx.com
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.
![Page 5: Filthy Rich Android Clients](https://reader033.vdocuments.net/reader033/viewer/2022060108/554dc1e5b4c905c2488b4da0/html5/thumbnails/5.jpg)
www.devoxx.com
Architecture
Graphics
Animation
Performance
5
Agenda
![Page 6: Filthy Rich Android Clients](https://reader033.vdocuments.net/reader033/viewer/2022060108/554dc1e5b4c905c2488b4da0/html5/thumbnails/6.jpg)
www.devoxx.com
Architecture
Graphics
Animation
Performance
6
Agenda
![Page 7: Filthy Rich Android Clients](https://reader033.vdocuments.net/reader033/viewer/2022060108/554dc1e5b4c905c2488b4da0/html5/thumbnails/7.jpg)
www.devoxx.com
GlossaryCanvas: 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
![Page 8: Filthy Rich Android Clients](https://reader033.vdocuments.net/reader033/viewer/2022060108/554dc1e5b4c905c2488b4da0/html5/thumbnails/8.jpg)
www.devoxx.com8
Architecture
![Page 9: Filthy Rich Android Clients](https://reader033.vdocuments.net/reader033/viewer/2022060108/554dc1e5b4c905c2488b4da0/html5/thumbnails/9.jpg)
www.devoxx.com9
Architecture
![Page 10: Filthy Rich Android Clients](https://reader033.vdocuments.net/reader033/viewer/2022060108/554dc1e5b4c905c2488b4da0/html5/thumbnails/10.jpg)
www.devoxx.com10
Architecture
![Page 11: Filthy Rich Android Clients](https://reader033.vdocuments.net/reader033/viewer/2022060108/554dc1e5b4c905c2488b4da0/html5/thumbnails/11.jpg)
www.devoxx.com
How to draw
11
1 public class CustomView extends View { 2 @Override 3 protected void onDraw(Canvas canvas) { 4 // draw stuff 5 } 6 }
![Page 12: Filthy Rich Android Clients](https://reader033.vdocuments.net/reader033/viewer/2022060108/554dc1e5b4c905c2488b4da0/html5/thumbnails/12.jpg)
www.devoxx.com
How to draw
12
1 public class CustomDrawable extends Drawable { 2 @Override 3 public void draw(Canvas canvas) { 4 // draw stuff 5 } 6 }
![Page 13: Filthy Rich Android Clients](https://reader033.vdocuments.net/reader033/viewer/2022060108/554dc1e5b4c905c2488b4da0/html5/thumbnails/13.jpg)
www.devoxx.com13
Redrawing
![Page 14: Filthy Rich Android Clients](https://reader033.vdocuments.net/reader033/viewer/2022060108/554dc1e5b4c905c2488b4da0/html5/thumbnails/14.jpg)
www.devoxx.com
Drawing sequence
14
![Page 15: Filthy Rich Android Clients](https://reader033.vdocuments.net/reader033/viewer/2022060108/554dc1e5b4c905c2488b4da0/html5/thumbnails/15.jpg)
www.devoxx.com
Architecture
Graphics
Animation
Performance
15
Agenda
![Page 16: Filthy Rich Android Clients](https://reader033.vdocuments.net/reader033/viewer/2022060108/554dc1e5b4c905c2488b4da0/html5/thumbnails/16.jpg)
www.devoxx.com
DEMO
3D Reflection
![Page 17: Filthy Rich Android Clients](https://reader033.vdocuments.net/reader033/viewer/2022060108/554dc1e5b4c905c2488b4da0/html5/thumbnails/17.jpg)
www.devoxx.com
FundamentalsPaints
Gradients
Transfer modes
3D Transformations
Shadows
17
![Page 18: Filthy Rich Android Clients](https://reader033.vdocuments.net/reader033/viewer/2022060108/554dc1e5b4c905c2488b4da0/html5/thumbnails/18.jpg)
www.devoxx.com
About paintsCanvas 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
![Page 19: Filthy Rich Android Clients](https://reader033.vdocuments.net/reader033/viewer/2022060108/554dc1e5b4c905c2488b4da0/html5/thumbnails/19.jpg)
www.devoxx.com
DEMO
Color filter in Home
Screen transfer mode in Shelves
Faded edges in lists
![Page 20: Filthy Rich Android Clients](https://reader033.vdocuments.net/reader033/viewer/2022060108/554dc1e5b4c905c2488b4da0/html5/thumbnails/20.jpg)
www.devoxx.com
GradientsShader
Horizontal span of colors
LinearGradient
RadialGradient
SweepGradient
20
![Page 21: Filthy Rich Android Clients](https://reader033.vdocuments.net/reader033/viewer/2022060108/554dc1e5b4c905c2488b4da0/html5/thumbnails/21.jpg)
www.devoxx.com
Gradients
21
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);
![Page 22: Filthy Rich Android Clients](https://reader033.vdocuments.net/reader033/viewer/2022060108/554dc1e5b4c905c2488b4da0/html5/thumbnails/22.jpg)
www.devoxx.com
Transfer modesIn Java2D, AlphaComposite
Does more
Modes
Porter-Duff (SrcOver, Atop, DstOut, etc.)
Color blending (Screen, Darken, Multiply, etc.)
22
![Page 23: Filthy Rich Android Clients](https://reader033.vdocuments.net/reader033/viewer/2022060108/554dc1e5b4c905c2488b4da0/html5/thumbnails/23.jpg)
www.devoxx.com
Transfer modes
23
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);
![Page 24: Filthy Rich Android Clients](https://reader033.vdocuments.net/reader033/viewer/2022060108/554dc1e5b4c905c2488b4da0/html5/thumbnails/24.jpg)
www.devoxx.com
3D transformations2D Canvas transformations
scale(), translate(), rotate()
Canvas uses a 4x4 transformation matrix
3D transformations
Use android.graphics.Camera
24
![Page 25: Filthy Rich Android Clients](https://reader033.vdocuments.net/reader033/viewer/2022060108/554dc1e5b4c905c2488b4da0/html5/thumbnails/25.jpg)
www.devoxx.com
3D transformations
25
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();
![Page 26: Filthy Rich Android Clients](https://reader033.vdocuments.net/reader033/viewer/2022060108/554dc1e5b4c905c2488b4da0/html5/thumbnails/26.jpg)
www.devoxx.com
DEMO
3D transition
![Page 27: Filthy Rich Android Clients](https://reader033.vdocuments.net/reader033/viewer/2022060108/554dc1e5b4c905c2488b4da0/html5/thumbnails/27.jpg)
www.devoxx.com
Shadows
27
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);
![Page 28: Filthy Rich Android Clients](https://reader033.vdocuments.net/reader033/viewer/2022060108/554dc1e5b4c905c2488b4da0/html5/thumbnails/28.jpg)
www.devoxx.com
Architecture
Graphics
Animation
Performance
28
Agenda
![Page 29: Filthy Rich Android Clients](https://reader033.vdocuments.net/reader033/viewer/2022060108/554dc1e5b4c905c2488b4da0/html5/thumbnails/29.jpg)
www.devoxx.com
AnimationWhy?
Better visual feedback
UI appears more responsive
How?
Animation
LayoutAnimation
29
![Page 30: Filthy Rich Android Clients](https://reader033.vdocuments.net/reader033/viewer/2022060108/554dc1e5b4c905c2488b4da0/html5/thumbnails/30.jpg)
www.devoxx.com
Bring life to your applicationLife is restless
Transitions, highlights, progress, motion, etc.
Animate changes
Adding/removing views
Keep animations short and simple
30
![Page 31: Filthy Rich Android Clients](https://reader033.vdocuments.net/reader033/viewer/2022060108/554dc1e5b4c905c2488b4da0/html5/thumbnails/31.jpg)
www.devoxx.com
Animation featuresStart delay
Start time
Duration
Repeat mode
Repeat count
Interpolation
Fill before/after
Defined in XML or code
31
![Page 32: Filthy Rich Android Clients](https://reader033.vdocuments.net/reader033/viewer/2022060108/554dc1e5b4c905c2488b4da0/html5/thumbnails/32.jpg)
www.devoxx.com
Inside animationsSubclass 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
![Page 33: Filthy Rich Android Clients](https://reader033.vdocuments.net/reader033/viewer/2022060108/554dc1e5b4c905c2488b4da0/html5/thumbnails/33.jpg)
www.devoxx.com
Inside animationsFixed set of animated properties
AlphaAnimation
RotateAnimation
ScaleAnimation
TranslateAnimation
View itself is not animated
Only a bitmap copy is
Drawing cache API
33
![Page 34: Filthy Rich Android Clients](https://reader033.vdocuments.net/reader033/viewer/2022060108/554dc1e5b4c905c2488b4da0/html5/thumbnails/34.jpg)
www.devoxx.com
DEMO
Animation in Home
Animation in Shelves
![Page 35: Filthy Rich Android Clients](https://reader033.vdocuments.net/reader033/viewer/2022060108/554dc1e5b4c905c2488b4da0/html5/thumbnails/35.jpg)
www.devoxx.com
Defining the animation
35
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>
![Page 36: Filthy Rich Android Clients](https://reader033.vdocuments.net/reader033/viewer/2022060108/554dc1e5b4c905c2488b4da0/html5/thumbnails/36.jpg)
www.devoxx.com
Playing the animation
36
1 Animation animation; 2 animation = AnimationUtils.loadAnimation( 3 context, R.anim.slide_in); 4 view.startAnimation(animation);
![Page 37: Filthy Rich Android Clients](https://reader033.vdocuments.net/reader033/viewer/2022060108/554dc1e5b4c905c2488b4da0/html5/thumbnails/37.jpg)
www.devoxx.com
Layout animationsApply 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
![Page 38: Filthy Rich Android Clients](https://reader033.vdocuments.net/reader033/viewer/2022060108/554dc1e5b4c905c2488b4da0/html5/thumbnails/38.jpg)
www.devoxx.com
DEMO
Layout animations
![Page 39: Filthy Rich Android Clients](https://reader033.vdocuments.net/reader033/viewer/2022060108/554dc1e5b4c905c2488b4da0/html5/thumbnails/39.jpg)
www.devoxx.com
Defining the layout animation
39
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" />
![Page 40: Filthy Rich Android Clients](https://reader033.vdocuments.net/reader033/viewer/2022060108/554dc1e5b4c905c2488b4da0/html5/thumbnails/40.jpg)
www.devoxx.com
Playing the layout animation
40
1 <GridView 2 android:layoutAnimation="@anim/layout_fade" 3 4 android:layout_width="fill_parent" 5 android:layout_height="fill_parent"/>
![Page 41: Filthy Rich Android Clients](https://reader033.vdocuments.net/reader033/viewer/2022060108/554dc1e5b4c905c2488b4da0/html5/thumbnails/41.jpg)
www.devoxx.com
TransitionsLong operations
Long-press for contextual actions
Changes
Avoid jarring effect
TransitionDrawable
Contains 2 drawables
Fade between them
41
![Page 42: Filthy Rich Android Clients](https://reader033.vdocuments.net/reader033/viewer/2022060108/554dc1e5b4c905c2488b4da0/html5/thumbnails/42.jpg)
www.devoxx.com
Defining a transition
42
res/drawable/transition
1 <transition> 2 <item android:drawable="@drawable/start" /> 3 <item android:drawable="@drawable/end" /> 4 </transition>
![Page 43: Filthy Rich Android Clients](https://reader033.vdocuments.net/reader033/viewer/2022060108/554dc1e5b4c905c2488b4da0/html5/thumbnails/43.jpg)
www.devoxx.com
Playing a transition
43
1 TransitionDrawable drawable; 2 drawable = getDrawable(R.drawable.transition); 3 view.setBackgroundDrawable(drawable); 4 drawable.startTransition(1000);
![Page 44: Filthy Rich Android Clients](https://reader033.vdocuments.net/reader033/viewer/2022060108/554dc1e5b4c905c2488b4da0/html5/thumbnails/44.jpg)
www.devoxx.com
DEMO
Transition in Home
Transition in Shelves
![Page 45: Filthy Rich Android Clients](https://reader033.vdocuments.net/reader033/viewer/2022060108/554dc1e5b4c905c2488b4da0/html5/thumbnails/45.jpg)
www.devoxx.com
Architecture
Graphics
Animation
Performance
45
Agenda
![Page 46: Filthy Rich Android Clients](https://reader033.vdocuments.net/reader033/viewer/2022060108/554dc1e5b4c905c2488b4da0/html5/thumbnails/46.jpg)
www.devoxx.com
PerformanceG1 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
![Page 47: Filthy Rich Android Clients](https://reader033.vdocuments.net/reader033/viewer/2022060108/554dc1e5b4c905c2488b4da0/html5/thumbnails/47.jpg)
www.devoxx.com
General optimizationsDo 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
![Page 48: Filthy Rich Android Clients](https://reader033.vdocuments.net/reader033/viewer/2022060108/554dc1e5b4c905c2488b4da0/html5/thumbnails/48.jpg)
www.devoxx.com
DEMO
HierarchyViewer
DDMS
![Page 49: Filthy Rich Android Clients](https://reader033.vdocuments.net/reader033/viewer/2022060108/554dc1e5b4c905c2488b4da0/html5/thumbnails/49.jpg)
www.devoxx.com
BitmapsDrawable 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
![Page 50: Filthy Rich Android Clients](https://reader033.vdocuments.net/reader033/viewer/2022060108/554dc1e5b4c905c2488b4da0/html5/thumbnails/50.jpg)
www.devoxx.com
BackgroundsRemove unnecessary backgrounds
No “opaque view” optimization
getWindow().setBackgroundDrawable(null)
For instance: Home, Google Maps, Shelves
Prefer ColorDrawable
50
![Page 51: Filthy Rich Android Clients](https://reader033.vdocuments.net/reader033/viewer/2022060108/554dc1e5b4c905c2488b4da0/html5/thumbnails/51.jpg)
www.devoxx.com
DEMO
Home
Maps
Shelves
![Page 52: Filthy Rich Android Clients](https://reader033.vdocuments.net/reader033/viewer/2022060108/554dc1e5b4c905c2488b4da0/html5/thumbnails/52.jpg)
www.devoxx.com
Drawing cacheIntermediate bitmap
Special API
View.setDrawingCacheEnabled()
View.buildDrawingCache()
View.getDrawingCache()
Sometimes managed automatically
ViewGroup (animations)
ListView (scrolling)
52
![Page 53: Filthy Rich Android Clients](https://reader033.vdocuments.net/reader033/viewer/2022060108/554dc1e5b4c905c2488b4da0/html5/thumbnails/53.jpg)
www.devoxx.com
DEMO
Home
ListView
![Page 54: Filthy Rich Android Clients](https://reader033.vdocuments.net/reader033/viewer/2022060108/554dc1e5b4c905c2488b4da0/html5/thumbnails/54.jpg)
www.devoxx.com
Concluding statement
Filthy Rich Clients are possible on today’s mobile devices. Powerful APIs and hardware open new
possibilities that have barely been explored.
![Page 55: Filthy Rich Android Clients](https://reader033.vdocuments.net/reader033/viewer/2022060108/554dc1e5b4c905c2488b4da0/html5/thumbnails/55.jpg)
www.devoxx.com
Q&A
![Page 56: Filthy Rich Android Clients](https://reader033.vdocuments.net/reader033/viewer/2022060108/554dc1e5b4c905c2488b4da0/html5/thumbnails/56.jpg)
www.devoxx.com
Thanks for your attention!
http://www.android.comhttp://source.android.comhttp://code.google.com/android