Engineers from the Android UI Graphics team will show some tips, tricks, tools, and techniques for getting the best performance and smoothest UI for your Android applications.

3. &Graphics Performance

4. &Chet Haase Romain Guy

5. Architecture

6. Reordering & merging

7. Save Cancel
Maximize compatibility
Include metadata

9. Include metadata Maximize compatibility CancelSave
Order of drawing commands

10. Include metadata Maximize compatibility CancelSave
1. Re-ordering

11. Include metadata
Maximize compatibility
Cancel
Save
2. Merging

13. Multi-threading

15. Drawing

16. Drawing
Shadows
Shadows
Shadows
Shadows

17. Drawing
Paths
Paths
Shadows
Shadows
Shadows
Shadows

18. Non-rectangular clipping

19. @Override
protected void onDraw(Canvas canvas) {
// Clip with a shape
Path clip = getPath();
canvas.clipPath(clip);
// Draw the content
for (int i = 0; i < mLines,length; i++) {
TextLine line = mLines[i];
canvas.drawText(line.text,
line.x, line.y, mPaint);
}
}

20. Developer Tools
2

21. Overdraw

22. Overdraw

23. Overdraw

24. Overdraw
Blue
Green
Red
Deep Red
1x
2x
3x
4x

25. 0
3
6
9
12
15
Timeinms
Frames
Update display lists Process display lists Swap buffers

28. performTraversals
draw
getDL drawDisplayList
systrace
flush drawing commands

29. android:sdk $ cd platform-tools/
android:platform-tools $
./systrace.py gfx view freq sched

31. import android.os.Trace;
@Override
public View getView(int pos, View view, ViewGroup parent) {
Trace.beginSection("getView");
if (view == null) {
view = createView();
}
// Trace time spent binding data
Trace.beginSection("bind");
bindView(pos, view);
Trace.endSection();
Trace.endSection();
return view;
}

32. android:sdk $ cd platform-tools/
android:platform-tools $
./systrace.py -a com.example.myapp

33. Tips & Tricks
3

34. Overdraw demo

35. Trilinear filtering

37. Off On

38. private void loadData() {
// Load bitmap
Bitmap b = getBitmap();
// Enable trilinear filtering
b.setHasMipMap(true);
}

39. <bitmap
android:mipMap="true"
android:src="@drawable/my_drawable" />

40. Canvas layers

41. @Override
protected void onDraw(Canvas canvas) {
// Create a clipped layer
canvas.save();
canvas.saveLayer(x, y, width, height,
Canvas.CLIP_TO_LAYER_SAVE_FLAG);
// Draw stuff
canvas.drawBitmap(bugDroid, 0.0f, 0.0f, null);
canvas.restore();
}

42. saveLayer()

45. @Override
protected void onDraw(Canvas canvas) {
// Create an unclipped layer
canvas.save();
canvas.saveLayer(x, y, width, height, 0);
// Draw stuff
canvas.drawBitmap(bugDroid, 0.0f, 0.0f, null);
canvas.restore();
}

46. saveLayer()

49. Using alpha with care

51. view.setAlpha(0.5f);
View.ALPHA.set(view, 0.5f);
ObjectAnimation.ofFloat(view, "alpha", 0.5f)
view.animate().alpha(0.5f);
view.setAnimation(new AlphaAnimation(1.0f, 0.5f));

52. view.setAlpha(0.5f);
View.ALPHA.set(view, 0.5f);
ObjectAnimation.ofFloat(view, "alpha", 0.5f)
view.animate().alpha(0.5f);
view.setAnimation(new AlphaAnimation(1.0f, 0.5f));
Canvas.saveLayerAlpha(l, t, r, b, 127,
Canvas.CLIP_TO_LAYER_SAVE_FLAG);
==

57. lternatives

58. // Not this
textView.setAlpha(alpha);
// But this
int newTextColor = (int) (0xFF * alpha) << 24 |
baseTextColor & 0xFFFFFF;
textView.setTextColor(newTextColor);

59. // Not this
imageView.setAlpha(alpha);
// But this
imageView.setImageAlpha((int) (alpha * 255));

60. // Not this
customView.setAlpha(alpha);
// But this
int alpha = (int)
(255 * slider.getProgress() / 100.0f);
paint.setAlpha(alpha);
canvas.draw*(..., paint);

61. // Or use a layer
view.setLayerType(View.LAYER_TYPE_HARDWARE, null);
// Transient layer
view.animate().alpha(0).withLayer();

62. // API level 16+
@Override
public boolean hasOverlappingRendering() {
// Don't lie to us!
return false;
}

63. 640 dp
400dp
Canvas

64. @Override
protected void onDraw(Canvas canvas) {
// Get the dimensions of the Canvas
int w = canvas.getWidth();
int h = canvas.getHeight();
canvas.drawRect(0, 0, w, h, mPaint);
}

65. 1280 px
800px
View
300px
600 px

67. With hardware rendering
600x300 px (size of the View)

68. With hardware rendering
With software rendering
600x300 px
1280x800 px
(size of the View)
(size of the window)

69. ✂
Clipping

70. @Override
protected void onDraw(Canvas canvas) {
// Keep the jellybeans
canvas.clipRect(l, t, r, b);
// Rotate the jar
canvas.rotate(-30.0f, pX, pY);
// Draw the jar
canvas.drawBitmap(mJellyBeans, x, y, null);
}

72. 1. Clip

73. 2. Rotate

74. 3. Draw

76. @Override
protected void onDraw(Canvas canvas) {
// Rotate the jar
canvas.rotate(-30.0f, pX, pY);
// Keep the jellybeans
canvas.clipRect(l, t, r, b);
// Draw the jar
canvas.drawBitmap(mJellyBeans, x, y, null);
}

78. 1. Rotate

79. 2. Clip

80. 3. Draw

82. Stencilbuffer

83. Stencilbuffer

84. 640 px
400px
View

85. Invalidate
640 px
400px (170,125)
(470,275)

86. @Override
protected void onDraw(Canvas canvas) {
// Query the current clip
Rect clip = canvas.getClipBounds();
// ???
Log.d("I/O", "clip = " + clip);
}

88. With hardware rendering
0, 0, 640, 400
(bounds of the View)

89. With hardware rendering
With software rendering
0, 0, 640, 400
170,125, 470, 275
(bounds of the View)
(bounds of the dirty rect)

90. Reordering barriers

91. Non-rectangular clips

92. saveLayer()

93. More info
Parleys.com
For Butter or Worse
Google I/O 2012
Various Android GUI & performance talks
Accelerated Android Rendering
Google I/O 2011

94. More info
Romain’s Tips & Tricks
www.curious-creature.org
Chet’s Tips & Tricks
goo.gl/y9JZr
Android Performance Case Study
graphics-geek.blogspot.com

95. Q&A
google.com/+ChetHaase
google.com/+RomainGuy
@chethaase
@romainguy

96. Developers