UI optimization of android applications

Dino Kovač, Ivan Marić

–Donald Knuth

“Premature optimization is the root of all evil.”

Tools

• Hierarchy Viewer

• “Show GPU Overdraw” (Developer options, android 4.2+)

Example app• One relevant activity

• Two lists

• A compound view as the right list item

View tree

How android draws views

1. measure pass - each view stores its measurements

2. layout pass - each view positions its children

3. draw pass - each view draws itself

Focus of optimization• Flattening layout hierarchy

• Minimizing overdraw

Layout simplification

<merge />

<merge />

Overdraw

• Pixels get drawn more than once

• blue(2), green(3), light red(4), dark red(5)

• mostly multiple backgrounds

Tweaking the selector

Overdraw before/after

Some numbers

Hierarchy depth

Total views Measure Layout Draw Total

Before 9 76 0.354 1.7792 3.3624 5.4956

After 8 52 0.3402 1.0984 2.7098 4.1484

Space

• “a lightweight View subclass that may be used to create gaps between components”

• draw() method empty

ViewStub

• “an invisible, zero-sized View that can be used to lazily inflate layout resources at runtime”

• does not support the <merge /> tag

ViewStub use case

ViewStub usage

((ViewStub) findViewById(R.id.stub_import)).inflate();

View tree before inflating

View tree after inflating

Think outside of boxIvan Marić

Problem

• Implement items preview in grid

• Enable swipe gesture

• Enable editing grid

• No limit to number of pages

Solution

• ViewPager with GridView

• Grid item view states:• Preview empty state• Item preview• Edit empty state

Optimize

• Simplify layout with just one view

• Eliminate measurement

• Custom view

References• http://www.youtube.com/watch?v=URyoiAt8098

• http://www.youtube.com/watch?v=-FUw8HMbmBQ

• http://android-developers.blogspot.com/2009/03/android-layout-tricks-3-optimize-by.html

• http://developer.android.com/training/improving-layouts/optimizing-layout.html

• http://android-developers.blogspot.com/2009/03/android-layout-tricks-3-optimize-with.html

• https://github.com/reisub/android_uioptimizationexample