When I started in Android and iOS app development I came from a web development environment and this both benefits and halts the creation of mobile apps. You can take your same design, creativity and basic layout skills across but when it comes to native mobile specific details this does not cross. 

When I started I also did not have time to learn the fundamentals as project deadlines took priority.

One of the core fundamentals I came to learn was the GPU overdraw feature in the android dev tools. This turned out to be the greatest find and a massive boost to our app at the time. At the time we had a successful non-laggy iOS app but with the same code and styles our android app was struggling, big time!

After some research (playing around) in the android dev tools I came across GPU overdraw when selecting the “show on screen” option I was greeted with a whole new world of green, blue and a lot of red! If you know anything about GPU overdraw red is not good.

Lets take a look into what this is showing:

android-overdraw-device

To explain:

android-overdraw-colours

The easiest way I found to visualise this is as follows. Imagine the app’s design as a cake with many layers, for each background or border you add to an element you add another layer to the cake. Now normally have many layers of cake is great! But like I said the app world is like the 4th dimension, a totally different world! In app development having many layers is not good and results in lower performance.

The phone has to re-draw all of the layers when scrolling and loading the app. When scrolling with many layers the app feels laggy as if you are dragging it through mud.  The app is redrawing all the layers for every pixel you are scrolling. Having to redraw multiple requires more resource. So the more layers you have, the laggier the app becomes. Simple, right!?

So how do I fix this, you ask?

Well, great question! The simple answer is: Reduce any unneeded background colours or borders.

If the background of your app is white and you are setting another layer on top of it to have a white background you are doing double the work. remove that extra white background on top. if you are only using a border bottom or only using a border top replace it with a StackLayout with a background of 1px height to create the same effect but only effecting 1px instead of the entire height of the element.

Leave a Reply

Your email address will not be published. Required fields are marked *

Add to cart