Optimising and lowering GPU Overdraw - Android

Question

I turned on the GPU Overdraw overlay in the developer settings and noticed my app is not very optimised and I am unsure where to change it to make it work a bit better. Here is an image of it.

The red sections are all part of a ListView and so that is where I don't know how to optimise it while keeping the same style. Here is the layout.xml for each ListView section:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="@drawable/background_card"
android:orientation="horizontal"
android:padding="5dip" >

<ImageView
    android:id="@+id/list_image"
    android:layout_width="50dip"
    android:layout_height="50dip"
    android:src="@drawable/gta5thumb"
    android:padding="3dip"
    android:background="@drawable/image_bg"
    android:layout_centerVertical="true"/>





<TextView
    android:id="@+id/title"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignTop="@id/list_image"
    android:layout_toRightOf="@id/list_image"
    android:text="Grand Theft Auto 5"
    android:textColor="#040404"
    android:textSize="18sp"

    android:layout_marginLeft="4dp"
    android:textStyle="bold"/>

<TextView
    android:id="@+id/date1"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_below="@id/title"
    android:textColor="#343434"
    android:textSize="14sp"
    android:layout_marginTop="1dip"
    android:layout_toRightOf="@id/list_image"
    android:layout_marginLeft="4dp"
    android:text="17th September 2013" />
<TextView
    android:id="@+id/date2"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_below="@id/date1"
    android:textColor="#343434"
    android:textSize="14sp"
    android:layout_marginTop="1dip"
    android:visibility="visible"
    android:layout_marginLeft="4dp"
    android:layout_toRightOf="@id/list_image"
    android:text="17th September 2013" />
<TextView
    android:id="@+id/date3"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:textColor="#343434"
    android:textSize="14sp"
    android:layout_marginLeft="4dp"
    android:text="17th September 2013"
    android:layout_below="@+id/date2"
    android:layout_toRightOf="@+id/list_image"/>

<TextView
    android:id="@+id/platforms"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:layout_alignTop="@id/title"
    android:gravity="right"
    android:text="360, PS3"
    android:layout_marginRight="3dip"
    android:textSize="12sp"
    android:textColor="#10bcc9"
    android:textStyle="bold"/>

 <!-- Rightend Arrow -->    
 <ImageView android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/arrow"
    android:layout_alignParentRight="true"
    android:layout_centerVertical="true"/>

</RelativeLayout>

I am really lost with sorting this out and I am happy to give any other files you may want to help ease the GPU Overdraw that is happening. I am unsure what to do as it is a ListView and so cannot be changed as easily. Keep in mind the style needs to be kept as close as possible.

Answer 1

The RelativeLayout and children for your rows would not appear to be the problem. Instead, it's stuff behind them.

You should read Romain Guy's epic blog post on diagnosing jank (or similar coverage in ::cough:: well-regarded Android developer books). Specifically, use Hierarchy View to determine what is layered upon what, and try to get rid of unnecessary layers outright, or at least make them transparent if their color is completely overlapped by something higher in the Z-axis.

Some of it may require changes in your design, or perhaps significant complexities in achieving your current look. For example, your 5dip of padding is causing the ListView to be inset within the page, meaning that whatever is behind it peeks through on the edges. Hence, you cannot get rid of the stuff behind it, or make it fully transparent, as it is visible to the user. You may be able to work out a means whereby only the 5dip border exists and the interior is transparent, but that may get messy.

Other stuff may be simpler to repair. For example, the green strip with the blue-ish area beneath it suggests that your green strip is some View that is layered over the bulk of the page background. If you can make those be vertically stacked, rather than overlapping, that would eliminate a pinch of overdraw.

(Of course, that could be ViewPager doing that, as I'm guessing that you're using ViewPager here, and I have never checked overdraw on a ViewPager-based UI)