Ebolag Ebolag -4 years ago 117
Android Question

How to set onClickListener in Picasso

I'm an Android beginner and i'm building a soundboard app for fun and I'm using

Picasso
to display 2 columns of
ImageButton
side by side. Why Picasso ? Because with simple
ScrollView
and
ImageButton
my application was lagging a lot when scrolling down.

Anyway, I'm trying to play a sound when clicking on a picture but I can't find anything related to this on internet.

Here is my code :

ImageListAdapter.java

package com.kitbass.mastersynthetizer;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageButton;
import android.widget.ImageView;

import com.squareup.picasso.Picasso;


public class ImageListAdapter extends ArrayAdapter {
private Context context;
private LayoutInflater inflater;

private Integer[] imageResources;

static class ViewHolder {
ImageButton mImageButton;
}

public ImageListAdapter(Context context, Integer[] imageUrls) {
super(context, R.layout.listview_item_image, imageUrls);

this.context = context;
this.imageResources = imageUrls;

inflater = LayoutInflater.from(context);
}

@Override
public View getView(int position, View convertView, ViewGroup parent) {

// ViewHolder pattern in play
ViewHolder viewHolder;
if (null == convertView) {
viewHolder = new ViewHolder();
convertView = inflater.inflate(R.layout.listview_item_image, parent, false);
viewHolder.mImageButton = (ImageButton) convertView.findViewById(R.id.iv_button);
convertView.setTag(viewHolder);
} else {
viewHolder = (ViewHolder) convertView.getTag();
}

Picasso
.with(context)
.load(imageResources[position])
.fit()
.centerInside()
.into(viewHolder.mImageButton);

return convertView;
}
}


PicassoActivity.java

GridView gridView = (GridView) findViewById(R.id.heenok_grid_view);
gridView.setAdapter(new ImageListAdapter(PicassoActivity.this, imgResourcesHeenok));
gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> adapterView, View view, int position, long id) {
Toast.makeText(PicassoActivity.this, "" + position, Toast.LENGTH_SHORT).show();
}
});


activity_picasso.xml

<GridView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/heenok_grid_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:numColumns="2" />


listview_item_image.xml

<?xml version="1.0" encoding="utf-8"?>
<ImageButton xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/iv_button"
android:layout_width="match_parent"
android:layout_height="121dp"
android:background="@null"
android:foreground="?attr/selectableItemBackgroundBorderless" />


Thanks !

UPDATE : The mistake was that I was using
ImageButton
instead of
ImageView
... That's why i wasn't able to have even a
Toast
working

Answer Source

First i would do a few things differently for your adapter class recycle your views using the ViewHolder Pattern:

change your xml to:

  1. add an id
  2. remove the onClick method call

as per:

<?xml version="1.0" encoding="utf-8"?>
<ImageButton xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/iv_button"
    android:layout_width="match_parent"
    android:layout_height="121dp"
    android:background="@null"
    android:foreground="?attr/selectableItemBackgroundBorderless"/>

Then use the ViewHolder pattern in your adapter:

public class ImageListAdapter extends ArrayAdapter {
    private Context context;
    private LayoutInflater inflater;

    private Integer[] imageResources;

    static class ViewHolder{
       ImageButton mImageButton;
    }

    public ImageListAdapter(Context context, Integer[] imageUrls) {
        super(context, R.layout.listview_item_image, imageUrls);

        this.context = context;
        this.imageResources = imageUrls;

        inflater = LayoutInflater.from(context);
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {

        // ViewHolder pattern in play
        ViewHolder viewHolder;
        if (null == convertView) {
            viewHolder = new ViewHolder();
            convertView = inflater.inflate(R.layout.listview_item_image, parent, false);
            viewHolder.mImageButton = (ImageButton) convertView.findViewById(R.id.iv_button);
            convertView.setTag(viewHolder);
        }else{
            viewHolder = (ViewHolder) convertView.getTag();
        }

        Picasso
                .with(context)
                .load(imageResources[position])
                .fit()
                .centerInside()
                .into(viewHolder.mImageButton);

        return convertView;
    }
}

or switch to the more popular RecyclerView

then since you are using a GridView to handle clicks you need to add an AdapterView.OnItemClickListener in your Activity class:

mGridView.setOnItemClickListener(new AdapterView.OnItemClickListener(){
    @Override
    public void onItemClick(AdapterView<?> adapterView, View view, int i, long l){
      //... handle the sound playing here
      // onSoundButtonClick() ? maybe
    }

});

for all this you can find an example here

Good Luck and Happy coding!

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download