Profiling UI Layouts In Android For Performance Improvements

Something that any application should be concerned with is performance. One way to look at performance is via profiling. Most IDEs and platforms provide tools to profile your application to take a look at detailed system information about various parts of your application. With Android applications you can execute an adb command to generate a very thorough snapshot of the graphics information and that’s what we’re going to look at in this post.

What is Profiling?

Profiling is the analysis that measures the memory or complexity of a program, the usage of the program, or the frequency and duration of function calls. In simple terms it is analyzing how your program is performing on the system it is executing on.

Getting Started with the Android Debug Bridge

You will need to have adb configured on your machine since we’ll be using the Android Debug Bridge to generate reports for our application.

You will also need to know your android application’s package name, this would be something like com.instagram.android. If you are unsure of the Android app’s package name you can get this from the AndroidManifest.xml or the projects gradle file.

While this isn’t exactly profiling it is useful to determine the graphics info of your application. If you want to profile the CPU, RAM, network, etc. during execution, Android Studio provides an excellent profiler to dig deep into the system.

The ADB Command

Once adb is setup and we know the application’s package name. Execute the following command to generate a system report for our process. We are going to use Instagram as our example here.

adb shell dumpsys gfxinfo com.instagram.android > layout-profile.txt

Let’s look at this command so we understand what it’s doing.

First, we are executing a dumpsys and since we are interested in the performance related to our app’s UI we are passing gfxinfo which is for graphics information.

Then you’ll notice com.instagram.android (Instagram’s package name), we are providing this argument to the command because we are only interested in the data for one process and not the entire system.

Last you’ll notice > layout-profile.txt this is writing the output from the command to a txt file in the directory we execute this command.

No doubt that is a lot to digest and we don’t have the source to modify and play around to see what optimizations we could make so let’s try with a NativeScript application. We’ll generate the report with the basic “Hello World” sample and then we’ll add other views to the page and see how that affects memory usage.

Create a NativeScript Application

Assuming you have the NativeScript CLI installed, execute tns create profile from your terminal to generate a bare “Hello World” NativeScript application. Run the app with tns run android in the root of the project and then execute the gfxinfo command using the package name for our NativeScript application.

It should be adb shell dumpsys gfxinfo org.nativescript.profile > layout-profile.txt unless you didn’t use profile for the app name when creating. The report in the text file will look similar to the output below:

Now that we have a report with zero modifications to the “Hello World” template vs. a small change to add several images and buttons we can see that we increased the Total GPU memory usage, which is to be expected. We also increased the Total DisplayList, again normal and to be expected since more UI views were added to the page.

A key take away from the report is looking at the Total GPU memory usage data. I’ve worked on several applications that had layouts that were duplicating the device’s drawing effort to render go from 23+MB to ~10-12MB. Also remember that this concept applies to any target platform that renders a UI. The more UI to measure and draw, the more resources the machine will use to do so.

How to Improve Your Skills

Flatten your layouts so that you reduce the resources for measuring and drawing the UI.

This was talked about at the NativeScript developer days conference in 2017 - video here.

Compress and size images correctly.

Use list views (view recyclers) also known as virtualization list components on the web.

Profile and measure your changes during development to see if performance is improving.

Conclusion

In this post we reviewed how to generate graphics information reports using the Android Debug Bridge (ADB) for Android applications. With the reports you can view many statistics related to the applications frame and graphics performance to determine how well the UI is functioning. This is scratching the surface of profiling the layouts of Android applications but it should provide enough insight to monitor your development and be aware of your app’s layouts and implementation.