AndroIdiots Podcast 12: Make Better Views

Almost every android developer daily works on making views. It's a most common job but making good efficient views is not as simple as it appears.

In this I will try to cover actually how a view is rendered on screen and what can we do to make efficient views or view groups. Later in the next article, I will discuss everything related to custom views — how to build them, why to use them.

Lifecycle of view

If we see in the above flow there are three main parts in the lifecycle of view. Measure, Layout and finally draw. All of this happens on UI thread. View Group is like a tree which is traversed in a pre-order manner. Parent view group is responsible for asking its children to be drawn.

Measure Pass

This is a top-down pass in view tree. After this pass, all views have stored their measurements. If you override this method then you need to set measureHeight and measureWidth of the view. A parent view might call measure more than once on its child view

Layout Pass

After each view knows its measurement now is the time to calculate where they will get placed on the screen. This is also a top-down pass of view tree. During this, each parent is responsible for positioning each of their children using measurement calculated in measure pass.

Draw

It actually provides you with canvas as a parameter on which you can draw shapes, path, lines using Paint. Since now after layout pass position of each view is known on the screen parent asks each of its children to draw itself recursively

This is the basic lifecycle of a view now everything happens on a UI thread it's very important that all of this happens fast. Android refreshes its screen after every 16ms so if at this time UI thread is not free we see the drop in frame rate. Which provides a hanging experience or may even lead to ANR.

How to make efficient views

1. FLAT VIEWS — Try to make view hierarchy as flat as possible. If a view has more hierarchy that means the height of the view tree will be more which means all passes will take more time. If you change a child view eg. set a new text to textview which causes the height of textview to change now this will cause the entire view to draw again and all passes will have to run from the start.
2. NUMBER OF PASSES — Like mentioned before some time it takes more than one pass for a view group to calculate its measurement so more the number of passes more is the time taken. eg. a linear layout with its child using weights takes 2 passes to draw so if the same view can be drawn such that it takes 1 pass by using constraint layout or relative layout or making a custom view then it should be done.
3. Resource Allocation — Resouce allocation are heavy so if you are making a custom view then we should not allocate resources in onMeaure(), onLayout() or onDraw() as they are called frequently.
4. OverDraw — This happens when the same pixel on the screen is drawn more than once in a single frame. So actually we waste GPU resource as only last drawn pixel is visible to the user. This is one of the most common issues. Flat hierarchy also helps in reducing them. Other things to avoid this is removing unneeded background or transparency.
5. invalidate vs requestLayout — These two methods are very useful and should be used carefully. All your use case will work fine when you use requestLayout but in some cases, this will add extra overhead as it starts the view pass from the start. Invalidate on the other hand only gives a call to onDraw so in cases where no position or measurement change is there we should use invalidate and if we want complete reset of view we can use requestLayout.

Profiling view

You can switch on Debug GPU overdraw and Profile GPU rendering from developer option provided by android.

Overdraw

It shows overdraw by colour coding your ui. This can help us identify where more rendering work is done that can be reduced to increase efficiency. Its divided into 5 bands

1. true — No overdraw
2. blue — 1 time
3. green — 2 time
4. pink — 3 time
5. red — 4 time

GPU rendering

It shows a running histogram that represents how much time it takes to render a frame relative to 16ms per frame. Looking at this histogram we can figure out that at which place is more time getting consumed and then optimise it.

Layout Inspector

Android studio provides us with the layout inspector which provide the representation of your view hierarchy which can help us reduce extra nesting and make views flat. You can get the screenshot of the complete view tree

You can also measure your rendering quality from firebase dashboard. It gives you metrics for each screen and also you can check it according to android version and other parameters

Making a view that seems to be pretty simple and straight forward actually has a lot of things going on at the back. For better user experience and smooth apps, we need to make fast, efficient and light views. I have tried to cover things about view in this blog and will soon write about making custom views.

We are inviting Android Developers to contribute back to the community via AndroIDIOTS. If you are interested in recording a podcast or writing tech articles, we would love to have you on board. Here is a small form you can fill so we can get back to you:

Follow us on twitter for regular updates and feel free to DM the hosts (Anupam & Tushar) for any queries.

Cheers!!