Let’s Talk About GPU Rendering Speed and Overdrawing in Android

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.

Despite being a simple application, the Overdrawing tool is showing almost everything as red. This is because we used a non-optimized layout to draw the view.

Let’s take a look at the Rendering Speed.

As we can see, it’s quite high. A bit over half of the available graphic processing power just to load and update this screen.
Now, let’s optimize the code from this:

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="https://xamarin.com/schemas/2014/forms" xmlns:local="clr-namespace:Demo.ViewModels" xmlns:model="clr-namespace:Demo.Models" xmlns:x="https://schemas.microsoft.com/winfx/2009/xaml" x:Class="Demo.Views.ItemsPage" Title="{Binding Title}" x:Name="BrowseItemsPage">
   <ContentPage.ToolbarItems>
      <ToolbarItem Text="Add" Command="{Binding AddItemCommand}" />
   </ContentPage.ToolbarItems>
   <ContentPage.Content>
      <ListView ItemsSource="{Binding Items}" SelectionMode="None" HasUnevenRows="True">
         <ListView.ItemTemplate>
            <DataTemplate>
               <ViewCell>
                  <Frame Padding="10" BackgroundColor="WhiteSmoke">
                     <StackLayout Orientation="Vertical" VerticalOptions="FillAndExpand" BackgroundColor="WhiteSmoke">
                        <StackLayout Orientation="Horizontal">
                           <Frame CornerRadius="100" Padding="0" IsClippedToBounds="True" HorizontalOptions="Center">
                              <Image Source="{Binding AvatarUrl}" HeightRequest="100" />
                           </Frame>
                           <StackLayout Padding="10">
                              <StackLayout Orientation="Horizontal">
                                 <Label Text="{Binding Name}" BackgroundColor="WhiteSmoke" FontSize="21" />
                                 <Label Text="{Binding LastName}" BackgroundColor="WhiteSmoke" FontSize="21" />
                              </StackLayout>
                              <Label Text="{Binding Position}" BackgroundColor="WhiteSmoke" LineBreakMode="NoWrap" FontSize="21" Padding="5" />
                           </StackLayout>
                        </StackLayout>
                        <Label Text="{Binding Description}" BackgroundColor="WhiteSmoke" FontSize="18" Padding="5" />
                     </StackLayout>
                  </Frame>
               </ViewCell>
            </DataTemplate>
         </ListView.ItemTemplate>
      </ListView>
   </ContentPage.Content>
</ContentPage>

To this:

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="https://xamarin.com/schemas/2014/forms" xmlns:local="clr-namespace:Demo.ViewModels" xmlns:model="clr-namespace:Demo.Models" xmlns:x="https://schemas.microsoft.com/winfx/2009/xaml" x:Class="Demo.Views.ItemsPage" Title="{Binding Title}" x:Name="BrowseItemsPage">
   <ContentPage.ToolbarItems>
      <ToolbarItem Text="Add" Command="{Binding AddItemCommand}" />
   </ContentPage.ToolbarItems>
   <RefreshView x:DataType="local:ItemsViewModel" Command="{Binding LoadItemsCommand}" IsRefreshing="{Binding IsBusy, Mode=TwoWay}">
      <CollectionView x:Name="ItemsListView" ItemsSource="{Binding Items}" SelectionMode="None">
         <CollectionView.ItemTemplate>
            <DataTemplate>
               <Grid x:DataType="model:Item" Padding="10">
                  <Grid.RowDefinitions>
                     <RowDefinition Height="25" />
                     <RowDefinition Height="75" />
                     <RowDefinition Height="*" />
                  </Grid.RowDefinitions>
                  <Grid.ColumnDefinitions>
                     <ColumnDefinition Width="120" />
                     <ColumnDefinition Width="*" />
                  </Grid.ColumnDefinitions>
                  <Image Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" HorizontalOptions="Center" Source="{Binding AvatarUrl}">
                     <Image.Clip>
                        <EllipseGeometry Center="50,50" RadiusX="50" RadiusY="50" />
                     </Image.Clip>
                  </Image>
                  <Label Grid.Row="0" Grid.Column="1" Text="{Binding FullName}" FontSize="21" />
                  <Label Grid.Row="1" Grid.Column="1" Text="{Binding Position}" FontSize="21" />
                  <Label Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" Text="{Binding Description}" FontSize="18" />
               </Grid>
            </DataTemplate>
         </CollectionView.ItemTemplate>
      </CollectionView>
   </RefreshView>
