Overdraw issues

The interface of your app needs to render quickly, and interaction, such as scrolling through a list, for example, should run smoothly. In particular, older or low-end devices often have a hard time to do these things right. An unresponsive or slow UI can be the result, which is often caused by something that is called overdraw.

Overdraw is the phenomenon of a pixel on a view being drawn more than once. A colored background with a view on top of that has another background color is an example of overdraw (the pixel is drawn twice), but that's not really an issue. Too much overdraw, however, will have an impact on your app's performance.

Getting ready

You will need to have a real device and you need to complete the The Bad app from the previous recipe to demonstrate overdraw issues, but you can examine any other app as well if you like.

How to do it...

Your device contains a couple of interesting developer options. One of them is the Debug GPU overdraw option which can be obtained by following next steps:

  1. On your device, open the Settings app.
  2. Select Developer options.

    Note

    If the Developer options item is not available on your device, you need to go to About device first and click seven times on Build number. Once you're done, go back. A new option called Developer options now appears in the list.

  3. Find the Debug GPU overdraw option and click on it:
    How to do it...
  4. In the dialog that pops up, select the Show overdraw area.
  5. Now, your device looks a little bit like a 3D movie without the corresponding glasses, but what actually is being shown here is this: colors indicate the amounts of overdraw, where no color means no overdraw (a pixel is painted only once), blue shows an overdraw of 1, green an overdraw of 2, light red an overdraw of 3, and dark red an overdraw of 4 times or even more.

    Tip

    A maximum overdraw of 2 times is acceptable, so let's concentrate on the red sections.

  6. Run the app you would like to examine. For this recipe, I have chosen to examine the The Bad app from the previous recipe, shown as follows:
    How to do it...
  7. Yeah, that is pretty bad. Every view has its own background color, resulting in overdraw.
  8. Android is smart enough to reduce some overdraw cases, but for complex apps, you need to fix them yourself. When you look at the layout for both the activity and adapter from the previous recipe, this cannot be that difficult.
  9. First, open the activity_main.xml layout file. Remove the background property from the list view, since it is not being used anyway. Also, remove the background property from the RelativeLayout file, as I do not like orange any way, at least not for apps.
  10. Remove the background property from the main_text_genre, main_text_director, and the main_text_actors text views. Also, remove the background property from their parent view, which is the last TableRow appearing within TableLayout.
  11. If you rerun the app, the app not only does the layout somewhat better, but you will also notice that there is less indication of overdraw.
  12. Let's check whether we can make further improvements. Change FrameLayout at the root to RelativeLayout. Get rid of TableLayout and position the text views relatively:
    <?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android=
  "http://schemas.android.com/apk/res/android"
    android:orientation="vertical"    
    android:layout_width="match_parent"
    android:background="@android:color/holo_green_light"
    android:padding="8dp"
    android:layout_height="match_parent">
    <ImageView
        android:id="@+id/main_image"android:src="@android:drawable/ic_media_play"android:layout_marginTop="8dp"android:layout_width="80dp"android:scaleType="fitCenter"android:layout_height="60dp" />
    <TextView android:layout_width="match_parent"android:id="@+id/main_text_title"android:layout_marginTop="8dp"android:layout_toRightOf="@+id/main_image"android:background="@android:color/holo_purple"android:textSize="24sp"android:layout_height="wrap_content"android:textColor="@android:color/white"android:text="Line 1"/>
    <TextView android:layout_width="match_parent"android:id="@+id/main_text_year"android:layout_height="wrap_content"android:layout_toRightOf="@+id/main_image"android:layout_below="@+id/main_text_title"android:background=
         "@android:color/holo_blue_light"android:textSize="20sp"android:layout_marginTop="8dp"android:textColor="@android:color/white"android:text="Line 2"/>
    <TextView android:layout_width="match_parent"android:id="@+id/main_text_genre"android:layout_height="wrap_content"android:layout_toRightOf="@+id/main_image"android:layout_below="@+id/main_text_year"android:textSize="16sp"android:layout_marginTop="8dp"android:textColor="@android:color/white"android:text="Sub  1"/>
    <TextView android:layout_width="match_parent"android:id="@+id/main_text_director"android:layout_height="wrap_content"android:layout_toRightOf="@+id/main_image"android:layout_below="@+id/main_text_genre"android:textSize="16sp"android:layout_marginTop="8dp"android:textColor="@android:color/white"android:text="Sub 2"/>
    <TextView android:layout_width="match_parent"android:id="@+id/main_text_actors"android:layout_height="wrap_content"android:layout_toRightOf="@+id/main_image"android:layout_below="@+id/main_text_director"android:textSize="16sp"android:layout_marginTop="8dp"android:textColor="@android:color/white"android:text="Sub 3"/>
</RelativeLayout>
  13. Run your app again. It is getting better and better, is it not?
  14. To further improve your app, remove all text properties. They were only there to check whether we were doing the right thing using the layout_toRightOf and layout_below properties.

In this recipe, we have further improved our bad app by optimizing its layout. Also, it is no longer ugly. Actually, it has become quite good.

What layout type to use?

Using RelativeLayout is more effective than LinearLayout but unfortunately it is not so developer friendly if, for example, you want to move or remove a text view that another view is referring to using a relative property.

The FrameLayout is much less complex, but it does not have this problem, and it seems to perform as well as RelativeLayout.

On the other hand it is not intented to contain many child widgets. Please be aware that in the end what counts is the smallest number of nested layout views, so you should pick the container that suits your needs and performs best.

Awesome! Our app runs smoothly on all devices. We do not expect any weird errors any more.

Now let's ship it to our beta users to find out what they think of it. We will find out once we have completed the final chapter, where we will discuss adhoc distribution.

There's more...

There are more interesting tools that you perhaps would like to examine in order to improve the quality and performance of your app.

We have mentioned Espresso before. Robotium is another Android test automation framework for UI testing purposes. You can find it at http://robotium.com.

See also

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset