I'm using NetworkImageView for loading image from Url in my Gridview.
It works fine for the first time, but on Scroll, the grid items start duplicating at random positions.
Below is my code for GridView adapter:
#Override
public View getView(int position, View convertView, ViewGroup parent) {
if (convertView == null) {
LayoutInflater mInflater = (LayoutInflater)
context.getSystemService(Activity.LAYOUT_INFLATER_SERVICE);
convertView = mInflater.inflate(R.layout.grid_item, null);
}
NetworkImageView imageViewBand = (NetworkImageView) convertView.findViewById(R.id.imageView_grid_item);
TextView textViewBand = (TextView) convertView.findViewById(R.id.textView_grid_item);
imageViewBand.setDefaultImageResId(R.drawable.college_default_icon_grid_view);
imageViewBand.setAdjustViewBounds(true);
imageViewBand.setImageUrl(Constants.schoolImageUrl, AppController.getInstance(context).getImageLoader());
textViewBand.setText(schoolArrayList.get(position).getSchoolName());
return convertView;
}
The text in grid item works fine, but the issue occurs only with volley image loader causing image duplicate.
Please help.
Your problem is that you are reusing the view on scroll but you are not resetting the imageViewBand image url to null before loading the new image. So what you have to do is to set image url to null before reusing it
Next time try implementing a RecyclerView with a GridLayoutManager since with a RecyclerView reusing views is done automatically
Related
I'm working on Imgur API and I fetched some image links. In a gridview, i am showing all pictures but sometimes api gives ".gif" and picasso cannot load this animated pictures. I want to pass if its a gif which convertview didn't load. As you can see, I'dont want to that gray areas. Do you have any idea?
#Override
public View getView(int position, View convertView, ViewGroup parent) {
if (null == convertView ) {
convertView = inflater.inflate(R.layout.listview_item_image, parent, false);
}
ImageView img = (ImageView) convertView.findViewById(R.id.im);
if(datas.get(position).getLink().endsWith(".jpg") ){
Picasso.with(context)
.load(datas.get(position).getLink())
.fit()
.into(img);
}else convertView.setVisibility(View.GONE);
return convertView;
}
1: []
You must remove all objects which ends with .gif from the datas ArrayList, or you must not add them in the first place, you can give a condition while adding in ArrayList
if(data.getLink().endsWith(".jpg"))
datas.add(data)
This is extended from the thread:Picasso Images are not loading in Gridview Android
Now the new problem is that the Picasso is not loading the images properly. If i hardcode the image url though, then the image will display (repetitively though).
#Override
public View getView(int position, View convertView, ViewGroup parent) {
if(convertView == null) {
//Inflate the XML based
Layout
LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
convertView = inflater.inflate(R.layout.movies_item, parent, false);
}
//Get the ImageView
ImageView movieThumbnail = (ImageView) convertView.findViewById(R.id.movies_item_thumbnail);
//Load Image into the ImageView
Picasso.with(context).load(movies.get(position).getThumbnail()).into(movieThumbnail);
//When I hardcode the url, the image shows as shown in the screenshot below
//Picasso.with(context).load("http://image.tmdb.org/t/p/w500/nBNZadXqJSdt05SHLqgT0HuC5Gm.jpg").into(movieThumbnail);
Log.v("Populating", movies.get(position).getThumbnail());
return convertView;
}
I am completely lost. It does not throw any error too. HELP!!!!!!!!
[UPDATE]
Please refer to this link for the solution!
OkHTTP and Picasso don't run together
Well try using this
movies.get(position).getThumbnail().toString()
and make sure your URL is complete
I will give my code try this way..
Picasso.with(ctx).load(String.valueOf(images.get(position))).error(R.drawable.scorpion).into(serve_dish_iv); here variable "images" is ArrayList variable.. Try this way
Picasso.with(context).load(movies.get(position).getThumbnail()).error(R.drawable.defulticon).into(movieThumbnail);
if any images are not available then default image is show.. If any issue please ask me..
I have seen similar questions to that, but mine is a little bit different:
I have a listview and each row has an imageview that loads a picture from url. Here is my adapter:
#Override
public View getView(int position, View convertView, ViewGroup parent) {
ViewHolder holder=null;
if(convertView==null){
LayoutInflater inflater = (LayoutInflater) this.getContext()
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
convertView = inflater.inflate(R.layout.bestof_list_row, parent, false);
holder = new ViewHolder();
holder.textviewRowNumber = (TextView) convertView.findViewById(R.id.textview_row_number);
holder.imageviewUserPic = (RemoteImageView) convertView.findViewById(R.id.imageview_user_profile_pic);
holder.textviewUsername = (TextView) convertView.findViewById(R.id.textview_username);
holder.textviewSubtextBold = (TextView) convertView.findViewById(R.id.textview_subtext_bold);
holder.textviewSubtextNotBold = (TextView) convertView.findViewById(R.id.textview_subtext_not_bold);
}else{
holder = (ViewHolder) convertView.getTag();
}
BestOfSubTabListItem item = getItem(position);
holder.textviewRowNumber.setText(String.valueOf(position+1));
holder.imageviewUserPic.setRemoteURI(item.getUserAvatarURL());
holder.imageviewUserPic.loadImage();
holder.textviewUsername.setText(item.getUsername());
if(feedType == SocialFeedType.hero2){
holder.textviewSubtextBold.setVisibility(View.GONE);
holder.textviewSubtextNotBold.setVisibility(View.GONE);
}else{
holder.textviewSubtextBold.setVisibility(View.VISIBLE);
holder.textviewSubtextNotBold.setVisibility(View.VISIBLE);
holder.textviewSubtextBold.setText(item.getSubtextBold());
holder.textviewSubtextNotBold.setText(item.getSubTextNotBold());
}
convertView.setTag(holder);
return convertView;
}
static class ViewHolder{
public TextView textviewRowNumber;
public RemoteImageView imageviewUserPic;
public TextView textviewUsername;
public TextView textviewSubtextBold;
public TextView textviewSubtextNotBold;
}
When i scroll the listview fast, the images in imageviews change, they are put to wrong positions. One solution is removing the
if(convertview==null)
but this time, listview does not scroll smoothly. Can anyone help me to fix this problem?
Thanks
When you're using convertviews, it means that listview will try to recycle views. In your case it means that the same view will be used in different positions in listview, and you're actually trying to load different images into same imageview. To prevent this, try using Picasso or Volley, they have this view reusing thing sorted out.
If you want to do it manually, you have to watch when your view goes off the screen and cancel image pulling request to make that imageview available to handle proper image for that position.
http://square.github.io/picasso/
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
I have a Grid View adapter where all is in this code:
#Override
public View getView(int position, View convertView, ViewGroup parent) {
// TODO Auto-generated method stub
View v = convertView;
CheckBox check = null;
ImageView pic = null;
if (convertView == null) { // if it's not recycled, initialize some
// attributes
LayoutInflater vi = (LayoutInflater)mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
v = vi.inflate(R.layout.check_box_and_imageview, null);
}
pic = (ImageView)v.findViewById(R.id.imageView);
check = (CheckBox) v.findViewById(R.id.checkBox);
check.setTag(position);
ImageLoader loader = new ImageLoader(mContext);
//this loads image from given url
loader.DisplayImage(url[position], pic);
return v;
}
Here i create a view with check box and image view. There is the problem because image view is different size and gridview make aligment by both size checkbox and image view. But i want to order element by check box.
For better explanation what i want to do will show this pic:
This i want to do. How ever my image views isn't all same size. Now i will illustrate how it looks:
So this don't suite me. I want to make alignment not all checkbox and imageview. But just that check boxes would be under checks boxes.
So isn't this possible to do with gird view ?
Check if the convertView is null:
If it is null it's time to inflate a new View for this GridView's element. You could also use the holder pattern to cache looking for the composing Views(instead of searching with findViewById everytime)(You use the setTag element for the inflated View but it's a piece of data from the Node data element ?!? What do you plan to do with it?!?)