</ContentPage>

In this simple example, we’ve changed only the view. Now let’s take a look at the results.

As you can see, we don’t have any red overlays now. It means we’re using the right amount of code needed to draw this page. How about the rendering speed?

We’ve cut in half the amount of required GPU time needed for our app. Even if you have high-end devices, this means our screen will load twice as fast compared to our previous version.

Why is it so important anyway?

  • UX Response Time: You want your app to behave as smoothly as possible for a positive user experience. This translates to fast screen loading times. A “Loading …” tooltip can only get you so far.
  • Scarce Resources: Memory, CPU time, and battery are scarce resources on mobile devices. Good handling of the rendering work can reduce how much of those your app uses. Most OSes alert users when an app is consuming a lot of resources so we should strive to stay away from that list.
  • Benchmarking: This is a competitive market. Having a positive benchmark score due to the rendering optimization gives you an edge.

Thanks for reading!

Related Blog Posts

We hope you’ve found this to be helpful and are walking away with some new, useful insights. If you want to learn more, here are a couple of related articles that others also usually find to be interesting:

Our Gear Is Packed and We're Excited to Explore with You

Ready to come with us? 

Together, we can map your company’s tech journey and start down the trails. If you’re set to take the first step, simply fill out the form below. We’ll be in touch – and you’ll have a partner who cares about you and your company. 

We can’t wait to hear from you! 

This field is for validation purposes and should be left unchanged.

Together, we can map your company’s tech journey and start down the trails. If you’re set to take the first step, simply fill out the form below. We’ll be in touch – and you’ll have a partner who cares about you and your company. 

We can’t wait to hear from you! 

Montage Portal

Montage Furniture Services provides furniture protection plans and claims processing services to a wide selection of furniture retailers and consumers.

Project Background

Montage was looking to build a new web portal for both Retailers and Consumers, which would integrate with Dynamics CRM and other legacy systems. The portal needed to be multi tenant and support branding and configuration for different Retailers. Trailhead architected the new Montage Platform, including the Portal and all of it’s back end integrations, did the UI/UX and then delivered the new system, along with enhancements to DevOps and processes.

Logistics

We’ve logged countless miles exploring the tech world. In doing so, we gained the experience that enables us to deliver your unique software and systems architecture needs. Our team of seasoned tech vets can provide you with:

Custom App and Software Development

We collaborate with you throughout the entire process because your customized tech should fit your needs, not just those of other clients.

Cloud and Mobile Applications

The modern world demands versatile technology, and this is exactly what your mobile and cloud-based apps will give you.

User Experience and Interface (UX/UI) Design

We want your end users to have optimal experiences with tech that is highly intuitive and responsive.

DevOps

This combination of Agile software development and IT operations provides you with high-quality software at reduced cost, time, and risk.

Trailhead stepped into a challenging project – building our new web architecture and redeveloping our portals at the same time the business was migrating from a legacy system to our new CRM solution. They were able to not only significantly improve our web development architecture but our development and deployment processes as well as the functionality and performance of our portals. The feedback from customers has been overwhelmingly positive. Trailhead has proven themselves to be a valuable partner.

– BOB DOERKSEN, Vice President of Technology Services
at Montage Furniture Services

Technologies Used

When you hit the trails, it is essential to bring appropriate gear. The same holds true for your digital technology needs. That’s why Trailhead builds custom solutions on trusted platforms like .NET, Angular, React, and Xamarin.

Expertise

We partner with businesses who need intuitive custom software, responsive mobile applications, and advanced cloud technologies. And our extensive experience in the tech field allows us to help you map out the right path for all your digital technology needs.

  • Project Management
  • Architecture
  • Web App Development
  • Cloud Development
  • DevOps
  • Process Improvements
  • Legacy System Integration
  • UI Design
  • Manual QA
  • Back end/API/Database development

We partner with businesses who need intuitive custom software, responsive mobile applications, and advanced cloud technologies. And our extensive experience in the tech field allows us to help you map out the right path for all your digital technology needs.

Our Gear Is Packed and We're Excited to Explore with You

Ready to come with us? 

Together, we can map your company’s tech journey and start down the trails. If you’re set to take the first step, simply fill out the contact form. We’ll be in touch – and you’ll have a partner who cares about you and your company. 

We can’t wait to hear from you! 

This field is for validation purposes and should be left unchanged.

Thank you message.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.