Performance #3 layout&animation
-
Upload
vitali-pekelis -
Category
Software
-
view
220 -
download
0
Transcript of Performance #3 layout&animation
Britt Barak
Britt Barak
3
●Real - Android Team Leader
●Android Academy TLV
Yonatan Levin
Android Evangelist Gett
Idan FelixSenior Android &
Redhead Varonis
Jonathan Yarkoni
Android Developer & Advocate Ironsource
Android Academy Staff
Britt Barak
Android LeadReal
Muiriel Felix
Android Design
What’s next?
4/7 - Yonatan- Networking, JSON, Batching, Location
10/8 - Felix- Battery & CPU
14/9 - Britt- Threading
How Is Motion Perceived?
SmoothMotion
60
No Difference
60+
Flip Book
12
Movies
Frames Per Second
Fluid Motion
24+effects
We Have A Winner!
SmoothMotion
60
No Difference
60+
Flip Book
12
Movies
Frames Per Second
Fluid Motion
24+effects
SmoothMotion
60
Colt McAnlis: https://youtu.be/CaMTIgxCSqU
Rasterization
From a high level object into pixels on screen (or in
texture).
https://en.wikipedia.org/wiki/Rasterisation
GPU Profiling● A graph per visible app● A bar per frame● Render time corresponds height● 16 millis benchmark (green)● Crossing = skipping frame
https://developer.android.com/studio/profile/dev-options-rendering.html
VSync/Misc
Input
Animation
Measure/ Layout
Draw
Sync & Upload
Command Issue
Swap Buffers
So What Does That Mean?
Vsync / Misc Time
Misc = (vsync timestamp) - (timestamp when received) → work on the UI thread between two consecutive frames
● Choreographer log : “Missed vsync by XX ms skipping XX frames”
High? move work off UI ThreadVSync/Misc
Input
Animation
Measure/Layout
Draw
Sync & Upload
Command Issue
Swap Buffers
Input Handling
App code inside an input event callback.
High? optimize/offload processing input
VSync/Misc
Input
Animation
Measure/Layout
Draw
Sync & Upload
Command Issue
Swap Buffers
Animation
Evaluate all running animatorsOften : object animator, view property animator, and transitions
High?(2milis+) check custom animators / unintended work
VSync/Misc
Input
Animation
Measure/Layout
Draw
Sync & Upload
Command Issue
Swap Buffers
Measure / Layout
Executing layout and measure callbacks for needed view.
More on that in a few slides :)
VSync/Misc
Input
Animation
Measure/Layout
Draw
Sync & Upload
Command Issue
Swap Buffers
Draw
update (/creates) all display lists+cache.
High?
complex onDraw() logicmany views invalidated
VSync/Misc
Input
Animation
Measure/Layout
Draw
Sync & Upload
Command Issue
Swap Buffers
Sync & Upload
Upload bitmap to the GPU. High?
Too many imagesToo big of an image
VSync/Misc
Input
Animation
Measure/Layout
Draw
Sync & Upload
Command Issue
Swap Buffers
Command Issue
Execution: Android's 2D renderer issuing commands to OpenGL to draw and redraw all display lists
High?●Complex view (custom?)●Many views redrawing:
○Invalidation○animationVSync/
Misc
Input
Animation
Measure/Layout
Draw
Sync & Upload
Command Issue
Swap Buffers
Swap Buffers
CPU done rendering and wait for GPU ack.
High?
A lot of GPU work
VSync/Misc
Input
Animation
Measure/Layout
Draw
Sync & Upload
Command Issue
Swap Buffers
TOD
AY
VSync/Misc
Input
Animation
Measure/ Layout
Draw
Sync & Upload
Command Issue
Swap Buffers
So What Does That Mean?
Prev
. ta
lk
Step 1: Measure
Goal: obtain view size
REF: http://developer.android.com/reference/android/view/View.html#onMeasure(int, int)
Step 1: Measure
Goal: obtain view size, including its descendants size
REF: http://developer.android.com/reference/android/view/View.html#onMeasure(int, int)
Step 1: Measure
Goal: obtain view size, including its descendants size, agreed by its parent.
REF: http://developer.android.com/reference/android/view/View.html#onMeasure(int, int)
Step 1: Measure - What’s View SIZE?
- width & height (aka: drawing width & drawing height) - - Actual size on screen, at drawing time and after layout.
REF: http://developer.android.com/reference/android/view/View.html#onMeasure(int, int)
Step 1: Measure - What’s View SIZE?
- width & height (aka: drawing width and drawing height)
- the actual size of the view on screen, at drawing time and after layout.
- measured width & measured height- how big a view wants to be within its parent
REF: http://developer.android.com/reference/android/view/View.html#onMeasure(int, int)
Step 1: Measure - What’s View SIZE?
- Including Padding- Excluding Margins
- (supported by view groups: ViewGroupand ViewGroup.MarginLayoutParams )
REF: http://developer.android.com/reference/android/view/View.html#onMeasure(int, int)
Communicate Dimensions● ViewGroup.LayoutParams ● MeasureSpec
ViewGroup.LayoutParams
How big the View wants to be For each dimension, it can specify one of:
an exact number
MATCH_PARENT
WRAP_CONTENT
*Might be subclassed, like in RelativeLayout
MeasureSpec
Parent requirement for childUNSPECIFIED: as child wants
EXACTLY: exact size
AT MOST: maximum size
Multiple measure() Calls
measure() may be called more than onceFor example:
- Call once with UNSPECIFIED
- If size too big/small- evaluate- Call with exact size
Step 1: Measure - How Does It Work?
● measure(int, int) ○ → (calls onMeasure() which should be overridden)
● Set measuredWidth & measuredHeight○(can call super)
● Including for the View's descendants.
● respects parents’ constraints.
REF: http://developer.android.com/reference/android/view/View.html#onMeasure(int, int)
Step 1: Measure - Reminder
Goal: obtain view size, including its descendants size, agreed by its parent.
REF: http://developer.android.com/reference/android/view/View.html#onMeasure(int, int)
Step 2: Layout
Goal : set position for view and all its children
REF: http://developer.android.com/reference/android/view/View.html#onLayout(boolean, int, int, int, int)
Step 2: Layout● layout(int, int, int, int)
○ → (calls onLayout() which should be overridden)
● Assign a size and position to a view and all of its descendants○(can call super)
● Including for the View object's descendants.
● respects parents’ constraints.
REF: http://developer.android.com/reference/android/view/View.html#onMeasure(int, int)
- View draws itself with size and position from previous steps.
- onDraw(Canvas) is called- Canvas object generates (or Updates) a list of
OpenGL-ES commands (displayList) to send to the GPU.
Step 3: Draw (AKA Update)
REF: http://developer.android.com/reference/android/view/View.html#onDraw(android.graphics.Canvas) Guide: http://developer.android.com/training/custom-views/custom-drawing.html
When Things Change...
E.g. text, color, size, padding, margin...A view notifies the system, by calling:Invalidate - which will call the onDraw again, orrequestLayout - which will call the entire process again.
Root View : RelativeLayout
2 passes per change:1)By views’ requests
a)Then relativeLayout calculates by relations & weights
2)Determine the final positions for rendering.
Root View : RelativeLayout
Example:●Every view is RelativeLayout●Per Leaf change:
2*2*2 = 8 traversals
X2
X2
X2
Root View : LinearLayout
Generally issues 1 layout requestUnless:
●measureWithLargestChild(true)○Children with weights will have minimum size of largest child
●Nested weights
Root View : GridLayout
Allows relative positioning, while preprocessing the child view relationships.
Root View : GridLayout
Generally issues 1 layout requestUnless:
●Layout_gravity: fill*●Wrong weights
What can we do?●Flatten hierarchy :
Removing unneeded views
Merge on include
flatter layout
Beware double layout taxation
Minimize layout requests
Hierarchy Viewer
Tools→ Android → Android Device Monitor → Hierarchy Viewer
Display complete view hierarchy
Access to all the views’ propertiesGet performance stats
Hierarchy Viewer- Green dot : in the faster 50%
of all the View objects- Yellow : in the slower than 50%- Red: the slowest
- requestLayout:
Simple VS Complex Layouts●Simple : LinearLayout, FrameLayout, TableLayout
●Complex : RelativeLayout , GridLayout
Simple VS Complex Layouts●Simple : LinearLayout, FrameLayout, TableLayout
○→ Nesting → Performance Problems●Complex : RelativeLayout , GridLayout
○→ hard to use & maintain○→ shouldn’t be @ top hierarchy
Constraint Layout●Api 9+●Performance oriented:
○Reduce nesting
○Improve measure/layout
○Best practice : top level, without nesting layouts
User friendly:Expressive
New layout Editor!
The New Layout Editor
Android Studio 2.2 PreviewDesigned for ConstraintLayout - but not only!
Works with all layouts
Better with custom views (use View.isInEditMode())
More features : like editing menu resources….
Setting Up
1.Android Studio 2.2 Preview2.Android Support Repository (version 32+):3.Add the library on your build.gradle file:
dependencies {compile 'com.android.support.constraint:constraint-layout:1.0.0-alpha3'
}
Concept
Similar to RelativeLayout : Position a view relative to other layout elements.
Yet more expressive & powerful
Getting Started
Drag a widget from Palette to the work space
Click a widget to see properties on the right
Idea
View has 4 sides : left, top, right, bottom + baseline for textviewSo we can:
Connect view side to layoutConnect 2 view sidesAlign 2 view sidesAlign 2 textview baselines
Side Constraint Handle
Locate the view within the layout. app:layout_constraintRight_toRightOf="@+id/text_like_count"
Baseline Constraint Handle
align the baseline of multiple textviewsapp:layout_constraintBaseline_toBaselineOf="@+id/text_title"
Possible Attributes
layout_constraintX_toYOf X and Y can be replaced with:
a.Topb.Bottom c.Leftd.Righte.Startf. Endg.Baseline
Centering
constraints from both sides (ie top and bottom of view to top and bottom of layout)
And then...
Horizontal Bias
Positioning relative to constrained position.
app:layout_constraintHorizontal_bias="0.5"
Deleting Constraints
Single constraints - click the anchor point
All constraints for a viewbutton when view is selected
All constraints for layouticon on top bar
Converting To ConstraintLayout
1.Open layout on editor2.right-click the layout → Convert <layout> to
ConstraintLayout.
Well, that about it!
Not officially released, but quite stable. Give it a try :)
https://codelabs.developers.google.com/codelabs/constraint-layout/index.html
Animation
Reminder : Changing a view property causes invalidation.
Same for animation, when changing the animated property (e.g. x coordinate, scale, alpha value etc.)
View Layer - Hardware Acceleration
Render into an off-screen buffer (backed by Hardware)
Texture is created in the GPU for our viewChange properties without invalidatingSmoother animation
https://developer.android.com/guide/topics/graphics/hardware-accel.html#drawing-support
View Layer - Hardware Acceleration
Screen
GPUPolygons Texture
s
CPU
new Button()
DisplayList
Make Changes Here
Properties
alpha: Changes the layer's opacity
x, y, translationX, translationY: Changes the layer's position
scaleX, scaleY: Changes the layer's size
rotation, rotationX, rotationY: Changes the layer's orientation in 3D space
pivotX, pivotY: Changes the layer's transformations origin
// Using ObjectAnimatorview.setLayerType(View.LAYER_TYPE_HARDWARE, null);ObjectAnimator animator =
ObjectAnimator.ofFloat(view, "rotationY", 180);animator.addListener(new AnimatorListenerAdapter()
{ @Override public void onAnimationEnd(Animator animation)
{ view.setLayerType(View.LAYER_TYPE_NONE,
null); }});animator.start();
Remember!
1.Clean up the space○hardware layers consume of GPU limited memory space
2.Invalidation on hardware layer has a large overhead.
Hardware Layers Updates Tool
Developer Options → Enable the “Show hardware layers updates” → Green flash when hardware layer updates
ViewTreeObserver
●Provided by the view hierarchy●Use to register listeners to view tree global
changes○For example: layout of the whole tree, beginning of the drawing,
touch mode change....
●Use with getViewTreeObserver()
https://developer.android.com/reference/android/view/ViewTreeObserver.html
Tips During Animation
Don’t request measure / layoutBefore / After / Tree Observer
Don’t inflateexplicitly or implicitly by launching an activity
Animate properties that do not trigger layoutFor example: translationX and translationY and not LayoutParams
properties
Talked About●Double Layout Taxation●Flatten hierarchy - why and how●Constraint layout●View tree observer●Hardware accelaration
Tips
1.measure() only during layout()2.No layout() during layout() 3.No layout / measure during animation4.No inflation during animation5.Minimize requestLayout()6.Invalidate regions when possible [rather than
whole view]
Tips
7. New allocations during traversal :On layout - ok-ish
On measure - avoid
On draw - no way! [called each frame!]
Tips
8. Animate without trigger layout9. Animate with hardware acceleration
Clean upDon’t invalidate on layer
LinksAndroid UI Performance:
● https://www.youtube.com/watch?v=CaMTIgxCSqU● https://www.youtube.com/watch?v=dB3_vgS-Uqo ● https://www.youtube.com/watch?v=WH9AFhgwmDw● https://www.youtube.com/watch?v=1iaHxmfZGGc● https://www.youtube.com/watch?v=we6poP0kw6E● https://youtu.be/erGJw8WDV74 ● https://medium.com/google-developers/developing-for-android-iii-2efc140167fd#.7lyadzb2a● http://blog.udinic.com/2015/09/15/speed-up-your-app● https://www.youtube.com/watch?v=sdkcuvZCh1U● https://medium.com/google-developers/developing-for-android-iii-2efc140167fd#.7lyadzb2a
How Android draws :● https://developer.android.com/guide/topics/ui/how-android-draws.html● https://blog.inovex.de/android-graphics-pipeline-from-button-to-framebuffer-part-1/● https://blog.inovex.de/android-graphics-pipeline-from-button-to-framebuffer-part-2/
LinksGPU Profiling:
● https://developer.android.com/studio/profile/dev-options-rendering.html ● https://youtu.be/VzYkVL1n4M8 ● https://developer.android.com/studio/profile/am-gpu.html
Hierarchy Viewer:● https://developer.android.com/studio/profile/optimize-ui.html● https://developer.android.com/studio/profile/hierarchy-viewer-walkthru.html
Constrain Layout:● https://www.youtube.com/watch?v=sO9aX87hq9c● http://tools.android.com/tech-docs/layout-editor● https://medium.com/exploring-android/exploring-the-new-android-constraintlayout-eed37fe8d8f1#.mzf
wdhxon● https://codelabs.developers.google.com/codelabs/constraint-layout/index.html