5. Testing the effectiveness of different Android Tools in detecting performance issues caused by Oversize Image Rendering

8 min readDec 18, 2022

5.1 Introduction

Android devices have different shapes and sizes. Each of the devices has different pixel densities.

pixel densities here refer to the number of dots per square inch of the screen. This defines the sharpness of graphics that are seen on the screen.

ImageView is the primary android component used to render images in Android Applications. Every image resource that is added to app resources has its own width and height defined in pixels. And Imageview used on the UI can also have its own width and height. It is very important to have the Image resources of the scale of the image view in which it is shown. This is important because a process called decoding is run to convert image resources to bitmap shown in the image view. The time taken for bitmap decoding is proportional to the size of the image which is being used. If the size of the image is much bigger than the size of the image view in which it is going to be shown, the system will spend extra processing time to show the same UI on the screen as the image with the same height and width of image view.

5.2 Code Implementation of Test

In order to test the performance degradation in rendering images of larger sizes than the image view size in comparison to rendering images of same size as image view, we will use a Samsung S21 device with xxhdpi screen density. We will add an image view of the size of 900 x 600 pixels in the activity UI. Additionally, we have two image resources with same visualization but with two heights 900 x 600 pixels and 2700 x 1800 pixels. Both of these images are in the drawable -xxhdpi folder as the screen density of the device is xxhdpi. We will then verify our hypothesis of performance degradation due to image decoding of a bigger image , by running the tools against an activity with the bigger image in the same image view.

5.2.1 ImageActivity.java

package com.example.perforamancetest.overdraw_custom_view;
import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.Bundle;
import android.widget.ImageView;
import com.example.performancetest.R;

/**
* Demonstration Activity to present performance degradation with showing larger image on imageview of smaller size
*/
public class ImageActivity extends Activity {
 private ImageView imageView;

 @Override
 public void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_images);
 imageView = findViewById(R.id.image_view);
 findViewById(R.id.btn_add_cards_View).setOnClickListener(v -> {
 Bitmap bitmap = BitmapFactory.decodeResource(getResources(),R.drawable.image_resource_2700_1800);
 imageView.setImageBitmap(bitmap);
 });
 }
}

Code 26. ImageActivity.java

5.2.2 activity_images.xml

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 xmlns:tools="http://schemas.android.com/tools"
 android:id="@+id/activity_droid_cards_container"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:paddingLeft="@dimen/activity_horizontal_margin"
 android:paddingTop="@dimen/activity_vertical_margin"
 android:paddingRight="@dimen/activity_horizontal_margin"
 android:paddingBottom="@dimen/activity_vertical_margin"
 tools:context="com.example.perforamancetest.overdraw_custom_view.ImageActivity">
 <Button
 android:id="@+id/btn_add_cards_View"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_marginTop="32dp"
 app:layout_constraintEnd_toEndOf="parent"
 app:layout_constraintStart_toStartOf="parent"
 app:layout_constraintTop_toTopOf="parent"
 android:text="Show Cards View"/>
 <ImageView
 android:id="@+id/image_view"
 android:layout_width="900px"
 android:layout_height="600px"
 app:layout_constraintTop_toBottomOf="@id/btn_add_cards_View"
 app:layout_constraintBottom_toBottomOf="parent"
 app:layout_constraintStart_toStartOf="parent"
 app:layout_constraintEnd_toEndOf="parent"
 />
</androidx.constraintlayout.widget.ConstraintLayout>

Code 27. activity_images.xml

5.2.3 image_resource_900_600.java

Figure 100. Image of 900 X 600 pixel dimension

5.2.4 image_resource_2700_1800.java

Figure 101. Image of 2700 X 1800 pixel dimension

5.3 Tool Test

5.3.1 LayoutInspector Tool Test

5.3.1.1 LayoutInspector on Oversize Image Rendering

Figure 102. LayoutInspector result for 2700 x 1800 pixel dimension image

5.3.1.2 LayoutInspector on Correct Size Image rendering

Figure 103. LayoutInspector result for 900 x 600 pixel dimension image

5.3.1.3 LayoutInspector Tool Test Result

It is clearly visible from the component tree of Figure 102 and Figure 103 that the layout hierarchy for both layouts with 900 X 600 and 2700 X 1800 pixel dimension images is the same. This indicates LayoutInspector is ineffective in detecting any UI performance degradation due to oversize image rendering.

5.3.2 Debug GPU Overdraw Tool Test

