Picasso doesn't load first image of ArrayAdapter - android

I am building a Tinder-like Android app with this library : https://github.com/Diolor/Swipecards and Picasso for image loading. Everything works fine, except the first view of the list. The image is not displayed, although the text is correct.
Views are stored in a custom subclass of ArrayAdapter. Here is the code:
public View getView(int position, View convertView, ViewGroup parent) {
LayoutInflater inflater = ((Activity)context).getLayoutInflater();
switch (getItemViewType(position)) {
case TYPE_MOVIE:
ViewHolderMovie holder;
if (convertView == null) {
holder = new ViewHolderMovie();
convertView = inflater.inflate(R.layout.movie_card, parent, false);
holder.movieCover = (ImageView)convertView.findViewById(R.id.movieCover);
holder.movieTitle = (TextView)convertView.findViewById(R.id.movieTitle);
holder.movieGenre = (TextView)convertView.findViewById(R.id.movieGenre);
convertView.setTag(holder);
} else {
holder = (ViewHolderMovie) convertView.getTag();
}
Movie movie = (Movie) data.get(position);
Picasso.with(convertView.getContext())
.load(movie.imagePath)
.resize(500, 500)
.into(holder.movieCover); // this doesn't work for the first view
holder.movieTitle.setText(movie.title);
holder.movieGenre.setText("Film au cinéma ("+movie.genre+")");
return convertView;
}
return null;
}
Do you have an idea please?

Check Your image URL path ,especially slash '/'.
Picasso don't show first image of ArrayAdapter when '/' has twice in your imageurl path.
But it show truly when you scroll Gridview or Listview

Related

ArrayAdapter for ImageView using AsyncTask to download the image

I have an ArrayAdapter and its getView method has something is this:
public View getView(int position, View convertView, ViewGroup parent) {
//get object against selected list item
book thisbook = getItem( position );
ViewHolder viewHolder; // view lookup cache stored in tag
if (convertView == null) {
viewHolder = new ViewHolder();
LayoutInflater inflater = LayoutInflater.from(getContext());
convertView = inflater.inflate( R.layout.book, parent, false);
viewHolder.bookImage = (ImageView) convertView.findViewById(R.id.bookImage);
viewHolder.txtbookTitle = (TextView) convertView.findViewById(R.id.txtbookTitle);
//download image and set the bitmap for bookImage ImageView
new DownloadImageService( viewHolder.bookImage ).execute( thisbook.getImageUrl() );
convertView.setTag(viewHolder);
} else {
viewHolder = (ViewHolder) convertView.getTag();
}
viewHolder.txtbookTitle.setText(thisbook.getbookTitle());
viewHolder.bookImage = thisbook.getbookImage();
viewHolder.txtbookId.setText(thisbook.getbookId());
new DownloadImageService( viewHolder.bookImage ).execute( thisbook.getImageUrl() );
return convertView;
}
Now, when I scroll down I load more items into my ArrayList of data and then call myAdapter.notifyDataSetChanged() and what happens is the book images are messed up i.e. the newly loaded item will have an image from another item which is already loaded into the list. e.g. if a book with id 1 is loaded already in the list and image is a.jpeg when scroll down the listview and load a new book say with id 10 although its image should be 10.JPEG but it has that a.jpeg with blongs to another book, its strange, not sure what I am doing wrong.
while debugging I have checked the input ArrayList for adapter and I can see all the books in the ArrayList perfectly as they should be.

ImageView of ListView loading incorrect few second when scrolling ListView

