How to detect the imageview of clicked position in Gridview?
I have getView method of GridViewAdapter here.
What I want here is, whenever I click the item in gridview, The image at which position I clicked should should shrink to give effect that it is added to cart.
But Instead of shrinking the image at the position where click, It shrinks the other image of cell( the last image created from Viewholder while scrolling the view). Any help is greatly appreciated. Thanks!!!
@Override
public View getView(int position, View convertView, ViewGroup parent) {
View row = convertView;
holder = null;
Product productItem = (Product) productList.get(position);
if (row == null) {
LayoutInflater inflater = ((Activity) context).getLayoutInflater();
row = inflater.inflate(R.layout.products_grid_item_layout, parent, false);
holder = new ViewHolder();
holder.productImage = (ImageView) row.findViewById(R.id.productImage);
holder.detailsIcon = (ImageView) row.findViewById(R.id.detailsIcon);
holder.productTitle = (TextView) row.findViewById(R.id.productTitle);
holder.productSubTitle = (TextView) row.findViewById(R.id.productSubTitle);
holder.productQuantity = (TextView) row.findViewById(R.id.productQuantity);
holder.priceDollar = (TextView) row.findViewById(R.id.priceDollar);
holder.priceCent = (TextView) row.findViewById(R.id.priceCent);
holder.productCount = (TextView) row.findViewById(R.id.productCount);
holder.productGridLayout = (RelativeLayout) row.findViewById(R.id.productGridLayout);
row.setTag(holder);
} else {
holder = (ViewHolder) row.getTag();
}
String price = productItem.getPrice().toString();
String[] pricearray;
pricearray = price.split(".");
holder.productTitle.setText(productItem.getTitle().toString());
holder.productSubTitle.setText(productItem.getSubtitle().toString());
holder.productQuantity.setText(productItem.getVolume().toString());
holder.priceDollar.setText(pricearray[0]+".");
holder.priceCent.setText(pricearray[1]);
if(productItem.getInCart()) {
holder.productCount.setVisibility(View.VISIBLE);
holder.productCount.setText(productItem.getVolume());
}
Picasso.with(context)
.load(productItem.getImageUrl())
.placeholder(R.drawable.favourites)
.error(R.drawable.favourites)
.into(holder.productImage);
urlSlug = productItem.getUrlSlug();
holder.detailsIcon.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
final int position = currentGridView.getPositionForView(v);
Log.e("grid position", position+"");
Intent productDetailIntent = new Intent(context,ProductDetailActivity.class);
productDetailIntent.putExtra("url_slug", productList.get(position).getUrlSlug());
context.startActivity(productDetailIntent);
}
});
holder.productGridLayout.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
final int position = currentGridView.getPositionForView(v);
Log.e("grid position", position+"");
shrinkImage();
}
});
return row;
}
public void shrinkImage(){
// first 0f, 1f mean scaling from X-axis to X-axis, meaning scaling from 0-100%
// first 0f, 1f mean scaling from Y-axis to Y-axis, meaning scaling from 0-100%
// The two 0.5f mean animation will start from 50% of X-axis & 50% of Y-axis, i.e. from center
ScaleAnimation fade_in = new ScaleAnimation(1f, 0f, 1f, 0f, Animation.RELATIVE_TO_SELF, 1f, Animation.RELATIVE_TO_SELF, 1f);
fade_in.setDuration(1000); // animation duration in milliseconds
fade_in.setFillAfter(true); // If fillAfter is true, the transformation that this animation performed will persist when it is finished.
holder.productImage.startAnimation(fade_in);
Log.e("fade","fade out");
}
You can implement your own custom OnClickListener and you can associate id/tag/position for each onclick of each item of gridview.
item.setOnclickListener(new GridItemClick(position));
Custom Click event class below:
Class GridItemClick implements View.OnClickListener
{
int position;
Public GridItemClick(int position)
{
this.position = position;
}
@Override
public onClick(View v)
{
// You can add logic here for each item clicked using position of each item you passed in constructor
}
}
I had same problem in beginning , to solve this I created custom clickListener for views as described above.
It's happening because of default behaviour to reuse inflated view. Take temporary arraylist to store clicked position and verify the same arraylist whether it is contained that specific position or not inside getView method
ArrayList<String> selectedPosition = new ArrayList<String>();
Now update your getView() method as per below :
@Override
public View getView(int position, View convertView, ViewGroup parent) {
View row = convertView;
holder = null;
Product productItem = (Product) productList.get(position);
if (row == null) {
LayoutInflater inflater = ((Activity) context).getLayoutInflater();
row = inflater.inflate(R.layout.products_grid_item_layout, parent, false);
holder = new ViewHolder();
holder.productImage = (ImageView) row.findViewById(R.id.productImage);
holder.detailsIcon = (ImageView) row.findViewById(R.id.detailsIcon);
holder.productTitle = (TextView) row.findViewById(R.id.productTitle);
holder.productSubTitle = (TextView) row.findViewById(R.id.productSubTitle);
holder.productQuantity = (TextView) row.findViewById(R.id.productQuantity);
holder.priceDollar = (TextView) row.findViewById(R.id.priceDollar);
holder.priceCent = (TextView) row.findViewById(R.id.priceCent);
holder.productCount = (TextView) row.findViewById(R.id.productCount);
holder.productGridLayout = (RelativeLayout) row.findViewById(R.id.productGridLayout);
row.setTag(holder);
} else {
holder = (ViewHolder) row.getTag();
}
String price = productItem.getPrice().toString();
String[] pricearray;
pricearray = price.split(".");
holder.productTitle.setText(productItem.getTitle().toString());
holder.productSubTitle.setText(productItem.getSubtitle().toString());
holder.productQuantity.setText(productItem.getVolume().toString());
holder.priceDollar.setText(pricearray[0]+".");
holder.priceCent.setText(pricearray[1]);
if(productItem.getInCart()) {
holder.productCount.setVisibility(View.VISIBLE);
holder.productCount.setText(productItem.getVolume());
}
Picasso.with(context)
.load(productItem.getImageUrl())
.placeholder(R.drawable.favourites)
.error(R.drawable.favourites)
.into(holder.productImage);
urlSlug = productItem.getUrlSlug();
//Added Change here...Check if arraylist contains selectedposition or not?
if(selectedPosition.contains(String.valueOf(position)))
shrinkImage(holder.productImage);
else
//Nothing
holder.detailsIcon.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
final int position = currentGridView.getPositionForView(v);
Log.e("grid position", position+"");
Intent productDetailIntent = new Intent(context,ProductDetailActivity.class);
productDetailIntent.putExtra("url_slug", productList.get(position).getUrlSlug());
context.startActivity(productDetailIntent);
}
});
holder.productGridLayout.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
//final int position = currentGridView.getPositionForView(v);
//Log.e("grid position", position+"");
//shrinkImage();
//Simply store and check selectedPosition
if(selectedPosition.contains(String.valueOf(position)))
selectedPosition.remove(String.valueOf(position));
else
selectedPosition.add(String.valueOf(position));
//And then update adapter
notifyDataSetChanged();
}
});
return row;
}
Update your shirnkImage method and use reference of your holder image passed through argument.
public void shrinkImage(ImageView productImage){
// first 0f, 1f mean scaling from X-axis to X-axis, meaning scaling from 0-100%
// first 0f, 1f mean scaling from Y-axis to Y-axis, meaning scaling from 0-100%
// The two 0.5f mean animation will start from 50% of X-axis & 50% of Y-axis, i.e. from center
ScaleAnimation fade_in = new ScaleAnimation(1f, 0f, 1f, 0f, Animation.RELATIVE_TO_SELF, 1f, Animation.RELATIVE_TO_SELF, 1f);
fade_in.setDuration(1000); // animation duration in milliseconds
fade_in.setFillAfter(true); // If fillAfter is true, the transformation that this animation performed will persist when it is finished.
productImage.startAnimation(fade_in);
Log.e("fade","fade out");
}