Advanced #4 GPU & Animations

Refael Ozeri
CEO @ Hero Apps
Android Academy

> 3500 members
Largest Android Active
Community

Android Academy Staff
Yonatan Levin
Google Developer
Expert &
CTO @ KolGene
Yossi Segev
Mobile Engineer
Tech Lead @ Kik
Refael Ozeri
Founder & CEO
Hero Apps
Eden Bugdary
Mobile developer @
AppNext

Fundamentals Squad
Artyom Okun
Mobile Dev @ Colu
Timor Surkis
Android Dev @ Gini Apps

What Do We Do?
● Android Fundamentals
● Android UI / UX
● Community Hackathon
● Android Advanced
● Mentors Program
● Active community

Android Advanced Course
22.8 - UI, GPU, Animations
16.9 - Clean Architecture
3.7 - CPU & Memory
31.7 - Threads & Network
facebook.com/groups/android.academy.ils/

How Is Motion Perceived?
Smooth
Motion
60
No
Difference
60+
Flip Book
12
Movies
Frames Per Second
Fluid Motion
24
+effects

We Have A Winner!
Smooth
Motion
60
No
Difference
60+
Flip Book
12
Movies
Frames Per Second
Fluid Motion
24
+effects
Smooth
Motion
60
Colt McAnlis: https://youtu.be/CaMTIgxCSqU

60 FPS
60 Frames / Second =
Frame / 16.666 Millisecond

Rendering
Turning a UI description into pixels on the
screen.

How Did My Code Become Pixels?
CPU
new
View()

GPU - For The Rescue!
CPU
new
View()
GPU

CPU
new
View()
GPU
Polygons
Textures

CPU
new
View()
GPU
Polygons
Textures
DisplayList

Wait…
DisplayList?! OpenGL?!
WHAT?

DisplayList
A sequence of graphics commands needed to be executed to render a specific view
These commands are a mixture of statements that can be directly mapped to OpenGL
commands

OpenGL
OpenGL is a cross-language, cross-platform API for rendering
2D and 3D vector graphics. The API is typically used to
interact with a GPU, to achieve hardware-accelerated
rendering.

What do we need to do in these 16ms?

Draw
CPU GPU
new
View()
DisplayList

Sync & Upload
CPU
new
View()
GPU
Polygons
Textures
DisplayList

Execute
CPU
new
View()
GPU
Polygons
Textures
DisplayList

Execute
CPU
new
View()
GPU
Polygons
Textures
DisplayList
Frame
Buffer

So, we have a frame buffer that loads our
graphics, what can go wrong?

Bonus Question..
Anyone knows the
name of this game?

First..
let’s understand how our hardware actually
works!

Remember this?
That’s 25 frames
per second

Bonus question:
What’s the difference between PAL / NTSC ?

Bonus question:
What’s the difference between PAL / NTSC ?
PAL (common in Europe and parts of Asia) delivers a frame
rate of 25 fps (frames per second) with 625 lines, while NTSC
(used in the U.S. and Canada) delivers a frame rate of 30 fps
using 525 lines.

That’s our TV on
1,600 frames per
second !

That’s our TV on
146,727 frames
per second !

CPU
new
View()
GPU
Polygons
Textures
DisplayList
Back
Buffer
Frame
Buffer

Performance boost!
The all new RenderThread
(Lollipop & above)

Google I/O 2018 - Drawn out lecture - https://youtu.be/zdQRIYOST64

Layout Inspector
(Formerly Hierarchy Viewer)
Android Studio 3.1+

Layout Inspector
Tools→ Layout Inspector
● Display complete view hierarchy
● Access to all the views’ properties
● Get performance stats

B
The number of times that a given pixel is
drawn in a frame.
Overdraw
Colt McAnlis: https://youtu.be/T52v50r-JfE

Detecting Overdraw
https://developer.android.com/studio/profile/dev-options-

Codelab: https://io2015codelabs.appspot.com/codelabs/android-

Fixing Overdraw
There are 2 common reasons for overdraw:
- Redundant backgrounds / Redundant transparency
- Wasteful onDraw
- Things that aren’t visible at all gets drawn (not using quickReject)
- Things that will be overdrawn gets drawn (not using clipRect)
Colt McAnlis: https://youtu.be/vkTn3Ule4Ps

QuickReject
A method to tell if something can be not drawn at all.
Call quickReject to see if you can skip drawing of things that will be
off screen.
REF: https://developer.android.com/reference/android/graphics/Canvas.html

ClipRect
ClipRect is a way to avoid OverDraw,
By keeping your GPU from drawing pixels that you know that will be
obscured by other stuff,
you refrain from overdraw.

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

