Let's Sprinkle some #PerfMa(ers on your ViewGroups

• "@deezer.com • google.com/+FrancoisBlavoet

The Material Transi-on

From the Material spec 'Mo$on provides meaning' 'Mo$on is meaningful and appropriate, serving to focus a7en$on and maintain con$nuity'

No content

No content

The 16 ms target 1000 ms / 16.7 = 60 frames per second - Cinema : 24 fps - Video games : usually 30 or 60 fps

What is Jank ? Problema)c blocking of a so2ware applica)on's user interface due to slow opera)ons1. In prac(ce : • Choppy UI • Discon/nuity of mo/on 1 h$ps:/ /en.wik/onary.org/wiki/jank

Let's inves*gate ! Our first tool : SysTrace Displays the execu/on /mes of all the system's processes AndroidSdk/platform-tools/systrace/systrace.py

No content

Let's zoom in

Fortunately, we can get some advice :

Next step : measure layou0ng performances AndroidSdk/platform-tools/hierarchyviewer

Don't Use Hierarchy Viewer !

Why ? Sadly, it is way too imprecise. You can measure layou6ng 6me directly with overriden onMeasure/onLayout methods

Let's dive in the code !

ViewGroup 2 main methods : protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {} protected void onLayout(boolean changed, int left, int top, int right, int bottom) {}

Rela%veLayout At its core, Rela.veLayout is designed around collec.ng and applying constraints : private static final int[] RULES_VERTICAL = { ABOVE, BELOW, ALIGN_BASELINE, ALIGN_TOP, ALIGN_BOTTOM }; private static final int[] RULES_HORIZONTAL = { LEFT_OF, RIGHT_OF, ALIGN_LEFT, ALIGN_RIGHT, START_OF, END_OF, ALIGN_START, ALIGN_END };

Rela%veLayout In order to apply these constraints, in onMeasure() : • sort the children according to their rela0ve constraints • apply the horizontal constraints • apply the ver0cal constraints • apply baseline, size wrapping, etc

What about the other ViewGroups ? LinearLayout : Simpler ... except if you use weight Any rela:ve placement is costly

One poten(al solu(on : wri(ng our own ViewGroup Framework classes : • Correctness • Versa,lity • Performances

One poten(al solu(on : wri(ng our own ViewGroup Custom implementa.on : • Correctness • Versa,lity Specialized • Performances

A simple example

layout infla+on : inflater.inflate(R.layout.album_view, parent, false);

public class AlbumView extends ViewGroup { public AlbumView(Context context) { this(context, null); } public AlbumView(Context context, AttributeSet attrs) { this(context, attrs, 0); } public AlbumView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); init(context, attrs, defStyleAttr, 0); } public AlbumView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) { super(context, attrs, defStyleAttr, defStyleRes); init(context, attrs, defStyleAttr, defStyleRes); } }

private ImageView cover; private TextView title; private TextView artist; private ImageView heart; private ImageView overflow; private void init(Context context) { LayoutInflater.from(context).inflate(R.layout.album_view_internal, this, true); cover = (ImageView) findViewById(R.id.cover); title = (TextView) findViewById(R.id.title); artist = (TextView) findViewById(R.id.artist); heart = (ImageView) findViewById(R.id.artist); overflow = (ImageView) findViewById(R.id.artist); }

@Override public LayoutParams generateLayoutParams(AttributeSet attrs) { return new MarginLayoutParams(getContext(), attrs); } @Override protected LayoutParams generateDefaultLayoutParams() { return new MarginLayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT); }

@Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { int widthUsed = 0; int heightUsed = 0; measureChildWithMargins(cover, widthMeasureSpec, widthUsed, heightMeasureSpec, heightUsed); widthUsed += getMeasuredWidthWithMargins(mCoverView); ... } protected static int getMeasuredWidthWithMargins(View child) { final MarginLayoutParams lp = (MarginLayoutParams) child.getLayoutParams(); return child.getMeasuredWidth() + lp.leftMargin + lp.rightMargin; }

@Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { int widthUsed = 0; int heightUsed = 0; measureChildWithMargins(cover, widthMeasureSpec, widthUsed, heightMeasureSpec, heightUsed); widthUsed += getMeasuredWidthWithMargins(mCoverView); // same operation for a second child : measureChildWithMargins(overflow, widthMeasureSpec, widthUsed, heightMeasureSpec, heightUsed); widthUsed += getMeasuredWidthWithMargins(mCoverView); ... }

@Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { int widthUsed = 0; int heightUsed = 0; measureChildWithMargins(cover, ...); widthUsed += getMeasuredWidthWithMargins(mCoverView); measureChildWithMargins(overflow, ...); widthUsed += getMeasuredWidthWithMargins(mCoverView); measureChildWithMargins(heart, ...); widthUsed += getMeasuredWidthWithMargins(mCoverView); measureChildWithMargins(title, ...); measureChildWithMargins(artist, ...); widthUsed += getMeasuredWidthWithMargins(mCoverView); setMeasuredDimension(resolveSize(widthUsed, widthMeasureSpec), MeasureSpec.getSize(heightMeasureSpec)); }

No content

@Override protected void onLayout(boolean changed, int l, int t, int r, int b) { final int paddingLeft = getPaddingLeft(); final int paddingTop = getPaddingTop(); final int paddingRight = getPaddingRight(); int spaceConsumedLeft = paddingLeft; //layout the first view on the left : layoutView(cover, spaceConsumedLeft, paddingTop, cover.getMeasuredWidth(), cover.getMeasuredHeight()); ... } private void layoutView(View view, int l, int t, int width, int height) { final MarginLayoutParams margins = (MarginLayoutParams) view.getLayoutParams(); final int leftWithMargins = l + margins.leftMargin; final int topWithMargins = t + margins.topMargin; view.layout(leftWithMargins, topWithMargins, leftWithMargins + width, topWithMargins + height); }

@Override protected void onLayout(boolean changed, int l, int t, int r, int b) { final int paddingLeft = getPaddingLeft(); final int paddingTop = getPaddingTop(); final int paddingRight = getPaddingRight(); int spaceConsumedLeft = paddingLeft; //layout the first view on the left : layoutView(cover,...); spaceConsumedLeft += getMeasuredWidthWithMargin(cover); //layout the overflow button on the right, centered vertically: layoutView(overflow, r - l - paddingRight - overflow.getMeasuredWidth(), (b - t - overflow.getMeasuredHeight()) / 2, overflow.getMeasuredWidth(), overflow.getMeasuredHeight()); int spaceConsumedRight += getMeasuredWidthWithMargin(overflow); ... }

The result : • Exact same disposi/on • Flat View hierarchy • Op/mal measure & layout performances

GfxInfo adb shell dumpsys gfxinfo package.name

** Graphics info for pid 9070 [deezer.android.app] ** Stats since: 327647766133375ns Total frames rendered: 27544 Janky frames: 721 (2.62%) 90th percentile: 12ms 95th percentile: 14ms 99th percentile: 24ms Number Missed Vsync: 54 Number High input latency: 2 Number Slow UI thread: 228 Number Slow bitmap uploads: 43 Number Slow issue draw commands: 400

To Conclude

No content

Resources • Nexus 5 mockup • Profiling diagram • Perf Colt • Deezer Pixel Droid illustra