Add Zoom in/out to ListView of Images? - android

I have a fragment which contains a ListView and multiple images (7-10) are displaced each time fragment is launched.
I tried using different libraries for the zooming purpose but the ListView won't show up as then I will have to replace ImageView with library's defined ImageView
How can I add zoom in/out for those images?
EDIT: I want to add zoom in/out to the ListView that contain different number of images on each load, as my question states.
EDIT 2: This is getview method of my Custom Adapter. How do I attach PhotoViewAttacher in it?
public View getView(int position, View convertView, ViewGroup parent) {
View iv = convertView;
ViewHolder holder = null;
if (iv == null) {
LayoutInflater inflater = ((Activity) context).getLayoutInflater();
iv = inflater.inflate(layoutResourceId, parent, false);
holder = new ViewHolder();
holder.image = (ImageView) iv.findViewById(R.id.imagview);
iv.setTag(holder);
} else {
holder = (ViewHolder) iv.getTag();
}
Picasso.with(context)
.load((Integer) data.get(position))
.resize(999, 720)
.onlyScaleDown()
.centerInside()
.into(holder.image);
return iv;
}
static class ViewHolder {
ImageView image;
PhotoViewAttacher mAttacher;
}
}

This is how I made it work
After importing PhotoView
In layout file (if you use layout):
<uk.co.senab.photoview.PhotoView
android:id="#+id/your_photo_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
... />
And in adapter
PhotoView photoView = (PhotoView) findViewById(R.id.your_photo_view);
Picasso.with(context)
.load(file)
...
.into(photoView);
Thanks everyone for your time.

Instead of taking simple ImageView in BaseAdapter's getView list item add
TouchImageView

Related

Add Condition for ArrayAdapter in Android

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)

Dynamically set image resource to a list-item

I'm creating a custom ListView with multiple elements - TextView and ImageView.
Here's a part of my getView method:
#override
public View getView(int position, View convertView, ViewGroup parent) {
View itemView = convertView;
if (itemView == null) {
itemView = getLayoutInflater().inflate(R.layout.individual_items_in_options, parent, false);
}
// Find the option to start with.
Options currentOption = optionsOfAQuestion.get(position);
// option number
TextView optionNumber = (TextView) itemView.findViewById(R.id.option_number);
optionNumber.setText(currentOption.getOptionNumber());
// option content
TextView optionContent = (TextView) itemView.findViewById(R.id.option_content);
optionContent.setText(currentOption.getOptionContent());
ImageView imageView = (ImageView)findViewById(R.id.option_icon);
imageView.setImageResource(R.drawable.icon_wrong);
I'm getting NPE while setting the image resource, though I've defined it in my layout. Why is setting image giving me NPE, while setting the TextViews work completely fine? What's the point I'm missing here?
replace this
ImageView imageView = (ImageView)findViewById(R.id.option_icon);
by this
ImageView imageView = (ImageView)itemView.findViewById(R.id.option_icon);
this will help you
Please Update your code like below
ImageView imageView = (ImageView) itemView .findViewById(R.id.option_icon);
imageView.setImageResource(R.drawable.icon_wrong);

Android listview loads images randomly when fast scrolled

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/

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

My ListView is not smooth when I set Bitmap to ImageView

I use adapter with ListView this is implementation of getView
#Override
public View getView(int position, View convertView, ViewGroup parent){
ItemViewHolder viewHolder;
if(convertView == null){
convertView = (RelativeLayout)inflater.inflate(resource,parent, false);
viewHolder = new ItemViewHolder();
viewHolder.itemTextName = (TextView)convertView.findViewById(R.id.item_name);
viewHolder.itemTextExpDate = (TextView)convertView.findViewById(R.id.item_exp_date);
viewHolder.itemImage = (ImageView)convertView.findViewById(R.id.item_image);
}
else{
viewHolder = (ItemViewHolder)convertView.getTag();
}
Item item = listItem.get(position);
if(listItem != null){
viewHolder.itemTextName.setText(item.getName());
viewHolder.itemTextExpDate.setText(""+item.getDaysleft());
viewHolder.itemImage.setImageBitmap(item.getImage());
}
return convertView;
}
static class ItemViewHolder {
View baseView;
TextView itemTextName;
TextView itemTextExpDate;
ImageView itemImage;
}
When I set Bitmap to ImageView the ListView is not smooth.
Am I implement the correct code in getView ?
Look on this simple code how you can use Holder pattern simple implementation you must only extern it
On start use Integer.toString or something not
viewHolder.itemTextExpDate.setText(""+item.getDaysleft());
When you use setImage... the getView will be called multiple times.
Why you are checking is it null and 1 line faster you use it ? No sense.
if(listItem != null){
viewHolder.itemTextName.setText(item.getName());
viewHolder.itemTextExpDate.setText(""+item.getDaysleft());
viewHolder.itemImage.setImageBitmap(item.getImage());
}
And the most important thing you don't set holder on the View this code doesn't crash for you?
Look at topics:
Lazy loading
getView called multiple times
getView called multiple times 2
Try adding : convertView.setTag(viewHolder) in the if-block. Also, use a method like Universal Image Loader for loading images in list view

Categories

Resources