16ms line
Dropped
Frames :(
14
accented
if >16ms
Shiney
colors!

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 Thread
VSync/
Misc
Input
Animation
Measure/
Layout
Draw
Sync &
Upload
Command
Issue
Swap
Buffers

Choreographer
Coordinates the timing of animations, input
and drawing.

Ever seen this?
06-29 23:11:17.796: I/Choreographer(691):
Skipped 647 frames! The application may be doing too much
work on its main thread.

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 animators
Often : 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() logic
● many 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 images
● Too 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

How Does A View Display On Screen?
ScreenGPU
Polygons
Textures
CPU
new
Button()
DisplayList

Animations
- View Animation
- Property Animation
- Drawable Animation
- Transition Framework
- Constraint & Motion Layout Animations
- Animated Vector Drawable

View Animation
available since API 1.
Has 4 types of animation capabilities:
Alpha.

View Animation
Alpha, Scale.

View Animation
Alpha, Scale, Rotate.

View Animation
Alpha, Scale, Rotate, Translate.

Property Animation
Property Animation - available since API 11.
Much more capable.
Now it’s not just VIEW, we can animate the property itself.

Drawable Animation
<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
android:oneshot="true">
<item android:duration="500" android:drawable="@drawable/ic_heart_0"/>
</animation-list>

Transition Framework
Transition sets, shared elements, change bounds/transform/clipBounds/imageTransform

Constraint & Motion Layout Animations
Full example -> https://android.jlelse.eu/build-awesome-animations-with-7-lines-of-code-using-constraintlayout-854e8fd3ad93

This animation is created with two different layouts file:
circuit.xml and circuit_detail.xml

private fun showComponents() {
val constraintSet = ConstraintSet()
constraintSet.clone(this, R.layout.circuit_detail)
val transition = ChangeBounds()
transition.interpolator = AnticipateOvershootInterpolator(1.0f)
transition.duration = 1200
TransitionManager.beginDelayedTransition(constraint, transition)
constraintSet.applyTo(constraint)
}

Full example -> https://medium.com/google-developers/introduction-to-motionlayout-part-iii-47cd64d51a5
Let’s touch a bit on the new motion layout :)

Keep in mind, motion layout can only provide its capabilities to its direct children
MotionLayout with CoordinatorLayout

With NavigationDrawer

With ViewPager

Quote of the day
“Making a beautiful app is easy,
Making it fun and easy to ride for a first timer is
the real challenge.”

Quote of the day
“Making a beautiful app is easy,
Making it fun and easy to ride for a first timer is
the real challenge.”
Refael Ozeri, 12.2.2018

Vector Drawables
Vector Drawables !

Vector Drawables
Vector Drawables !
Amazing benefit?
It’s density independent which is
both convenient and efficient..
And also leads to smaller APK
size which is always good!

Vector Drawables
How? There are 5 topics we have to cover!

Vector Drawables
● Drawing paths

Vector Drawables
● Drawing paths
● Transforming groups of paths

Vector Drawables
● Drawing paths
● Trimming stroked paths

Vector Drawables
● Drawing paths
● Morphing paths

Vector Drawables
● Drawing paths
● Morphing paths
● Clipping paths

Drawing paths
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="48dp"
android:height="48dp"
android:viewportHeight="12"
android:viewportWidth="12">

<path
android:fillColor="#FF9800"
android:pathData="M 4,2.5 L 4,9.5 L 9.5,6 Z"/>
</vector>

Drawing paths
Command Description
M x,y Begin a new subpath by moving to (x,y).

Drawing paths
Command Description
L x,y Draw a line to (x,y).

Drawing paths
Command Description
C x1,y1 x2,y2 x,y Draw a cubic bezier curve to (x,y) using control points

Drawing paths
Command Description
C x1,y1 x2,y2 x,y Draw a cubic bezier curve to (x,y) using control points
Z Close the path by drawing a line back to the beginning of
the current subpath

Drawing paths
Property name Element type Value type Min Max
android:fillAlpha <path> float 0 1

Drawing paths
android:fillColor <path> integer --- ---

Drawing paths
android:strokeAlpha <path> float 0 1

Drawing paths
android:strokeColor <path> integer --- ---

Drawing paths
android:strokeColor <path> integer --- ---
android:strokeWidth <path> float 0 1

Drawing paths
<path
</vector>
1. M 4,2.5

Drawing paths
<path
</vector>
1. M 4,2.5
2. L 4,9.5

Drawing paths
<path
</vector>
1. M 4,2.5
2. L 4,9.5
3. L 9.5,6

Drawing paths
<path
</vector>
1. M 4,2.5
2. L 4,9.5
3. L 9.5,6
4. Z

Drawing paths
<path
android:pathData="M 4,2.5 L 4,9.5 M 8,2.5 L 8,9.5"
android:strokeColor="#0F9D58"
android:strokeWidth="2"/>
</vector>

Drawing paths

<path
</vector>

Drawing paths
<path
</vector>
1. M 4,2.5

Drawing paths
<path
</vector>
1. M 4,2.5
2. L 4,9.5

Drawing paths
<path
</vector>
1. M 4,2.5
2. L 4,9.5
3. M 8,2.5
4. L 8,9.5

