Published Fall, 2017

To demonstrate UI profiling in Android, here is a real world example. The picture below is from the Play Store app of a popular European news magazine. I turned on the built-in GPU Profiler and navigated between screens. As you can see, this caused a significant amount of UI janking. To understand the output, there are two important details. The first is that every application needs to complete its processing within 16ms or the UI will glitch. This deadline is identified by a faint green line towards the bottom of the screen (highlighted with the small red arrow). The second is that any bar going beyond that line is contributing to jank. These are highlighted by the large red arrow.

UIJank

To understand what is happening, here is a slice of the systrace from the same app. The red circle at the top of the screen identifies a UI problem. The description at the bottom of the screen says it represents 32.838 ms UI delay.

UIJank

So what is happening here? The answer comes from another GPU profiling tool provided by Google. In this case, it is the “GPU Overdraw” tool. And it turns any view that is excessively overdrawn a reddish pink color. Now look at the results running the news magazine app.

And the root cause for overdraw is usually an overly deep view hierarchy. This theory is confirmed by running a View Hierarchy Dump of this app from Android Studio DDMS.