Most of the time, we software developers focus on optimizing our code. We want it to be fast, easy to understand, and easy to maintain. Many of those codes are related to data handling, API queries, record updates, etc. But how many times do we worry about optimizing the user interface?

When we navigate to a screen in any application, we usually load a certain amount of information. If the load is slow, the first culprit is the process that retrieves the information that should be displayed on that page, but this is not always the case. Sometimes the slowness is due to the view not being programmed properly and doing something called “overdraw”.

“Overdrawing” occurs when your app draws the same pixel more than once within the same frame. Your app might be doing more rendering work than necessary, which can be a performance problem due to extra GPU effort to render pixels that won’t be visible to the user.

Fortunately, Android has some tools to identify and correct those scenarios.

The first one is the GPU Overdrawing Debug tool.

• To enable it, go to Settings and select Developer Options.
• Look for the Hardware accelerated rendering section, and select Debug GPU Overdraw.
• In the Debug GPU overdraw dialog, select Show overdraw areas.

With this, you can recognize where overdrawing is occurring in your application.

The second tool is the GPU Rendering Profiler

• You can enable it by going to Settings and Developer Options.
• In the Monitoring section, select Profile GPU Rendering or Profile HWUI rendering, depending on the version of Android running on the device.
• In the Profile GPU Rendering dialog, choose On screen as bars to overlay the graphs on the screen of your device.

Now we will show you an example with a custom application we wrote in Xamarin.Forms

• This application shows a list of some employees here at Trailhead. As you can see, it shows their profile picture, name, position, and a brief summary of their expertise.

#mobile #android #c# #ui/ux #xamarin