5.3.2.1 Debug GPU Overdraw on oversize image rendering

Figure 104. Debug Gpu overdraw result for oversize image rendering

5.3.2.2 Debug GPU Overdraw on correct size image rendering

Figure 105. Debug Gpu overdraw result for Correct Size image rendering

5.3.2.3 Debug GPU Overdraw Tool Test Result

It is clearly visible from the overdraw areas of Oversize image rendering(Figure 104) and correct size image rendering(Figure 105) that there is no difference in results of applying Debug GPU overdraw tool on both UI . This proves that Debug GPU overdraw tool is ineffective in detecting performance degradation due to oversize image rendering.

5.3.3 Profile GPU rendering Tool Test

5.3.3.1 Profile GPU rendering on oversize image rendering

Figure 106. Profile GPU rendering result for oversize image rendering

5.3.3.2 Profile GPU rendering on correct size image rendering

Figure 107. Profile GPU rendering result for Correct size image rendering

5.3.2.3 Profil GPU rendering Tool Test Result

It is clearly visible from the rendering bars of Oversize Image rendering ( Figure 106) and correct size image rendering(Figure 107) that the rendering bars with correct size image rendering are smaller in height than rendering bars with oversize image rendering. Moreover, the rendering bars for correct size image rendering are below the red marker line which denote 16 ms frame time. The first high bar above green marker line for both correct size image rendering and oversize image rendering are because of launcher activity launch for the app. We exclude that bar for our analysis and only consider remaining bars which are drawn after button is pressed and image is rendered. The increase in height of rendering bars for oversize is primarily because of the red and orange lines. The red bars correspond to command issue which represents the time spent by Android’s 2D renderer issuing commands to OpenGL to draw and redraw display lists. The height of this bar is directly proportional to the sum of the time it takes each display list to execute — more display lists equals a taller red bar. The yellow bar correspond to Swap Buffers which represents the time the CPU is waiting for the GPU to finish its work. If this bar gets tall, it means the app is doing too much work on the GPU.

Above indicates that the profile GPU rendering is effective in detecting the rendering performance issues caused by oversize image rendering.

5.3.4 Show View Updates Tool Test

5.3.4.1 Show View Updates for FibonacciActivity.java on oversize image rendering

The result of applying Show View Updates developer option on oversize image rendering [29]

5.3.4.2 Show View Updates for FibonacciActivity.java on correct image rendering

The result of applying Show View Updates developer option on correct size image rendering [30]

5.3.4.3 Show View Updates Tool Test Result

It is clearly visible from the video result for oversize image rendering[29] and correct size image rendering[30] that there is significant difference in results of applying this tool. The view updates slow down when rendering oversize image. This indicates that the Show view updates tool is effective in detecting the rendering performance issues caused by oversize image rendering.

5.3.5 Android CPU Profiler Tool Test

5.3.5.1 Android CPU Profiler tool test for oversize image rendering
5.3.5.1.1 System Trace CPU Profiler output

Figure 109. The CPU profiler system trace visualization for oversize image rendering in imageview

Figure 109 presents that most of the frames are janky after pressing button to show the oversized image on imageview

Figure 110. The CPU profiler system trace — All Frame visualization for oversize image rendering in imageview

Figure 111. The CPU profiler system trace — Janky Frame visualization for oversize image rendering in imageview

In Figure 111, it can be observed all the frames for oversize image rendering are janky.

Figure 112. The CPU profiler system trace visualization for oversize image rendering in imageview

In Figure 112, It can be seen that decodeBitmap and draw calls are one major cause of the jank frames.

5.3.5.2 Android CPU Profiler tool test for Correct Size Image rendering
5.3.5.2.1 System Trace CPU Profiler output

Figure 113. The CPU profiler system trace visualization for Correct Size image rendering in Imageview

Figure 114. The CPU profiler system trace — All Frame visualization for Correct Size image rendering in Imageview

Figure 115. The CPU profiler system trace — Janky Frame visualization for Correct Size image rendering in Imageview

From Figure 115, we see that there is no UI jank when OptimizedCardsView is rendered on the screen.

5.3.5.3 Android CPU Profiler Tool Test Result

It is clearly visible from the CPU profiler result for oversize image rendering and correct size image rendering in imageview that there is significant reduction in number of jank frames by using image of the size of imageview rather than using image of size much bigger than imageview provided all other aspects of image apart from dimensions remain the same. This indicates that the CPU profiler tool is effective in detecting the rendering performance issues caused by oversize image rendering in imageview.