I'm using ListView with ImageView is a element of List. I have got problem when fast scrolling my List : The system seems to be recycling views until it loads the correct position's view in my ListView, resulting in duplicated images and text for a few seconds. After that, ImageView display images correctly. I'm using Universal Image Loader library to load images.
#Override
public View getView(int position, View v, ViewGroup parent) {
final PhotoViewHolder holder;
if(v == null){
LayoutInflater li = (LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
v = li.inflate(R.layout.photo_item_horizonal_layout, parent, false);
holder = new PhotoViewHolder();
holder.imgPhoto = (ImageView)v.findViewById(R.id.imgPhotoIcon);
v.setTag(holder);
}else{
holder = (PhotoViewHolder)v.getTag();
}
//item variable is a element at position of ArrayList
ImageLoader.getInstance().displayImage(item.getImageUrl(), holder.imgPhoto);
...
}
Can anyone help me?
Thanks in advanced
Do one thing Download Aquery from This link put that .jar File in your Lib folder and change your code to this:
#Override
public View getView(int position, View v, ViewGroup parent) {
final PhotoViewHolder holder;
if(v == null){
LayoutInflater li = (LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
v = li.inflate(R.layout.photo_item_horizonal_layout, parent, false);
holder = new PhotoViewHolder();
holder.imgPhoto = (ImageView)v.findViewById(R.id.imgPhotoIcon);
v.setTag(holder);
}else{
holder = (PhotoViewHolder)v.getTag();
}
//item variable is a element at position of ArrayList
AQuery aQuery=new AQuery(v)
aQuery.id(holder.imgPhoto).image(item.getImageUrl().toString());
}
Use a placeholder image while image is loading . You can do that by UIL option:
DisplayImageOptions options = new DisplayImageOptions.Builder()
.showImageOnLoading(R.drawable.placeholder)
......
.build();
This should solve your problem.
Are you changing the image of the ImageView by yourself in a later part of the code?
if you do, you should call
ImageLoader.getInstance().cancelDisplayTask(holder.imgPhoto);
so that the library knows that the link between the image and the imageview is broken

ListView ImageView load same pictures

i have a big problem with my ListViewAdapter.
My listview shows 2 entrys at the same time. Each entry should get a different picture from my server.
The first and the second entrys working fine, but if i'm scrolling down, the next entrys will have the same pictures.
My Code looks like this:
if (viewHolder.imgPic != null) {
String strUrl = mainUrl+list.get(position).getUrl();
new ImageDownload(viewHolder.imgPic).execute(strUrl);
}
I'm checking the view and just doing it, if it's null.
Can someone help me?
Thanks
from your question I can assume that you don't know about the ListView recycling mechanisem
basically, view that that not visible anymore (after user scrolled it away from sight) it been recycled to displayed new item that need to shown. that's the convertView parameter at the getView() method...
probably you are see the same image because the recycled view stays with the same image..
also there is the issue of the asynchronous task (your ImageDownload class) that can finish it execute when the original item that started the request already been recycled.
I recommend you to "dig" as dipper as you can to understand all about ListView - this is one of the most complex and important UI component. reading the post I linked you is a good start.
also this video is very important:
http://www.youtube.com/watch?v=wDBM6wVEO70
Here is my GetView:
#Override
public View getView(final int position, View convertView, ViewGroup parent) {
View view = null;
if(rowResourceId!=R.layout.search_empty_list) {
if (convertView == null) {
LayoutInflater inflator = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
view = inflator.inflate(rowResourceId, null);
final ViewHolder viewHolder = new ViewHolder();
viewHolder.textName = (TextView) view.findViewById(R.id.textView1);
viewHolder.imgPic = (ImageView) view.findViewById(R.id.imgPic);
if (viewHolder.imgPic != null) {
String strUrl = mainUrl+list.get(position).getUrl();
new ImageDownload(viewHolder.imgPic).execute(strUrl);
}
view.setTag(viewHolder);
} else {
view = convertView;
}
ViewHolder holder = (ViewHolder) view.getTag();
holder.textName.setText(list.get(position).getName());
} else {
LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
view = inflater.inflate(rowResourceId, parent, false);
TextView textView1 = (TextView) view.findViewById(R.id.textView1);
textView1.setText(list.get(0).getName());
}
return view;
}

android listview after image is updated still use one it has in cache

In my listview i have image and text which can be updated from internet. Images is saved on external memory. When update is happening text is showed correct but image is still old one, the one which is in cache. On update i delete old image and create new one with same name. But unless im clearing app cache, listview will show old image. How could i solve this ?
I also tried to clear cache programmatically but thats causing some other problems.
On postExecute i try call MyListView.getMdataAdapter().notifyDataSetChanged();however it doesnt help.
#Override
public View getView(int position, View convertView, ViewGroup parent) {
// TODO Auto-generated method stub
View view = convertView;
final ViewHolder holder;
Items2 i = items.get(position);
if(convertView==null){
holder = new ViewHolder();
view = inflater.inflate(R.layout.list_row, parent, false);
holder.text = (TextView)view.findViewById(R.id.tvRestList);
holder.image = (ImageView)view.findViewById(R.id.imgList);
view.setTag(holder);
view.setOnTouchListener(this);
}else{
holder = (ViewHolder)view.getTag();
}
holder.pos = position;
Items2 item = (Items2)i;
holder.text.setText(item.name);
imageLoader.displayImage("file:///"+context.getExternalFilesDir(null).toString()+File.separator+String.valueOf(position)+".jpg", holder.image, options);
return view;
}
ImageLoader is Universal Image Loader.

Android - Implementation of Lazy loading of images with onScrollListener in a ListView

I have implemented lazy loading using onScrollListener stuff. One issue I am having is for the first time when activity is started the images don't display. Images get displayed when I scroll the listview. Any reason why the images don't load for the first time. Please let me know. Thanks.
The getView() code is as follows:
public View getView(int position, View convertView, ViewGroup parent) {
View vi=convertView;
ContentListHolder contentHolder = null;
if(convertView==null)
{
vi = inflater.inflate(layoutItem, null);
contentHolder = new ContentListHolder();
contentHolder.textview = (TextView)vi.findViewById(idText);
contentHolder.imageView =(ImageView)vi.findViewById(idImage);
vi.setTag(contentHolder);
}
else
{
contentHolder = (ContentListHolder) convertView.getTag();
}
contentHolder.textview.setText("item "+position);
contentHolder.imageView.setImageResource(layoutstub);
Bitmap bitmap = imageLoader.getBitmapFromCache(data[position]);
notifyDataSetChanged();
if(bitmap != null)
{ contentHolder.imageView.setImageBitmap(bitmap);
}
return vi;
}
It happens just because you haven't set the tag for your ImageView.
Try:
contentHolder.imageView.setTag(bitmap);

Categories

Resources