Drawing paths
<path
android:fillColor="#DB4437"
android:pathData="M 2,6 C 2,3.8 3.8,2 6,2 C 8.2,2 10,3.8 10,6 C 10,8.2 8.2,10 6,10 C 3.8,10 2,8.2 2,6"/>
</vector>

Drawing paths

<path
android:fillColor="#DB4437"
android:pathData="M 2,6 C 2,3.8 3.8,2 6,2 C 8.2,2 10,3.8 10,6 C 10,8.2 8.2,10 6,10 C 3.8,10 2,8.2 2,6"/>
</vector>

Transforming groups of paths
Property name Element type Value type
android:pivotX <group> float
android:pivotY <group> float
android:rotation <group> float
android:scaleX <group> float
android:scaleY <group> float
android:translateX <group> float
android:translateY <group> float

Rotated back and forth

Rotated 90 degrees and vertically translated

Ok stop.. Let’s use it?
<?xml version="1.0" encoding="utf-8"?>
<animated-selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/expanded"
android:drawable="@drawable/vd_checkable_expandcollapse_expanded"
android:state_checked="true"/>
<item
android:id="@+id/collapsed"
android:drawable="@drawable/vd_checkable_expandcollapse_collapsed"/>
… </animated-selector>

Ok stop.. Let’s use it?
...
<transition
android:drawable="@drawable/avd_checkable_expandcollapse_collapsed_to_expanded"
android:fromId="@id/collapsed"
android:toId="@id/expanded"/>
<transition
android:drawable="@drawable/avd_checkable_expandcollapse_expanded_to_collapsed"
android:fromId="@id/expanded"
android:toId="@id/collapsed"/>
</animated-selector>

Trimming stroked paths
android:trimPathStart <path> float 0 1
android:trimPathEnd <path> float 0 1
android:trimPathOffset <path> float 0 1

Morphing paths
The true art.
Doesn’t look that fancy right?
Let’s try and add rotation?!

Morphing paths
The true art.
A skilled morph-master
can basically do a LOT
of cool stuff..

So.. about that download icon...
- Fill alpha

- Fill alpha
(at the end when fading out the downloading arrow).

- Fill alpha
- Stroke width

- Fill alpha
- Stroke width
(during the progress indicator to check mark
animation).

- Fill alpha
- Stroke width
- Translation and rotation

- Fill alpha
- Stroke width
(at the beginning to create the ‘bouncing arrow’
effect).

- Fill alpha
- Stroke width
- Trim path start/end

- Fill alpha
- Stroke width
(at the end when transitioning from the progress bar
to the check mark).

- Fill alpha
- Stroke width
- Path morphing

- Fill alpha
- Stroke width
- Path morphing
(at the beginning to create the ‘bouncing line’ effect,
and at the end while transitioning the check mark
back into an arrow).

- Fill alpha
- Stroke width
- Path morphing
- Clip path

- Fill alpha
- Stroke width
- Path morphing
- Clip path
(vertically filling the contents of the downloading
arrow to indicate indeterminate progress).

Important tool to know -Shapeshifter
https://shapeshifter.design/

WOOHOO
So.. now you know all the different powers of
Vector Drawables!

This is you playing around with animations

Or… maybe it’s your designer?! :D

This is you writing insane animations :D

Lottie, by AirBnB
Your designer can create animations using Adobe After Effects and export them to a JSON file.
Lottie builds our animations with that file.
And that’s it :)

Lottie, by AirBnB - Usage
dependencies {
...
implementation
"com.airbnb.android:lottie:$lottieVersion"
...
}

<com.airbnb.lottie.LottieAnimationView
android:id="@+id/animation_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:lottie_rawRes="@raw/hello_world"
//or
app:lottie_fileName="hello_world.json"
//Loop indefinitely
app:lottie_loop="true"
// Start playing as soon as the animation is loaded
app:lottie_autoPlay="true" />

And.. THAT’S IT!

Lottie, by AirBnB - Big tip!
https://www.lottiefiles.com/ is awesome!

Useful links:
Thank you for coming!
How a screen works - https://youtu.be/3BJU2drrtCM
Understanding Overdraw - https://youtu.be/T52v50r-JfE
Overdraw, Cliprect, QuickReject - https://youtu.be/vkTn3Ule4Ps
Invalidations, Layouts, and Performance - https://youtu.be/we6poP0kw6E
Icon animations techniques - https://www.androiddesignpatterns.com/2016/11/introduction-to-icon-animation-
techniques.html

Advanced #4 GPU & Animations

Recommended

Recommended

More Related Content

Similar to Advanced #4 GPU & Animations

Similar to Advanced #4 GPU & Animations (20)

More from Vitali Pekelis

More from Vitali Pekelis (20)

Recently uploaded

Recently uploaded (20)

Advanced #4 GPU & Animations

Editor's Notes