Question

I’m looking for ideas on how to optimize the following code which is the body of a for loop:

final BitmapFactory.Options options = new BitmapFactory.Options();
options.inSampleSize = 4;
options.inJustDecodeBounds = false;
ImageButton view = new ImageButton(this);
view.setBackgroundColor(0);
view.setOnClickListener(new OnClickListener(){
@Override
public void onClick(View v) {
     finalThis.onBorderClicked(v);
}
});
view.setTag(i); //i is the loop counter

Bitmap big = BitmapFactory.decodeResource(getResources(), borders[i], options);
Bitmap smaller = Bitmap.createScaledBitmap(big, borderDimension, borderDimension, false);

view.setImageBitmap(smaller);

view.setLayoutParams(new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.FILL_PARENT));
((LinearLayout.LayoutParams)view.getLayoutParams()).setMargins(0, 0, -5, 0);
group.addView(view);

big.recycle();

Basically I’ve got images that are 600×600 and I want to get them to size of around 50dp. So naturally, I first set the sample size to 4 (600 / 4 = 150), so that I don’t occupy unnecessary memory and then further resize the image down to the specified size. I then use it to load it onto an ImageButton, and also I recycle the bigger, now useless Bitmap.

This is a dynamic UI creation code, the ImageButtons are added to a HorizontalScrollView. Thing is, in one case, I’ve got to add more than hundred ImageButtons to the UI and this code is awfully slow.

The question is: how can I make it work faster? It is currently executed on the MainActivity, could multithreading (perhaps AsyncTask) help in this instance? And is there any other way that would possibly be faster for getting the Bitmaps to the desired size? If there is no way to make this process significantly faster, then is there a way to progressively add the ImageButtons one by one (but in the same order) so that the UI is not frozen when all of this happens?

Answer 1

Taking your code off the main thread will not make the application process the images any faster, but it will keep the UI responsive to the user while that process is taking place and is absolutely a necessary step when you have this much data to load at once. However, keep in mind that you cannot manipulate the view hierarchy from any thread other than the main thread, so you cannot just place this whole operation inside of an AsyncTask.doInBackground(). You will have to split out the lines that take the most time (i.e. your decodeResource() and createScaledBitmap() calls), but the code to instantiate and add views to the parent will need to happen in onPostExecute() or publishProgress() (depending on how you implement the task logic).

Thing is, in one case, I’ve got to add more than hundred ImageButtons to the UI and this code is awfully slow.

Another important thing to keep in mind is that having upwards of 100 image-based views in your hierarchy at any one time is still a large chunk wasted memory. The best way to speed up the process is not to add all the views at once, but only add them as they are needed (i.e. when the user scrolls over) and then remove/recycle views that are no longer on screen. This is how AdapterView implementations work for this very reason, use only the memory you need and your app will be both faster and more efficient.

I realize there is no HorizontalListView in the framework, but there are 3rd party implementations that provide this functionality for you, or you can look at the source for one of the framework classes to build your own from.