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

No content

Let's profile this view tree : hit the profile node bu/on :

No content

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

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, measureSpec), 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

Let's dive deeper !

Another poten*al bo.leneck : TextView In some cases, TextView can have unsa4sfactory performances : • Long text to display • Combina4on of several Spans

public class AlbumView extends ViewGroup { private TextLayoutHelper textHelper; @Override public boolean willNotDraw() { return false; } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); textHelper.draw(canvas); } }

How to draw a text ?

TextView : 10 000 lines of code BUT does not know how to draw a text. It is delegated to an abstract class : android.text.Layout 3 implementa+ons : • BoringLayout • Sta.cLayout • DynamicLayout

Did you say boring ? BoringLayout.Metrics boring = BoringLayout.isBoring(mText, mPaint); if (boring != null) { mLayout = BoringLayout.make(mText, mPaint, width, Layout.Alignment.ALIGN_NORMAL, SPACING_MULT, SPACING_ADD, boring, true, TextUtils.TruncateAt.END, width); }

Did you say boring ? BoringLayout.Metrics boring = BoringLayout.isBoring(mText, mPaint); if (boring != null) { // this is boring ! if (mSavedLayout != null) { mLayout = mSavedLayout.replaceOrMake(mText, ...); } else { mLayout = BoringLayout.make(mText, ...); } mSavedLayout = (BoringLayout) mLayout;

protected final void createLayout(final int width, final int hOffset) { BoringLayout.Metrics boring = BoringLayout.isBoring(mText, mPaint); if (boring != null) { // this is boring ! if (mSavedLayout != null) { mLayout = mSavedLayout.replaceOrMake(mText, ...); } else { mLayout = BoringLayout.make(mText, ...); } mSavedLayout = (BoringLayout) mLayout; } else { mLayout = new StaticLayout(mText, 0, mText.length(), mPaint, width, Layout.Alignment.ALIGN_NORMAL, SPACING_MULT, SPACING_ADD, true, TextUtils.TruncateAt.END, width, MAX_LINES); }

Finally, let's draw : public final void draw(final @NonNull Canvas canvas) { if (TextUtils.isEmpty(mText)) return; final int saveCount = canvas.save(); canvas.clipRect(mClipBounds); canvas.translate(mClipBounds.left, mClipBounds.top); mLayout.draw(canvas); canvas.restoreToCount(saveCount); }

Advantages : • Total control over the drawing logic, allowing even more customiza7on than with Spans • Allows to mul7thread the text layou7ng logic : instead of crea7ng the text layouts on the main thread, we can create them on a Worker Thread and cache the result.

No content

To Conclude

Resources • Nexus 5 mockup • Profiling diagram • Perf Colt