I've got the below screen that contains some images (6 per visible page). Scrolling up and down seems quite laggy to me. It's like it's rendering the images again. Scrolling back up seems worse than scrolling down.
Anyone know how to increase performance in such an area to create a nice smooth scroll?
Update: The images and text is all retrieved from my SQLite database. The list is created using SimpleCursorAdapter.
private class HistoryViewBinder implements SimpleCursorAdapter.ViewBinder
{
//private int wallpaperNumberIndex;
private int timeIndex;
private int categoryIndex;
private int imageIndex;
private java.text.DateFormat dateFormat;
private java.text.DateFormat timeFormat;
private Date d = new Date();
public HistoryViewBinder(Context context, Cursor cursor)
{
dateFormat = android.text.format.DateFormat.getDateFormat(context);
timeFormat = android.text.format.DateFormat.getTimeFormat(context);
//wallpaperNumberIndex = cursor.getColumnIndexOrThrow(HistoryDatabase.KEY_WALLPAPER_NUMBER);
timeIndex = cursor.getColumnIndexOrThrow(HistoryDatabase.KEY_TIME);
categoryIndex = cursor.getColumnIndexOrThrow(HistoryDatabase.KEY_CATEGORY);
imageIndex = cursor.getColumnIndexOrThrow(HistoryDatabase.KEY_IMAGE);
}
#Override
public boolean setViewValue(View view, Cursor cursor, int columnIndex)
{
Log.d(TAG, "setViewValue");
if (view instanceof TextView)
{
Log.d(TAG, "TextView");
TextView tv = (TextView) view;
if (columnIndex == timeIndex)
{
Log.d(TAG, "timeIndex");
d.setTime(cursor.getLong(columnIndex));
tv.setText(timeFormat.format(d) + " " + dateFormat.format(d));
return true;
}
else if (columnIndex == categoryIndex)
{
Log.d(TAG, "categoryIndex");
tv.setText(cursor.getString(columnIndex));
return true;
}
}
else if (view instanceof ImageView)
{
Log.d(TAG, "ImageView");
ImageView iv = (ImageView) view;
if (columnIndex == imageIndex)
{
Log.d(TAG, "imageIndex");
byte[] image = cursor.getBlob(columnIndex);
Bitmap bitmapImage = BitmapFactory.decodeByteArray(image, 0, image.length);
iv.setImageBitmap(bitmapImage);
return true;
}
}
return false;
}
}
The problem is that each image is decoded at the moment the view is prepared for showing. The ListView will recycle your views that means that at the moment a view leaves the screen it will be reused and therefore the image will be overwritten and garbage collected. If the item reenters the screen the image has to be decoded from the database again.
The decoding is reasonable fast but if the user changes the position in the list very quickly all the decoding calls will make your list very laggy.
I would implment something like an ImageCache. A class that holds a Map with WeakReferences to images. Everytime you want to display an image you take a look if the image is allready in the map and if the WeakReference still points to an object, if this is not the case you need to decode the image and then store it in the map.
Take a look at the lazy loading questions, these will show you how to put the decoding in a background task and then update the list the moment the images are loaded. It is a bit more effort but it can make the list much much more faster. If you are going to use the code example from the lazy loading questions try to use AsyncTasks instead of Threads to do the decoding in.
Here is sth, what you should read, and it should help you to solve problem (whole Displaying Bitmaps Efficiently part):
http://developer.android.com/training/displaying-bitmaps/process-bitmap.html
If your images are not the proper size, they are being scaled on the fly, which is not a cheap operation, particularly for large images. Be sure that you are loading thumbnails, not the wallpaper, out of your database.
Also, you can use Traceview to find out where your time is being spent.
Related
As described in many tutorials and in Android developers pages too, I'm using an async task to load images as thumbnails in a ListView. The task loads full size image from SDcard, resize it and put it in the ImageView of list item's layout.
Everything works well, except for the fact that after scrolling list fast up & down, the image of a single visible element is updated two or three times with different images before getting the right one.
This behavior is related, in my opinion, to the recycling views in ListView: when an asynctask is ready to inject the list's element-X image in the referred view, the view itself might be already been recycled and assigned to list's element-Y.
I'm conscious about some ugliness of my code, for example the fact that I've implemented neither volatile nor persistent cache for thumbnails (targeted for next release), but the problem would be only partially hidden by that.
I found a possible solution using libraries for loading image, but I'm investigating how to fix in my code because the problem is more generally related to using async code in conjunction with list and today I deal with images, but tomorrow I'could face the same problem loading text or any other kind of data.
Possible solutions I'm investigating are:
Inform the asynctask about the item of the list it is working for, once loaded image updates it only if the item is visible
When list detaches the view from element (how can I detect this?), stop the asynctask
Override list's OnScrollListener to check when OnScroll event happens if an item exits from visible items' list and the stop its asynctask, if exists.
Is one of these solutions viable or con you suggest a different one?
This is my list's adapter (I'm using an expandable list in a fragment):
#Override
public View getChildView(int groupPosition, final int childPosition, boolean isLastChild, View convertView, ViewGroup parent) {
Log.i(TAG, "ExpandableListAdapter.getChildView entered, getting view n. " + groupPosition + "-" + childPosition + ", convertview = " + convertView);
ViewHolder holder;
if (convertView == null) {
convertView = inf.inflate(R.layout.selfie_list_item_layout, parent, false);
holder = new ViewHolder();
holder.date = (TextView) convertView.findViewById(R.id.selfieListItemDateView);
holder.place = (TextView) convertView.findViewById(R.id.selfieListItemPlaceView);
holder.thumb = (ImageView) convertView.findViewById(R.id.selfieListItemThumbView);
convertView.setTag(holder);
} else {
holder = (ViewHolder) convertView.getTag();
}
Integer mChildIndex = (Integer) getChild(groupPosition, childPosition);
SelfieItem mChildObj = selfies.get(mChildIndex);
String mText = mChildObj.getDate().toString();
holder.date.setText(mText);
holder.thumb.setImageBitmap(BitmapFactory.decodeResource(convertView.getResources(), R.drawable.selfie_place_holder));
File selfieFile = mChildObj.getFile();
new LoadSelfieTask(mFragmentContext).executeOnExecutor(AsyncTask.SERIAL_EXECUTOR, selfieFile, holder.thumb);
return convertView;
}
And the following is async code:
#Override
protected Bitmap doInBackground(Object... params) {
File selfieFile = (File)params[0];
Bitmap mySrcBitmap = null;
Bitmap myDestBitmap = null;
if (selfieFile.exists()) {
mySrcBitmap = BitmapFactory.decodeFile(selfieFile.getAbsolutePath());
}
if (mySrcBitmap != null) {
// Get info about view to be updated
mImageViewToBeUpdated = (ImageView) params[1];
mImageHeight = mImageViewToBeUpdated.getHeight();
mImageWidth = mImageViewToBeUpdated.getWidth();
if (mySrcBitmap.getWidth() >= mySrcBitmap.getHeight()){
myDestBitmap = Bitmap.createBitmap(
mySrcBitmap,
mySrcBitmap.getWidth()/2 - mySrcBitmap.getHeight()/2,
0,
mySrcBitmap.getHeight(),
mySrcBitmap.getHeight()
);
}else{
myDestBitmap = Bitmap.createBitmap(
mySrcBitmap,
0,
mySrcBitmap.getHeight()/2 - mySrcBitmap.getWidth()/2,
mySrcBitmap.getWidth(),
mySrcBitmap.getWidth()
);
}
mySrcBitmap = Bitmap.createScaledBitmap(myDestBitmap, mImageWidth, mImageHeight, true);
}
return mySrcBitmap;
}
Thanks in advance for your answers.
If you need something quick, try Picasso http://square.github.io/picasso/
Your code is, for each row, create an AsyncTask to fetch image from external storage. You will create another AsynTask to fetch the same image again when you scroll back to a row item. I would suggest you to create a cache to store the result of AsynTask, and have proper cache replacement policy.
I found the answer to my question in the example code of this Android Developers Training Lesson.
In ImageWorker.java we can find the method that launches the backgroud task thad loads the image:
/**
* Load an image specified by the data parameter into an ImageView (override
* {#link ImageWorker#processBitmap(Object)} to define the processing logic). A memory and
* disk cache will be used if an {#link ImageCache} has been added using
* {#link ImageWorker#addImageCache(android.support.v4.app.FragmentManager, ImageCache.ImageCacheParams)}. If the
* image is found in the memory cache, it is set immediately, otherwise an {#link AsyncTask}
* will be created to asynchronously load the bitmap.
*
* #param data The URL of the image to download.
* #param imageView The ImageView to bind the downloaded image to.
*/
public void loadImage(Object data, ImageView imageView) {
if (data == null) {
return;
}
BitmapDrawable value = null;
if (mImageCache != null) {
value = mImageCache.getBitmapFromMemCache(String.valueOf(data));
}
if (value != null) {
// Bitmap found in memory cache
imageView.setImageDrawable(value);
} else if (cancelPotentialWork(data, imageView)) {
//BEGIN_INCLUDE(execute_background_task)
final BitmapWorkerTask task = new BitmapWorkerTask(data, imageView);
final AsyncDrawable asyncDrawable =
new AsyncDrawable(mResources, mLoadingBitmap, task);
imageView.setImageDrawable(asyncDrawable);
// NOTE: This uses a custom version of AsyncTask that has been pulled from the
// framework and slightly modified. Refer to the docs at the top of the class
// for more info on what was changed.
task.executeOnExecutor(AsyncTask.DUAL_THREAD_EXECUTOR);
//END_INCLUDE(execute_background_task)
}
}
A reference to AsyncTask instance is saved in an AsyncDrawable class:
/**
* A custom Drawable that will be attached to the imageView while the work is in progress.
* Contains a reference to the actual worker task, so that it can be stopped if a new binding is
* required, and makes sure that only the last started worker process can bind its result,
* independently of the finish order.
*/
private static class AsyncDrawable extends BitmapDrawable {
private final WeakReference<BitmapWorkerTask> bitmapWorkerTaskReference;
public AsyncDrawable(Resources res, Bitmap bitmap, BitmapWorkerTask bitmapWorkerTask) {
super(res, bitmap);
bitmapWorkerTaskReference =
new WeakReference<BitmapWorkerTask>(bitmapWorkerTask);
}
public BitmapWorkerTask getBitmapWorkerTask() {
return bitmapWorkerTaskReference.get();
}
}
At the end of background activity, the AsyncTask verifies if it is the last to be "attached" to the view it has to update and performs update only if no other task have been "attached" to the view
/**
* Returns the ImageView associated with this task as long as the ImageView's task still
* points to this task as well. Returns null otherwise.
*/
private ImageView getAttachedImageView() {
final ImageView imageView = imageViewReference.get();
final BitmapWorkerTask bitmapWorkerTask = getBitmapWorkerTask(imageView);
if (this == bitmapWorkerTask) {
return imageView;
}
return null;
}
/**
* Once the image is processed, associates it to the imageView
*/
#Override
protected void onPostExecute(BitmapDrawable value) {
//BEGIN_INCLUDE(complete_background_work)
// if cancel was called on this task or the "exit early" flag is set then we're done
if (isCancelled() || mExitTasksEarly) {
value = null;
}
final ImageView imageView = getAttachedImageView();
if (value != null && imageView != null) {
if (BuildConfig.DEBUG) {
Log.d(TAG, "onPostExecute - setting bitmap");
}
setImageDrawable(imageView, value);
}
//END_INCLUDE(complete_background_work)
}
Cancelling AsyncTasks? Is that a good idea? I have found that it does not work many times and postExecute() is always called so its a possibility your image will be still laid out in the listview, maybe a wrong one which will further mess up your scenario..
I'm showing list with one ImageView on every row of list.
For that, I download images from net in another AsyncTask using Drawable.createFromStream
And store them as Drawable in ArrayList which I pass to my Adapter class extending BaseAdapter class.
But the images are taken with high-resolution camera, so may be of very large size.
And I'm getting OutOfMemory error.
So my questions :
What is more efficient, storing images as drawable or as bitmap or any other format?
Am I doing right, by storing all images in memory(in array list). i.e. I'm thinking, once I get a image, I will show it on ImageView and will not store in ArrayList.
is there any way, I can compress the images after download, so they will take less space in memory.
My total code is present here
Android documentation provides a very good example showing how to handle bitmaps in your android app. The example uses an on-disk and in-memory cache and loads the images in the background. By doing so, the main UI thread is not slowed down by loading the images.
Loading Bitmaps effectively
In the example the images are loaded from picasa. It's easy, however, to adapt the example, so that pictures stored locally are used. You simply have to write your own ImageLoader extending from the 'ImageResizer':
public class ImageLoader extends ImageResizer {
public ImageLoader(Context context, int imageWidth, int imageHeight) {
super(context, imageWidth, imageHeight);
}
public ImageLoader(Context context, int imageSize) {
super(context, imageSize);
}
#Override
protected Bitmap processBitmap(Object data) {
return decodeSampledBitmapFromFile((String)data, imageWidth, imageHeight);
}
}
But to answer your question directly: it's ok to load images as Bitmaps. But you have to use a cache and weak references, so that the images can be garbage collected in case they are not visible on the screen. Caching them and using a background task for loading allows for a slick UI.
I don't see any efficiency in storing high-density images into memory - it's totally not recommended to store large ammount of images as bitmaps in memory (good for you that you have a good device ;))
See p.1
Try downscaling the images to fit the device's needs - that's not a simple job though. Also, see View.setTag(Object tag)
The adapter
public class MyImageListAdapter extends BaseAdapter implements ImageLoadingNotifier {
private LayoutInflater inflater = null;
public MyImageListAdapter() {
inflater = LayoutInflater)HomeActivity.this.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
}
public int getCount() {
return listImageInfo.size();
}
public Object getItem(int position) {
return listImageInfo.get(position);
}
public long getItemId(int position) {
return position;
}
public View getView(int position, View convertView, ViewGroup parent) {
View vi = convertView;
if (convertView == null) {
vi = inflater.inflate(R.layout.list_row, null);
}
TextView tvName = (TextView) vi.findViewById(R.id.tv_name);
TextView tvTime = (TextView) vi.findViewById(R.id.tv_time);
ImageView image = (ImageView) vi.findViewById(R.id.iv_image);
final Button btnDelete = (Button) vi.findViewById(R.id.btn_delete);
image.setImageDrawable(R.drawable.default_placeholder);//set default place-holder
new GetDrawableFromUrl(listImageInfo.get(position), vi).execute();
tvName.setText("Name: " + listImageInfo.get(position).getImage_name());
tvTime.setText("Date: " + listImageInfo.get(position).getDate_created());
btnDelete.setOnClickListener(new OnClickListener() {
public void onClick(View v) {
final int position = listView.getPositionForView((View) v.getParent());
positionOgBtnToDelete = position;
Log.v("delete btn clicked", "delete btn no: " + position);
Toast.makeText(HomeActivity.this, "Btn delete position: " + position, Toast.LENGTH_LONG).show();
showAlertToConfirmDelete();
}
});
return vi;
}
}
The AsyncTask GetDrawableFromUrl
public class GetDrawableFromUrl extends AsyncTask<Void, Void, Drawable> {
public ImageInfo imageInfoObj;
private ImageView view;
GetDrawableFromUrl(ImageInfo imageInfo, ImageView view) {
imageInfoObj = imageInfo;
this.view = view;
}
#Override
protected Drawable doInBackground(Void... params) {
try {
return Drawable.createFromStream(((java.io.InputStream) new java.net.URL(imageInfoObj.getImageUrl()).getContent()), "src_name");
} catch (Exception e) {
e.printStackTrace();
}
return null;
}
protected void onPostExecute(Drawable drawable) {
if (drawable != null) {
//imageInfoObj.setImage(drawable);
this.view.setImageDrawable(drawable);
//listImageInfo.add(imageInfoObj); //this one is called when the json is parsed
showImagesInList(); //don't know what it does (??)
}
}
}
The JSON parsing
JSONArray jsonArray = jsonObj.getJSONArray("result");
for (int i = 0; i < jsonArray.length(); i++) {
JSONObject jsonObjInner = jsonArray.getJSONObject(i);
ImageInfo imageInfo = new ImageInfo();
imageInfo.setImageUrl("http://www.dvimaytech.com/markphoto/" + jsonObjInner.getString("image"));
//new GetDrawableFromUrl(imageInfo).execute(); //don't needed here
imageInfo.setEmail(jsonObjInner.getString("emailid"));
imageInfo.setImage_id(jsonObjInner.getString("image_id"));
imageInfo.setImage_name(jsonObjInner.getString("image_name"));
imageInfo.setAmount(jsonObjInner.getString("amount"));
imageInfo.setImage_description(jsonObjInner.getString("image_description"));
imageInfo.setDate_created(jsonObjInner.getString("date_created"));
listImageInfo.add(imageInfo);
}
And, the use of any kind of List of images becomes unnecesary :)
Instead of starting the async task (GetDrawableFromUrl) when parsing the json objects, you can start the task in getView(...) method. This way you will not be constrained to store the drawables into that ArrayList, since you'll be modifying the ImageView after the image was downloaded. And, by default, you can put a placeholder, until the image is downloaded (or in case there are some network errors).
This way the images will start downloading only when the getView method will be called for that specific item.
The bottom line is that each view from the ListView will keep a reference to it's specific drawable (that was set using vi.setTag(image).
If this helps somehow, you know what to do ;)
There is pretty good library calling AQuery. YOu can use it and simple get all stuff like memory and file caching by writting only 2 line of code. So you even wouldn't need to prepare a drawable, you can call it directly from Adapter.getView() callback.
AQuery aq = new AQuery(rowView);
aq.id(R.id.image).image(url, false, true);
Hope it help you!
From AQuery docs:
Down Sampling (handling huge images)
We are loading a huge image from the network, but we only need the image to be bigger than 200 pixels wide. Passing in the target width of 200 will down sample the image to conserve memory.Aquery will only down sample with power of 2 (2,4,8...) for good image quality and
efficiency.The resulting image width will be between 200 and 399 pixels
String imageUrl = "http://farm6.static.flickr.com/5035/5802797131_a729dac808_b.jpg";
aq.id(R.id.image1).image(imageUrl, true, true, 200, 0);
one again facing a "strange" problem.
Im using a Viewpager to display 2 separate images (Viewpager contains just a layout and 2 imageviews).
The concept would be, display a low resoltion image from local file cache (immediately) and load the high-res picutre meanwhile and show it.
the problem is: only using low res pictures, pictures are showing immediately and everything perfect, but as soon as high-res pictures are enabled (to be shown),
if the user swipes really fast, the screen stays black for "a short time" (500ms to 1,5s) and low resolution images are never displayed.
just the high-res pictures..
maybe anyone faced a similar problem, any assistance appriciated :) thank you!
ViewPager code:
/**
* Create and add a new page of the image at the given position.
*
* #param collection
* #param position
*/
#Override
public Object instantiateItem (View collection, final int position) {
Log.v(TAG, "instantiateItem: pos: " +position);
final Context context = collection.getContext();
RelativeLayout layout = new RelativeLayout(context);
ImageViewTouch imageView = new ImageViewTouch(context);
ImageViewTouch imageView2 = new ImageViewTouch(context);
RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams(
RelativeLayout.LayoutParams.FILL_PARENT, RelativeLayout.LayoutParams.FILL_PARENT);
layout.addView(imageView, lp);
layout.addView(imageView2, lp);
imageView.setOnSingleTapConfirmedListener((OnImageViewSingleTapConfirmedListener) context);
imageView2.setOnSingleTapConfirmedListener((OnImageViewSingleTapConfirmedListener) context);
imageView2.setVisibility(View.GONE);
if (position == restorePageNumber) {
loadBitmap(context, position, imageView, imageView2, restoreZoomLevel);
Log.w(TAG, "zoom level regocnized for pos: " + position + " resetting...");
restorePageNumber = Constants.INVALID_INT;
restoreZoomLevel = Constants.INVALID_LONG;
} else {
loadBitmap(context, position, imageView, imageView2, Constants.INVALID_LONG);
}
imageView.setFitToScreen(true);
imageView2.setFitToScreen(true);
activePages.put(position, imageView2);
((ViewPager) collection).addView(layout);
return layout;
}
protected void loadBitmap (Context context, int position,
ImageViewTouch imageView, ImageViewTouch imageView2,
float restoreZoomLevel) {
Photo photo = getPhotoAtPosition(position);
Log.v(TAG, "loading photo. pos: " + position + " id: " + photo.getId());
// show small image first
if (!(photo instanceof CameraPhoto)) {
StorageManager.retrieveBitmapBackgroundWithImageview(context, photo,
Photo.SIZE_SMALL, imageView, true, Constants.INVALID_LONG);
}
// afterwards replace with big image
StorageManager.retrieveBitmapBackgroundWithImageview(context, photo,
Photo.SIZE_LARGE, imageView2, true, restoreZoomLevel);
}
in Those methods (retrieveBitmapBackgroundWithImageview) Images are loaded in Background, and afterwards set to the imageview.
It seems that it has some problem with setting the large bitmap.
Even if the Imageview with the large bitmap stays hidden (View.GONE), and only local cache images are shown, the ViewPager stays black for some "time" (as above, 500ms to 1.5s) on loading pages, if swiping fast :)
thx :)
If you mean swiping fast to alot of pages it just has problems with loading all those views. Do you cancel/interrupt the loadBitmap tasks that are out of the range of the ViewPager (not in view or cache)?
And, do you handle concurrency in threads? If you always want to load the pages that are in the ViewPager's view or cache first, you should Override Comparator and let it compare on the page. The comparator can be used in a PriorityBlockingQueue which can be used in a Executor
I have a ListView that display Bitmap pictures. These Bitmaps get to be quite large. When i scroll on the ListView it seems to be very heavy. What techniques can i use to optimize the ListView ? This may cover compressing the Bitmap in memory, or ways to enhance the List View memory management ?
First, read this,
http://developer.android.com/training/improving-layouts/smooth-scrolling.html
It talks about the view holder pattern, and loading images in a threads. also, read this,
http://developer.android.com/training/displaying-bitmaps/cache-bitmap.html
This talks about how to build an efficient memory cache for bitmaps.
If that's not enough, another technique you can employ is to avoid loading images until scrolling stops. This prevents the listview from loading all of the images if the user say flings to the bottom of the list. Basically, something like this,
pagerList.setOnScrollListener(new OnScrollListener() {
#Override
public void onScrollStateChanged(AbsListView view, int scrollState) {
if (scrollState != OnScrollListener.SCROLL_STATE_IDLE) {
return;
}
// load images for adapter views between first and first+count.
// depending on your memory requirements, you can pre-load additional
// images before first and after first+count to give a better
// user exp
}
#Override
public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {
first = firstVisibleItem;
count = visibleItemCount;
}
});
This requires that you keep a handle to the ImageView for each item in your adapter, so you can find it later and set the appropriate bitmap into it. This could be as simple as keeping an array of image views in your adapter, where the index == the position in the list view.
I mostly use LruCache to optimize list and load images from cache LruCache
add this in getView in BaseAdapter class
#Override
public View getView(.....
..... . .
Bitmap image = getBitmapFromMemCache(name);
if (image == null)
{
image = decodeSampledBitmapFromUri(image_path.get(position), 64,64);
}
else
{
Log.i("loding. ", "from cache "+name);
}
// Bitmap ThumbImage = ThumbnailUtils.extractThumbnail(BitmapFactory.decodeFile(details), 64, 64);
holder.img.setImageBitmap(image);
addBitmapToMemoryCache(name, image);
My application allows users to take photos with their devices camera app, which are saved to an app-specific folder.
Then, users can choose to send any image they choose to one of their contacts, using their choice of their devices email app.
Sadly the "choose images to send" dialog takes a long time to load initially, and is very "choppy" (frequent noticable pauses) when scrolling. I suspect that this is because the images are very large — pictures taken with my camera are around 2.3MB each. The initial screen (15 images displayed) thus needs to pull around 34.5MB off disk before it can render.
GridView layout.xml
<!-- ... -->
<GridView
android:id="#+id/gvSelectImage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:numColumns="3"
android:gravity="center" />
<!-- ... -->
Adapter getView()
#Override
public View getView(final int position, View convertView, ViewGroup parent) {
File pic = pics[position];
View checkedImageView =
LayoutInflater.from(context).inflate(R.layout.checked_image,
parent, false);
final ImageView imageView =
(ImageView) checkedImageView.findViewById(R.id.checkableImage);
/* LOAD IMAGE TO DISPLAY */
//imageView.setImageURI(pic.toURI())); // "exceeds VM budget"
Bitmap image;
try {
int imageWidth = 100;
image = getBitmapFromFile(pic, imageWidth); // TODO: slooow...
} catch (IOException e) {
throw new RuntimeException(e);
}
imageView.setImageBitmap(image);
/* SET CHECKBOX STATE */
final CheckBox checkBoxView =
(CheckBox) checkedImageView.findViewById(R.id.checkBox);
checkBoxView.setChecked(isChecked[position]);
/* ATTACH HANDLERS */
checkBoxView.setOnCheckedChangeListener(new OnCheckedChangeListener() {
public void onCheckedChanged(CompoundButton buttonView,
boolean isChecked) {
CheckableLocalImageAdapter.this.isChecked[position] =
checkBoxView.isChecked();
}
});
imageView.setOnClickListener(new OnClickListener() {
public void onClick(View v) {
checkBoxView.setChecked(!checkBoxView.isChecked());
}
});
return checkedImageView;
}
getBitmapFromFile() is just adapted from the answer given at https://stackoverflow.com/a/823966/633626. I note that the code there calls decodeStream() twice and might be doubling my I/O, but I think the dialog will still be too slow and too jerky even if I halve the amount of time to takes to render.
My testing phone is a standard Samsung Galaxy S II if that's relevant. I suspect older devices will be even slower / choppier.
What's the best way to improve performance here? I'm guessing a combination of an AsyncTask to load each image (so that the dialog can load before all images are rendered) and some sort of caching (so that scrolling doesn't require rerendering images and isn't jerky), but I'm lost as to how to fit those pieces in with the rest of my puzzle.
You'll want to work with thumbnails instead. Loading the whole image from the SD card will always be slow. Only load the full version of the one(s) they really want to send.
This isn't to say that caching and async loading are a bad idea. I'd change the code to work with thumbnails first, recheck performance, and then go the async route. You can show a little spinner over the currently loading thumbnail to indicate that there's more to come.
Here's a built-in class to help you retrieve them.
Try loading your Images with a SampleSize into the GridView:
BitmapFactory.Options opts = new BitmapFactory.Options();
opts.inSampleSize = 7;
Bitmap bitmap = BitmapFactory.decodeFile(f.getPath(), opts);
More Info about the Options here
And also you can swap the image loading into a Thread or AsyncTask.