I've got the following code from "Android in Practice" book. It's implementation of custom adapter which downloads images from the internet. It uses private class RetrieveImageTask to retrieve pictures.
Can someone explain me why the first thing the adapter class does is to get image from the cache instead of downloading it ? I understand it in a way that, the first time it displays
default image which was set in the beginning of getView(), then sets downloaded image, but does it mean that view is being refreshed constantly by calling getView() ?
And why author sets tag of image to item ID in getView() and then sets it to null in onPostExecute() ?
DealsAdapter
private class DealsAdapter extends ArrayAdapter<Item> {
public DealsAdapter(List<Item> items) {
super(DealList.this, R.layout.list_item, items);
}
#Override
public View getView(int position, View convertView, ViewGroup parent) {
if (convertView == null) {
LayoutInflater inflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);
convertView = inflater.inflate(R.layout.list_item, parent, false);
}
// use ViewHolder here to prevent multiple calls to findViewById (if you have a large collection)
TextView text = (TextView) convertView.findViewById(R.id.deal_title);
ImageView image = (ImageView) convertView.findViewById(R.id.deal_img);
image.setImageBitmap(BitmapFactory.decodeResource(getResources(), R.drawable.ddicon));
Item item = getItem(position);
if (item != null) {
text.setText(item.getTitle());
Bitmap bitmap = app.getImageCache().get(item.getItemId()); //<------HERE
if (bitmap != null) {
image.setImageBitmap(bitmap);
} else {
// put item ID on image as TAG for use in task
image.setTag(item.getItemId());
// separate thread/via task, for retrieving each image
// (note that this is brittle as is, should stop all threads in onPause)
new RetrieveImageTask(image).execute(item.getSmallPicUrl());
}
}
return convertView;
}
}
RetriveImageTask
private class RetrieveImageTask extends AsyncTask<String, Void, Bitmap> {
private ImageView imageView;
public RetrieveImageTask(ImageView imageView) {
this.imageView = imageView;
}
#Override
protected Bitmap doInBackground(String... args) {
Bitmap bitmap = app.retrieveBitmap(args[0]);
return bitmap;
}
#Override
protected void onPostExecute(Bitmap bitmap) {
if (bitmap != null) {
imageView.setImageBitmap(bitmap);
app.getImageCache().put((Long) imageView.getTag(), bitmap);
imageView.setTag(null);
}
}
}
Its called lazy loading. well images take time to download from net so by that some dummy image is set. As the downloading completes it will replaced with dummy image. Basically is matter of user experience with application.
the tag has something to do with how the cache mechanism of your code works- the key of the items is their number in this sample , meaning it is used to identify which image was downloaded so that you could load it from the cache instead of from the internet.
i agree that it's weird, as it could simply put the url of the image instead. using the url is more logical .
the sample isn't so efficient as it doesn't use the viewHolder design pattern (you can learn about it via the lecture "the world of listView") and doesn't have downsampling in mind (you can check out this post about it).
the image that is shown before showing the correct image is for showing the user that it's being prepared (like a placeholder saying "downloading...").
it's just a sample for you to learn from.
Related
I have a RecyclerView adapter that looks like this:
public class RecyclerAdapter extends RecyclerView.Adapter<RecyclerAdapter.ViewHolder> {
private static Context context;
private List<Message> mDataset;
public RecyclerAdapter(Context context, List<Message> myDataset) {
this.context = context;
this.mDataset = myDataset;
}
public static class ViewHolder extends RecyclerView.ViewHolder implements View.OnCreateContextMenuListener, View.OnClickListener {
public TextView title;
public LinearLayout placeholder;
public ViewHolder(View view) {
super(view);
view.setOnCreateContextMenuListener(this);
title = (TextView) view.findViewById(R.id.title);
placeholder = (LinearLayout) view.findViewById(R.id.placeholder);
}
}
#Override
public RecyclerAdapter.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.message_layout, parent, false);
ViewHolder vh = new ViewHolder((LinearLayout) view);
return vh;
}
#Override
public void onBindViewHolder(ViewHolder holder, int position) {
Message item = mDataset.get(position);
holder.title.setText(item.getTitle());
int numImages = item.getImages().size();
if (numImages > 0) {
View test = LayoutInflater.from(holder.placeholder.getContext()).inflate(R.layout.images, holder.placeholder, false);
ImageView image = (ImageView) test.findViewById(R.id.image);
Glide.with(context)
.load("http://www.website.com/test.png")
.fitCenter()
.into(image);
holder.placeholder.addView(test);
}
}
#Override
public int getItemCount() {
return mDataset.size();
}
}
However, some of the items in the RecyclerView are showing images when they shouldn't be. How can I stop this from happening?
I do the check if (numImages > 0) { in onBindViewHolder(), but that's still not stopping it from showing images for items that shouldn't have images.
You should set imageView.setImageDrawable (null)
In onBindViewHolder() before setting the image using glide.
Setting image drawable to null fix the issue.
Hope it helps!
The problem is in onBindViewHolder, here:
if (numImages > 0) {
View test = LayoutInflater.from(holder.placeholder.getContext()).inflate(R.layout.images, holder.placeholder, false);
ImageView image = (ImageView) test.findViewById(R.id.image);
Glide.with(context)
.load("http://www.website.com/test.png")
.fitCenter()
.into(image);
holder.placeholder.addView(test);
}
If numImages is equal to 0, you're simply allowing the previously started load into the view you're reusing to continue. When it finishes, it will still load the old image into your view. To prevent this, tell Glide to cancel the previous load by calling clear:
if (numImages > 0) {
View test = LayoutInflater.from(holder.placeholder.getContext()).inflate(R.layout.images, holder.placeholder, false);
ImageView image = (ImageView) test.findViewById(R.id.image);
Glide.with(context)
.load("http://www.website.com/test.png")
.fitCenter()
.into(image);
holder.placeholder.addView(test);
} else {
Glide.clear(image);
}
When you call into(), Glide handles canceling the old load for you. If you're not going to call into(), you must call clear() yourself.
Every call to onBindViewHolder must include either a load() call or a clear() call.
I also had issues with RecyclerView showing wrong images. This happens because RecyclerView is not inflating view for every new list item: instead list items are being recycled.
By recycling views we can ruffly understand cloning views. A cloned view might have an image set from the previous interaction.
This is especially fair if your are using Picasso, Glide, or some other lib for async loading. These libs hold reference to an ImageView, and set an image on that refference when image is loaded.
By the time the image gets loaded, the item view might have gotten cloned, and the image is going to be set to the wrong clone.
To make a long story short, I solved this problem by restricting RecyclerView from cloning my item views:
setIsRecyclable(false)in ViewHolder constructor.
Now RecyclerView is working a bit slower, but at least the images are set right.
Or else cansel loading image in onViewRecycled(ViewHolder holde)
The issue here is that, as you are working with views that are going to be recycled, you'll need to handle all the possible scenarios at the time your binding your view.
For example, if you're adding the ImageView to the LinearLayout on position 0 of the data source, then, if position 4 doesn't met the condition, its view will most likely have the ImageView added when binding position 0.
You can add the content of R.layout.images content inside your
R.layout.message_layout layout's R.id.placeholder and showing/hiding the placeholder depending on the case.
So, your onBindViewHolder method would be something like:
#Override
public void onBindViewHolder(ViewHolder holder, int position) {
Message item = mDataset.get(position);
holder.title.setText(item.getTitle());
int numImages = item.getImages().size();
if (numImages > 0) {
holder.placeholder.setVisivility(View.VISIBLE);
ImageView image = (ImageView)holder.placeholder.findViewById(R.id.image);
Glide.with(context)
.load("http://www.website.com/test.png")
.fitCenter()
.into(image);
}else{
holder.placeholder.setVisibility(View.INVISIBLE);
}
}
Sometimes when using RecyclerView, a View may be re-used and retain the size from a previous position that will be changed for the current position. To handle those cases, you can create a new [ViewTarget and pass in true for waitForLayout]:
#Override
public void onBindViewHolder(VH holder, int position) {
Glide.with(fragment)
.load(urls.get(position))
.into(new DrawableImageViewTarget(holder.imageView,/*waitForLayout=*/ true));
https://bumptech.github.io/glide/doc/targets.html
I also had the same problem and ended with below solution and it working fine for me..
Have your hands on this solution might be work for you too (Put below code in your adapter class)-
If you are using Kotlin -
override fun getItemId(position: Int): Long {
return position.toLong()
}
override fun getItemViewType(position: Int): Int {
return position
}
If you are using JAVA -
#Override
public long getItemId(int position) {
return position;
}
#Override
public int getItemViewType(int position) {
return position;
}
This works for me in onBindViewHolder!
if(!m.getPicture().isEmpty())
{
holder.setIsRecyclable(false);
Picasso.with(holder.profile_pic.getContext()).load(m.getPicture()).placeholder(R.mipmap.ic_launcher_round).into(holder.profile_pic);
Animation fadeOut = new AlphaAnimation(0, 1);
fadeOut.setInterpolator(new AccelerateInterpolator());
fadeOut.setDuration(1000);
holder.profile_pic.startAnimation(fadeOut);
}
else
{
holder.setIsRecyclable(true);
}
I was having same issue I solved by writing holder.setIsRecyclable(false).Worked for me.
#Override
public void onBindViewHolder(#NonNull RecylerViewHolder holder, int position) {
NewsFeed currentFeed = newsFeeds.get(position);
holder.textView.setText(currentFeed.getNewsTitle());
holder.sectionView.setText(currentFeed.getNewsSection());
if(currentFeed.getImageId() == "NOIMG") {
holder.setIsRecyclable(false);
Log.v("ImageLoad","Image not loaded");
} else {
Picasso.get().load(currentFeed.getImageId()).into(holder.imageView);
Log.v("ImageLoad","Image id "+ currentFeed.getImageId());
}
holder.dateView.setText(getModifiedDate(currentFeed.getDate()));
}
override fun getItemId(position: Int): Long {
return position.toLong()
}
override fun getItemViewType(position: Int): Int {
return position
}
This Works for Me
I Had the same issue and i fixed it like this:
GOAL : onViewAttachedToWindow
#Override
public void onViewAttachedToWindow(Holder holder) {
super.onViewAttachedToWindow(holder);
StructAllItems sfi = mArrayList.get(position);
if (!sfi.getPicHayatParking().isEmpty()) {
holder.viewFliperMelk.addSlider(new TextSliderView(mContext.getApplicationContext()).image(T.GET_MELK_IMAGE + '/' + sfi.getPicHayatParking() + ".jpg").setScaleType(BaseSliderView.ScaleType.CenterCrop));
}
if (!sfi.getPicSleepRoom().isEmpty()) {
holder.viewFliperMelk.addSlider(new TextSliderView(mContext.getApplicationContext()).image(T.GET_MELK_IMAGE + '/' + sfi.getPicSleepRoom() + ".jpg").setScaleType(BaseSliderView.ScaleType.CenterCrop));
}
if (!sfi.getPicSalonPazirayi().isEmpty()) {
holder.viewFliperMelk.addSlider(new TextSliderView(mContext.getApplicationContext()).image(T.GET_MELK_IMAGE + '/' + sfi.getPicSalonPazirayi() + ".jpg").setScaleType(BaseSliderView.ScaleType.CenterCrop));
}
if (!sfi.getPicNamayeStruct().isEmpty()) {
holder.viewFliperMelk.addSlider(new TextSliderView(mContext.getApplicationContext()).image(T.GET_MELK_IMAGE + '/' + sfi.getPicNamayeStruct() + ".jpg").setScaleType(BaseSliderView.ScaleType.CenterCrop));
}
}
I had a similar issue when getting pictures from the photo gallery and putting them in a recyclerview with GridLayoutManager(never had the issue with Glide). So in the adapter onBindViewHolder use a HashMap or SparseIntArray to put the current hashcode(this is the common thing that the recycled views have in common) and adapter position inside it. Then call your background task and then once it's done and before you set the image, check to see if the hashcode key - which will always have the current adapter position as the value - still has the same value (adapter position) as when you first called the background task.
(Global variable)
private SparseIntArray hashMap = new SparseIntArray();
onBindViewHolder(ViewHolder holder, int position){
holder.imageView.setImageResource(R.drawable.grey_square);
hashMap.put(holder.hashCode(), position);
yourBackgroundTask(ViewHolder holder, int position);
}
yourBackGroundTask(ViewHolder holder, int holderPosition){
do some stuff in the background.....
*if you want to stop to image from downloading / or in my case
fetching the image from MediaStore then do -
if(hashMap.get(holder.hashCode())!=(holderPos)){
return null;
}
- in the background task, before the call to get the
image
onPostExecute{
if(hashMap.get(holder.hashCode())==(holderPosition)){
holder.imageView.setImageBitmap(result);
}
}
}
So i am just providing an extension to this answer since there is not much space to leave it as comment.
After trying out like mentioned in one of above solutions i found out that, the real issue can still be addressed even if you are using a static resource(is not being downloaded and is available locally)
So basically on onBindViewHolder event i just converted the resource to drawable and added it like below :
imageView.setImageDrawable(ContextCompat.getDrawable(context,R.drawable.album_art_unknown));
this way you wont have an empty space on the view while glide/async downloader is loading the actual image from network.
plus looking at that being reloaded every time i also added below code while calling the recycler adapter class;
recyclerView.setItemViewCacheSize(10);
recyclerView.setDrawingCacheEnabled(true);
so by using above way you wont need to set setIsRecyclable(false) which is degrading if you have larger datasets.
By doing this i you will have a flicker free loading of recyclerview of course except for the initial loads.
I would like to say that if you send the ImageView and any load-async command (for instance loading from S3), the recycler view does get confused.
I did set the bitmap null in the onViewRecycled and tested with attach and detach views etc. the issue never went away.
The issue is that if a holderView gets used for image-1, image-10 and stops at the scroll with image-19, what the user sees is image-1, then image-10 and then image-19.
One method that worked for me is to keep a hash_map that helps know what is the latest image that needs to be displayed on that ImageView.
Remember, the holder is recycled, so the hash for that view is persistent.
1- Create this map for storing what image should be displayed,
public static HashMap<Integer, String> VIEW_SYNCHER = new HashMap<Integer, String>();
2- In your Adapter, onBindViewHolder,
String thumbnailCacheKey = "img-url";
GLOBALS.VIEW_SYNCHER.put(holder.thumbnailImage.hashCode(), thumbnailCacheKey);
3- Then you have some async call to make the network call and load the image in the view right ?
In that code after loading the image from S3, you test to make sure what goes into the View,
// The ImageView in the network data loader, get its hash.
int viewCode = iim.imView[0].hashCode();
if (GLOBALS.VIEW_SYNCHER.containsKey(viewCode))
if (GLOBALS.VIEW_SYNCHER.get(viewCode).equals(bitmapKey))
iim.imView[0].setImageBitmap(GLOBALS.BITMAP_CACHE.get(bitmapKey).bitmapData);
So essentially, you make sure what is the last image key that should go into a view, then when you download the image you check to make sure that's the last image URL that goes in that view.
This solution worked for me.
I can download image and display it in ListView. But the problem I am facing is,
When I am loading the images they all get loaded in the first row of the list. It shows being loaded one by one in the first row. While the other rows hold the default image. Its look weird. What to do. The code below:
private class simpsync extends AsyncTask<String, Integer , Bitmap>{
private final WeakReference imageViewReference;
simpsync(ImageView iv){
//imageView=iv;
imageViewReference=new WeakReference(iv);
}
#Override
protected Bitmap doInBackground(String... param) {
Bitmap bmp=CommonFunctions.overlay(CommonFunctions.loadUrlBitmap(param[0]));
return bmp;
}
protected void onPostExecute(Bitmap bitmap) {
//imageView.setImageBitmap(result);
if (isCancelled()) {
bitmap = null;
}
if (imageViewReference != null) {
ImageView imageView = (ImageView) imageViewReference.get();
if (imageView != null) {
if (bitmap != null) {
imageView.setImageBitmap(bitmap);
}
}
}
}
}
This code is the getView function of class BaseAdapter
public View getView(int position, View convertView, ViewGroup parent) {
View vi = convertView;
ViewHolder holder;
if(convertView==null){
/****** Inflate tabitem.xml file for each row ( Defined below ) *******/
//list_book_detail_entry
if(requestType==SearchAndIndex.SEARCH_IN_SEPAERATE)
{
vi = inflater.inflate(R.layout.list_book_detail_buy, parent, false);
//vi = inflater.inflate(R.layout.list_book_detail_buy, null);
}
else{
vi = inflater.inflate(R.layout.list_book_detail_entry, parent, false);
//vi = inflater.inflate(R.layout.list_book_detail_entry, parent, false);
}
/****** View Holder Object to contain tabitem.xml file elements ******/
holder = new ViewHolder();
holder.bookTitle=(TextView)vi.findViewById(R.id.BookTitle);
holder.writer = (TextView) vi.findViewById(R.id.WriterName);
holder.imageUrl=(ImageView)vi.findViewById(R.id.ImageUrl);
holder.isbn=(TextView)vi.findViewById(R.id.BookISBN);
holder.serialNumber=(TextView)vi.findViewById(R.id.BookSerialNumber);
holder.availabilityView=(ImageView)vi.findViewById(R.id.AvailabilityView);
holder.publisher=(TextView)vi.findViewById(R.id.Publisher);
holder.publishingDate=(TextView)vi.findViewById(R.id.PublishingDate);
/************ Set holder with LayoutInflater ************/
vi.setTag( holder );
}
else
holder=(ViewHolder)vi.getTag();
if(data.size()<=0)
{
holder.bookTitle.setText("--");
holder.writer.setText("--");
holder.publisher.setText("--");
holder.publisher.setText("----+--+--");
}
else
{
tempValues=null;
tempValues = ( BookDetailsStruct ) data.get( position );
holder.writer.setText( tempValues.Writer );
holder.publisher.setText(tempValues.Publisher);
holder.publishingDate.setText(tempValues.getIssueDetail(0).publishingDate);
simpsync sp=new simpsync(holder.imageUrl);
if(requestType==SearchAndIndex.SEARCH_IN_SEPAERATE)
{
if(tempValues.getIssueDetail(0)!=null)
{
String toAdd;
if(tempValues.getIssueDetail(0).serialNumber==-1)
toAdd="";
else
toAdd=" [ 巻"+tempValues.getIssueDetail(0).serialNumber+" ]";
holder.bookTitle.setText( tempValues.BookName+toAdd);
sp.execute(tempValues.getIssueDetail(0).smallImageUrl);
}
}
else{
if(tempValues.largetNumberIndex!=-1)
{
String toAdd;
if(tempValues.getIssueDetail(tempValues.largetNumberIndex).serialNumber==-1)
toAdd="";
else
toAdd=" ("+tempValues.getIssueCount()+"巻)";
holder.bookTitle.setText( tempValues.BookName+toAdd);
sp.execute(tempValues.getIssueDetail(tempValues.largetNumberIndex).smallImageUrl);
}
else{
holder.bookTitle.setText( tempValues.BookName);
sp.execute(tempValues.getIssueDetail(0).smallImageUrl);
}
}
vi.setOnClickListener(new OnItemClickListener( position ));
}
return vi;
}
if you have any further question, please let me know
The "problem" is the recycle behavior of ListView. You are not respecting it enough. When you scroll down and a View disappears on the top, it will be reused at the bottom (thats why you use the ViewHolder pattern, thats good). But you also start a asynchronous task and give it the ImageView and to hold onto it. Since the whole view of the row (and with that the imageview) gets recycled, it wont be eligible for garbage collection, thus the asynctask has a valid ImageView to display the image once its finished.
To correct your code, I suggest you simply adapt what is written on the android developer page, it nearly is copy-past-ready code for you to use:
Load Bitmaps into a GridView Implementation
You can also use 3rd party libraries, because other smart people have also faced this problem and came up with good solutions:
Glide
Picasso
They both have a very (very) simple Api to get things done and they are both highly efficient and tunable, with already good settings by default.
You can use Picasso for loading images into ListView
#Override
public void getView(int position, View convertView, ViewGroup parent) {
SquaredImageView view = (SquaredImageView) convertView;
if (view == null) {
view = new SquaredImageView(context);
}
String url = getItem(position);
Picasso.with(context).load(url).into(view);
}
OR
#Override
public void getView(int position, View convertView, ViewGroup parent) {
View v = convertView;
ImageView imgView = v.findViewById(R.id.someImageView);
String url = getItem(position);
Picasso.with(context).load(url ).into(imgView);
}
Many common pitfalls of image loading on Android are handled automatically by Picasso:
Handling ImageView recycling and download cancelation in an adapter.
Complex image transformations with minimal memory use.
Automatic memory and disk caching.
I have this ImageAdapter for android's listView:
#Override
public View getView(int position, View convertView, ViewGroup parent) {
View view = null;
RelativeLayout relativeLayout = null;
Offer currentOffer = mOffersList.get(position);
if (convertView == null) { // create a new view if no recycling
// available
// Make up a new view
LayoutInflater inflater = (LayoutInflater) mContext
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
view = inflater.inflate(R.layout.offer_list_item, null);
relativeLayout = (RelativeLayout) view
.findViewById(R.id.offerImage);
} else {
view = (View) convertView;
relativeLayout = (RelativeLayout) view
.findViewById(R.id.offerImage);
setBackgroundDrawable(relativeLayout, null);
}
String imageUrl = "";
imageUrl = currentOffer.getImageUrl().toString();
Bitmap bitmap = imageCache.get(imageUrl);
if (bitmap != null) {
Drawable dr = new BitmapDrawable(mContext.getResources(), bitmap);
setBackgroundDrawable(relativeLayout, dr);
} else {
if (!downloadingImageUrls.contains(imageUrl)) {
downloadingImageUrls.add(imageUrl);
new DownloadImageAsyncTask().execute(imageUrl);
}
}
return view;
}
and this:
class DownloadImageAsyncTask extends AsyncTask<String, Void, Void> {
#Override
protected Void doInBackground(String... params) {
String imageUrl = params[0];
try {
Bitmap bitmap = BitmapFactory
.decodeStream((InputStream) new URL(imageUrl)
.getContent());
imageCache.put(imageUrl, bitmap);
} catch (IOException e) {
Log.e("DownloadImageAsyncTask", "Error reading bitmap" + e);
}
downloadingImageUrls.remove(imageUrl);
return null;
}
#Override
protected void onPostExecute(Void result) {
notifyDataSetChanged();
}
}
why do all of the list items loaded together? it's don' asynchronously but yet not one by one. All together.
how can i load it lazily?
and why is this code more efficient?
// better
public class DownloadImageAsyncTask2 extends
AsyncTask<String, Void, Bitmap> {
private final ImageView imageView;
public DownloadImageAsyncTask2(ImageView imageView) {
this.imageView = imageView;
}
#Override
protected void onPreExecute() {
Log.i("DownloadImageAsyncTask", "Starting image download task...");
}
#Override
protected Bitmap doInBackground(String... params) {
try {
return BitmapFactory.decodeStream((InputStream) new URL(
params[0]).getContent());
} catch (IOException e) {
Log.e("DownloadImageAsyncTask", "Error reading bitmap" + e);
}
return null;
}
#Override
protected void onPostExecute(Bitmap bitmap) {
if (bitmap != null) {
imageView.setImageBitmap(bitmap);
}
}
}
To answer your initial question, any adapter you write is exactly as it's called; it's an adapter. It lets you translate your data into Views displayed in an AdapterView. It would not make sense to force all views to be "loaded lazily" and, quite frankly, should not do that for a few reasons.
Maybe you have prefetched all your images and don't need lazy loading. Maybe they even just come from resources and don't need to be handled in a special way at all.
How would it know from where to lazily load your images (database, memory map, file, network resource, other android service, etc.)? That's your job when writing the adapter.
You might argue it would be nice for Adapter subclasses to have a loadLazily(Uri image, ImageView view) function. If so why not subclass AbsAdapter yourself and add it or submit a patch to the AOSP. I, however, doubt you will find agreement that even a function like that should be included as part of an Adapter. It's really your job to manage your data in an efficient manner, despite how normal it is to lean on the system for data management in Android.
To answer your other questions about the two methods of lazy loading you proposed, the difference is that the first method causes the AdapterView to reload all of its Views whereas in the second method you are simply invalidating the view into which you are loading the image.
I don't actually agree the second method is "better" on a whole because every time your configuration is changed or process dies and Views need to be reloaded you need to make new calls over the network or to the file system to load your images. If you cache them as you do in the first method then you can at least avoid needing to reload all the images through configuration changes. If you wrote a separate image loading service that ran in its own process (not something I'm recommending) you could also avoid the second case (of your :default process getting killed).
Point is, you're responsible for loading your images, not Android. If you want it done for you take a look at these great image loading or otherwise general resource acquisition libraries for android: Local image caching solution for Android: Square Picasso vs Universal Image Loader . I've personally used Universal-Image-Loader before and admit it works as advertised. However, it caches all your images on external storage which might not be an option for you.
The listview can call getView for all items in its onMeasure (cf. measureHeightOfChildren in listView.java).
So, with this getView, it loads all images.
To load lazily, you need to load images elsewhere: let the views ask the image when needed (onDraw) to a manager (which will load them asynchronously).
notifyDataSetChanged() with update all the listview (meaning recycling views, calling getView ...), imageView.setImageBitmap will update only the ImageView so it's a better idea.
use this imageloader it works IMAGELOADER
You can use this library https://github.com/thest1/LazyList. It's very easy to use.
https://github.com/nostra13/Android-Universal-Image-Loader
It works beautifuly except for the very first item in a listview is having its image loading task canceled.
It says it Is called when image loading task was cancelled because View for image was reused in newer task
however since the view is clearly still visible, this view shouldn't be recycled yet? I am using convertView.
#Override
public View getView(int position, View convertView, ViewGroup parent)
{
if (getItemViewType(position) == HAS_IMAGE)
{
if (convertView == null)
{
convertView = li.inflate(R.layout.item_update_pic, null);
new UpdateWithImageWrapper(convertView, position); // this is where views are looked up and set
}
((UpdateWithImageWrapper) convertView.getTag()).setMyData(data.get(position), position); // this is where the correct data is set to the views and images are set to be loaded
}
else
{
if (convertView == null)
{
convertView = li.inflate(R.layout.item_update, null);
new UpdateNoImageWrapper(convertView, position);
}
((UpdateNoImageWrapper) convertView.getTag()).setMyData(data.get(position), position);
}
return convertView;
}
Does anyone have solution?
Edit: just wanted to add that it has the issue with all of my list views.
using ImageLoader 1.8.4
Perhaps there is a way to stop the listview from recycling so quickly?
I finally figured out the real answer.
in my ImageLoadingListener()
#Override
public void onLoadingCancelled(String imageUri, View view) { }
I was setting the image to a image that represented a loading error. Well as it turns out, that if i do not change the image when this method is called then everything works fine.
So the real issue for me is that when the onLoadingCancelled method is called, the image has already been loaded, and setting the imageview here to a image representing a cancel overwrites a successful loading of the real image.
Blatant n00b question: I have several directories of pictures and wish to display randomly pictures from only one, which I select by a set of radio buttons. How do I specify the directory when using :
//"ha" is ha.png, which I would like to be at drawable/1/ha.png
image.setImageResource(R.drawable.ha);
Can I use setImageResource for this? If so how? If not, what should I use and how?
The object of the exercise is a flashcard program with different lessons (hence the dividing up of images) selectable at the first activity.
You cannot have subfolders under res/drawable, if you are referring to the drawables folder in your apk.
If you are referring to a random folder on your sdcard, then it's fine to use subfolders, but then you cannot use R.drawable.* for that approach to refer to the image.
In that case you need to load the image using
Bitmap bmp = BitmapFactory.decodeFile("/sdcard/drawable/1/ha.png");
which returns a bitmap, which you can use like
image.setImageBitmap(bmp)
see http://developer.android.com/reference/android/widget/ImageView.html#setImageBitmap(android.graphics.Bitmap)
In order to react on changes made to the radion button, see
How to set On click listener on the Radio Button in android
You can use a GridView to show the images from a directory selected from a radio button (as your requirement says). After creating a GridView, associate a adapter to it. Please refer below for a n example adapter :
public class ImageAdapter extends BaseAdapter {
/** LayoutInflater. */
private LayoutInflater mInflater;
/** The i. */
private ImageView i;
/**
* Instantiates a new image adapter.
*
* #param c
* the c
*/
public ImageAdapter(Context c) {
mInflater = LayoutInflater.from(c);
}
public int getCount() {
// scaled pictures will have the list of
// which you have from the directory
return scaledPictures.size();
}
public Bitmap getItem(int position) {
return scaledPictures.get(position);
}
public long getItemId(int position) {
return position;
}
public View getView(int position, View convertView, ViewGroup parent) {
if (convertView == null) {
convertView = mInflater.inflate(R.layout.image, parent, false);
} else {
i = (ImageView) convertView;
}
Bitmap bitmap = getItem(position);
i = (ImageView) convertView.findViewById(R.id.galleryimage);
i.setImageBitmap(bitmap);
bitmap = null;
return i;
}
}