GPU Overdraw Optimization & Lowering - Android

Question

I turned on the Overdraw GPU option in the developer’s settings and noticed that my application is not very optimized, and I'm not sure where to change it to make it work a little better. Here is a picture of it.

The red sections are part of the ListView, so I don’t know how to optimize it while maintaining the same style. The following is the layout.xml layout 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 really lost by sorting out this, and I'm glad to provide any other files that you might want to facilitate the drag and drop of the GPU that happens. I am not sure what to do, as it is a ListView and therefore cannot be easily modified. Keep in mind that style should be kept as close as possible.

Answer 1

RelativeLayout and children for your strings do not seem to be a problem. Instead, it is up to them.

You should read the post about Romain Guy’s novel about diagnosing jank (or similar coverage in :: cough :: well-rated books by Android developers) .In particular, use the Hierarchy View to determine what overlays and try to get rid of unnecessary layers, or at least make them transparent if their color is completely overlapped by something higher along the Z axis.

Some of them may require changes in your design or, perhaps, significant difficulties in achieving your current look. For example, your 5dip indentation causes the ListView be inserted into the page, which means that everything behind it is scanned at the edges. Therefore, you cannot get rid of the material behind it, or make it completely transparent, as the user can see. You may be able to work out a tool where only the 5dip border 5dip and the inside is transparent, but can become messy.

Other things may be easier to recover. For example, a green bar with a bluish area below it suggests that your green bar is a bit of a View that overlays over the main body of the page background. If you can make them stacked vertically rather than stacked on top of each other, this will eliminate the overdraft gap.

(Of course, it could be a ViewPager to do this, as I assume you are using ViewPager here, and I never tested overdraw on the ViewPager user interface)