Using Picasso library with ListView

Question

What I'm trying to do is adapt my custom ListView adapter to use images fetched from the web by the Picasso library. I believe I have my adapter changed in order to accept an image from Picasso, but I am unsure how to change my implementation to accept it using a ListView. I believe I have to access holder.imageIcon, but I am not sure how to get it up and running. My code is as follows.

History.java

public class History {
    public String score;
    public String gametype;
    public Picasso icon;

    public History() {
        super();
    }

    public History(String score, String gametype, Picasso icon) {
        super();
        this.score = score;
        this.gametype = gametype;
        this.icon = icon;
    }
}

HistoryAdapter.java

public class HistoryAdapter extends ArrayAdapter<History> {

    Context context;
    int layoutResId;
    History data[] = null;

    public HistoryAdapter(Context context, int layoutResId, History[] data) {
        super(context, layoutResId, data);
        this.layoutResId = layoutResId;
        this.context = context;
        this.data = data;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        HistoryHolder holder = null;

        if(convertView == null)
        {
            LayoutInflater inflater = ((Activity)context).getLayoutInflater();
            convertView = inflater.inflate(layoutResId, parent, false);

            holder = new HistoryHolder();
            holder.imageIcon = (ImageView)convertView.findViewById(R.id.icon);
            holder.textTitle = (TextView)convertView.findViewById(R.id.gameType);
            holder.textScore = (TextView)convertView.findViewById(R.id.score);

            convertView.setTag(holder);
        }
        else
        {
            holder = (HistoryHolder)convertView.getTag();
        }

        History history = data[position];
        holder.textScore.setText(history.score);
        holder.textTitle.setText(history.gametype);
        holder.imageIcon.setImageResource(history.icon);


        return convertView;
    }

    static class HistoryHolder
    {
        ImageView imageIcon;
        TextView textTitle;
        TextView textScore;
    }
}

Implementation

History[] historyData = new History[games.length()];


for(int i = 0; i < games.length(); i++) {
                    JSONObject c = games.getJSONObject(i);
                    JSONObject gameStats = games.getJSONObject(i).getJSONObject(TAG_STATS);
                    type[i] = c.getString(TAG_TYPE);
                    champId[i] = c.getString("championId");
                    cs[i] = gameStats.getString("minionsKilled");
                    kills[i] = gameStats.getString("championsKilled");
                    deaths[i] = gameStats.getString("numDeaths");
                    assists[i] = gameStats.getString("assists");
                    win[i] = gameStats.getString("win");

                    if(win[i].equals("true"))
                        win[i] = "Victory";
                    else
                        win[i] = "Defeat";

                    if(type[i].equals("RANKED_SOLO_5x5"))
                        type[i] = "Ranked (Solo)";

                    if(type[i].equals("CAP_5x5"))
                        type[i] = "TeamBuilder";

                    if(type[i].equals("NORMAL"))
                        type[i] = "Unranked";

                    score[i] = kills[i] +"/" + deaths[i] + "/" + assists[i];

                    historyData[i] = new History(score[i], champId[i], R.drawable.ic_launcher); // Placeholder image

                }

                if(historyData == null) {
                    historyData[0] = new History("No game found", "N/A", R.drawable.ic_launcher); // Use Picasso placeholder
                    Log.i("Data", "" + historyData);
                }

                adapter = new HistoryAdapter(MatchHistoryActivity.this,
                        R.layout.list_adapter,
                        historyData);

                list.setAdapter(adapter);

list_item.xml

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="?android:attr/listPreferredItemHeight"
    android:background="#111111"
    android:padding="6dip" >

    <ImageView
        android:id="@+id/icon"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:layout_alignParentBottom="true"
        android:layout_alignParentTop="true"
        android:layout_marginRight="6dip"
        android:contentDescription="TODO"
        android:src="@drawable/ic_launcher" />

    <TextView
        android:id="@+id/score"
        android:textColor="#C49246"
        android:layout_width="fill_parent"
        android:layout_height="26dip"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_marginLeft="5dp"
        android:layout_toRightOf="@id/icon"
        android:ellipsize="marquee"
        android:singleLine="true"
        android:text="0/0/0 KDA"
        android:textSize="12sp" />

    <TextView
        android:id="@+id/gameType"
        android:textColor="#C49246"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_above="@id/score"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:layout_alignWithParentIfMissing="true"
        android:layout_marginLeft="5dp"
        android:layout_toRightOf="@id/icon"
        android:gravity="center_vertical"
        android:textSize="16sp" />

</RelativeLayout>

Cavort

read the doc? there is a section on adapters square.github.io/picasso you'd typically be passing a url. – Mismanage

Ahh, I completely overlooked that section. My bad. Thank you. – Cavort

Answer 1

There are 2 things you need to change: 1) History.icon should be the String url of the icon, not a Picasso object. You can also use a File, Uri, or int, but a String url is probably what you want.

2) Modify your Adapter's getView() method to load the icon using Picasso (see the last line before getView() returns the convertView):

public class HistoryAdapter extends ArrayAdapter<History> {

    Context context;
    int layoutResId;
    History data[] = null;

    public HistoryAdapter(Context context, int layoutResId, History[] data) {
        super(context, layoutResId, data);
        this.layoutResId = layoutResId;
        this.context = context;
        this.data = data;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        HistoryHolder holder = null;

        if(convertView == null)
        {
            LayoutInflater inflater = ((Activity)context).getLayoutInflater();
            convertView = inflater.inflate(layoutResId, parent, false);

            holder = new HistoryHolder();
            holder.imageIcon = (ImageView)convertView.findViewById(R.id.icon);
            holder.textTitle = (TextView)convertView.findViewById(R.id.gameType);
            holder.textScore = (TextView)convertView.findViewById(R.id.score);

            convertView.setTag(holder);
        }
        else
        {
            holder = (HistoryHolder)convertView.getTag();
        }

        History history = data[position];
        holder.textScore.setText(history.score);
        holder.textTitle.setText(history.gametype);
        Picasso.with(this.context).load(history.icon).into(holder.imageIcon)


        return convertView;
    }

    static class HistoryHolder
    {
        ImageView imageIcon;
        TextView textTitle;
        TextView textScore;
    }
}

Jarry

Very helpful indeed, i must admit – Urian