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.
Related
I'm using listview custom adapter which with row click i'm changing row color. But when i'm scrolling bot and up again it doesnt have the right position.
It changes color in other rows...
public override View GetView(int position, View convertView, ViewGroup parent)
{
DataViewHolder holder = null;
if (convertView == null)
{
convertView = LayoutInflater.From(mContext).Inflate(Resource.Layout.TableItems, null, false);
holder = new DataViewHolder();
holder.txtDescription = convertView.FindViewById<TextView>(Resource.Id.txtDescription);
holder.txtDescription.Click += delegate
{
holder.txtDescription.SetBackgroundColor(Color.Red);
};
convertView.Tag = holder;
}
else
{
holder = convertView.Tag as DataViewHolder;
}
holder.txtDescription.Text = mitems[position].Description;
return convertView;
}
public class DataViewHolder : Java.Lang.Object
{
public TextView txtDescription { get; set; }
}
It looks like it doesnt keep in memory specific row situation.
Don't change the color in the click handler directly, instead change the data from which the adapter draws from and use that to change the color when GetView is called again.
ListView recycles the views it uses to optimize scrolling, instead it just expects the view to represent the data. If you change a color of one view directly, the view then gets recycled and you'll see "another view" (another part of the data) with a different background color.
So in summary: give each data point a color attribute and use that to set the color of each view in GetView, change the data and notify the adapter about the changes to the data.
Edit
I've never used Xamarin but maybe something like this would work
public override View GetView(int position, View convertView, ViewGroup parent)
{
DataViewHolder holder = null;
if (convertView == null)
{
convertView = LayoutInflater.From(mContext).Inflate(Resource.Layout.TableItems, null, false);
holder = new DataViewHolder();
holder.txtDescription = convertView.FindViewById<TextView>(Resource.Id.txtDescription);
holder.txtDescription.Click += delegate
{
// instead of setting the color directly here, just modify the data
(holder.txtDescription.Tag as ItemType).ItemColor = Color.Red
notifyDataSetChanged();
};
convertView.Tag = holder;
}
else
{
holder = convertView.Tag as DataViewHolder;
}
holder.txtDescription.Text = mitems[position].Description;
holder.txtDescription.Tag = mitems[position]; // this so that the click handler knows which item to modify
holder.txtDescription.SetBackgroundColor(mitems[position].ItemColor);
return convertView;
}
public class DataViewHolder : Java.Lang.Object
{
public TextView txtDescription { get; set; }
}
ListView will reuse the item layout, you can use List and View.Tag to avoid the problem caused by reusing.
I have posted my demo on github.
My objective is to convert a working spinner (populated via a cursor adapter) to have alternating backgrounds. Similar to :-
Currently I have this, where everything works fine :-
This is the relevant working code within the cursor adpater (i.e. with the plain dropdowns) :-
#Override
public View newView(Context context, Cursor cursor, ViewGroup parent) {
return LayoutInflater.from(context).inflate(R.layout.activity_aisle_shop_list_selector, parent, false);
}
#Override
public void bindView(View view,Context context, Cursor cursor) {
determineViewBeingProcessed(view,"BindV",-1);
TextView shopname = (TextView) view.findViewById(R.id.aaslstv01);
shopname.setText(cursor.getString(shops_shopname_offset));
}
I have tried adding an override of the getDropDownView (code as below). I get the alternating row colors as I want but the dropdown views are blank. However, if I click outside of the selector, then they get populated with data (hence how I managed to get the screen shot, shown above, of what I want). Selection sets the correct Item.
If I remove the return after inflating the layout, then the dropdown views are populated but with data from other rows (however,selection selects the correct item)
public View getDropDownView(int position, View convertview, ViewGroup parent) {
View v = convertview;
determineViewBeingProcessed(v,"GetDDV",position);
if( v == null) {
v = LayoutInflater.from(parent.getContext()).inflate(R.layout.activity_aisle_shop_list_entry, parent, false);
return v;
}
Context context = v.getContext();
TextView shopname = (TextView) v.findViewById(R.id.aasletv01);
shopname.setText(getCursor().getString(shops_shopname_offset));
if(position % 2 == 0) {
v.setBackgroundColor(ContextCompat.getColor(context,R.color.colorlistviewroweven));
} else {
v.setBackgroundColor(ContextCompat.getColor(context,R.color.colorlistviewrowodd));
}
return v;
}
The clues were they I just didn't think hard enough. The issue is with the cursor being in the wrong position because the cursor needs to be obtained via getCursor().
Additionally, the return after the inflate, is premature (this has been commented out).
Adding getCursor().moveToPosition(position); before accessing data from the cursor resolves the problem.
Alternately (perhaps more correctly, comments appreciated on whether or not one method is more correct than the other). Adding:-
Cursor cursor = getCursor();
cursor.moveToPosition(position);
and then replacing subsequent getCursor() with cursor (not mandatory) also works.
So the final code for getDropDownView method could be:-
public View getDropDownView(int position, View convertview, ViewGroup parent) {
View v = convertview;
determineViewBeingProcessed(v,"GetDDV",position);
if( v == null) {
v = LayoutInflater.from(parent.getContext()).inflate(R.layout.activity_aisle_shop_list_entry, parent, false);
//return v;
}
Context context = v.getContext();
Cursor cursor = getCursor();
cursor.moveToPosition(position);
TextView shopname = (TextView) v.findViewById(R.id.aasletv01);
shopname.setText(cursor.getString(shops_shopname_offset));
if(position % 2 == 0) {
v.setBackgroundColor(ContextCompat.getColor(context,R.color.colorlistviewroweven));
} else {
v.setBackgroundColor(ContextCompat.getColor(context,R.color.colorlistviewrowodd));
}
return v;
}
Ive searched and cant find anything to do with this problem im getting, im loading images into multiple grid views each inside a tabbed page view. Performance is great but any grid view that has lots of images and needs to scroll the images loaded are incorrect, it dublicates images and loads them into the wrong position. Below is one of the adapters im using for the grid view:
public class PcAdapter extends BaseAdapter {
private Context context;
private Integer[] imageIds = {
R.drawable.pcserioussam, R.drawable.pc_trinetwo,
R.drawable.pc_leftfordead, R.drawable.pc_dungeondefenders,
R.drawable.pc_portaltwo, R.drawable.pc_spaz,
R.drawable.pc_laracroftattoo, R.drawable.pc_goatsim,
R.drawable.pc_deadblock, R.drawable.pc_dynasty,
R.drawable.pc_minecraft, R.drawable.pc_kanelynch,
R.drawable.pc_toy, R.drawable.pc_awesomenauts,
R.drawable.pc_bioniccomm, R.drawable.pc_fastandfurious,
R.drawable.gen_harryone, R.drawable.gen_harrytwo,
R.drawable.gen_watchmen
};
public PcAdapter(Context c) {
context = c;
}
public int getCount() {
return imageIds.length;
}
public Object getItem(int position) {
return imageIds[position];
}
public long getItemId(int position) {
return 0;
}
public View getView(int position, View view, ViewGroup parent) {
ImageView iview;
if(view == null){
iview = new ImageView(context);
Picasso.with(context).load(imageIds[position]).
placeholder(R.drawable.placeholder).
resize(230, 300).centerInside().into(iview);
} else {
iview = (ImageView) view;
}
return iview;
}
}
Any help with this would be much appreciated
Move your picasso code out of the if statement. Currently it will only load a new image if view is null? Put it at the bottom of the if statement just before the return statement.
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.
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.