Use Picasso to load images in RecyclerView with DataObject

Question

I want to use picasso lib in a "RecyclerViewAdapter". I want to display different images for each entry. It worked for my when I only use text... I parse a JSON file with the data I use in getDataSet().

At the moment I have no idea how I can use the picasso function to add the images to the dataSet.

WRONG => int imageUrl = Picasso.

CardViewActivity.java

public class CardViewActivity extends AppCompatActivity {

    private RecyclerView mRecyclerView;
    private RecyclerView.Adapter mAdapter;
    private RecyclerView.LayoutManager mLayoutManager;
    private static String LOG_TAG = "CardViewActivity";

    // url to make request - Hole fixe Coupons (max. 100)
    private static String url = "http://json.file";

    // JSON Node names
    private static final String TAG_FIXES = "result";
    private static final String TAG_TITEL = "titel";
    private static final String TAG_BESCHREIBUNG = "beschreibung";

    // contacts JSONArray
    JSONArray fixes = null;

    ImageView image;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_card_view);
        /*
        image = (ImageView) findViewById(R.id.image_view);

        Picasso.with(getApplicationContext())
                .load("http://1UVZ8A9DRLH/bild.jpg")
                .placeholder(R.drawable.logo)
                .fit().centerCrop().into(image);
        */
        mRecyclerView = (RecyclerView) findViewById(R.id.my_recycler_view);
        mRecyclerView.setHasFixedSize(true);
        mLayoutManager = new LinearLayoutManager(this);
        mRecyclerView.setLayoutManager(mLayoutManager);
        mAdapter = new MyRecyclerViewAdapter(getDataSet());
        mRecyclerView.setAdapter(mAdapter);

        // Code to Add an item with default animation
        //((MyRecyclerViewAdapter) mAdapter).addItem(obj, index);

        // Code to remove an item with default animation
        //((MyRecyclerViewAdapter) mAdapter).deleteItem(index);
    }


    @Override
    protected void onResume() {
        super.onResume();
        ((MyRecyclerViewAdapter) mAdapter).setOnItemClickListener(new MyRecyclerViewAdapter
                .MyClickListener() {
            @Override
            public void onItemClick(int position, View v) {
                Log.i(LOG_TAG, " Clicked on Item " + position);
            }
        });
    }

    private ArrayList<DataObject> getDataSet() {
        ArrayList results = new ArrayList<DataObject>();

        // Creating JSON Parser instance
        JSONParser jParser = new JSONParser();

        // getting JSON string from URL
        JSONObject json = jParser.getJSONFromUrl(url);

        try {
            // Getting Array of fixes
            fixes = json.getJSONArray(TAG_FIXES);

            // looping through All Contacts
            for(int i = 0; i < fixes.length(); i++){
                JSONObject f = fixes.getJSONObject(i);

                // Storing each json item in variable
                String titel = f.getString(TAG_TITEL);
                String description = f.getString(TAG_BESCHREIBUNG);
                int imageUrl = Picasso.with(getApplicationContext())
                        .load("http://1UVZ8A9DRLH/bild.jpg")
                        .placeholder(R.drawable.logo)
                        .fit().centerCrop().into(image);

                DataObject obj = new DataObject(
                        titel,
                        description,
                        imageUrl
                );
                results.add(i, obj);

            }
        } catch (JSONException e) {
            e.printStackTrace();
        }

        return results;
    }
}

DataObject.java

public class DataObject {
    private String mText1;
    private String mText2;
    private int imageUrl;

    DataObject(String text1, String text2, int imageUrl){
        mText1 = text1;
        mText2 = text2;
        imageUrl = imageUrl;
    }

    public String getmText1() { return mText1;  }

    public void setmText1(String mText1) {
        this.mText1 = mText1;
    }

    public String getmText2() {
        return mText2;
    }

    public void setmText2(String mText2) { this.mText2 = mText2; }

    public int getImageUrl() { return imageUrl; }

    public void getImageUrl(int imageUrl) {
        this.imageUrl = imageUrl;
    }
}

MyRecyclerViewAdapter

public class MyRecyclerViewAdapter extends RecyclerView
        .Adapter<MyRecyclerViewAdapter
        .DataObjectHolder> {
    private static String LOG_TAG = "MyRecyclerViewAdapter";
    private ArrayList<DataObject> mDataset;
    private static MyClickListener myClickListener;

    public static class DataObjectHolder extends RecyclerView.ViewHolder
            implements View
            .OnClickListener {
        TextView label;
        ImageView imgViewIcon;
        TextView description;

        public DataObjectHolder(View itemView) {
            super(itemView);
            label = (TextView) itemView.findViewById(R.id.textView);
            imgViewIcon = (ImageView) itemView.findViewById(R.id.image_view);
            description = (TextView) itemView.findViewById(R.id.textView2);
            Log.i(LOG_TAG, "Adding Listener");
            itemView.setOnClickListener(this);
        }

        @Override
        public void onClick(View v) {
            myClickListener.onItemClick(getAdapterPosition(), v);
        }
    }

    public void setOnItemClickListener(MyClickListener myClickListener) {
        this.myClickListener = myClickListener;
    }

    public MyRecyclerViewAdapter(ArrayList<DataObject> myDataset) {
        mDataset = myDataset;
    }

    @Override
    public DataObjectHolder onCreateViewHolder(ViewGroup parent,
                                               int viewType) {
        View view = LayoutInflater.from(parent.getContext())
                .inflate(R.layout.card_view_row, parent, false);

        DataObjectHolder dataObjectHolder = new DataObjectHolder(view);
        return dataObjectHolder;
    }

    @Override
    public void onBindViewHolder(DataObjectHolder holder, int position) {
        holder.label.setText(mDataset.get(position).getmText1());
        holder.imgViewIcon.setImageResource(mDataset.get(position).getImageUrl());
        holder.description.setText(mDataset.get(position).getmText2());
    }

    public void addItem(DataObject dataObj, int index) {
        mDataset.add(index, dataObj);
        notifyItemInserted(index);
    }

    public void deleteItem(int index) {
        mDataset.remove(index);
        notifyItemRemoved(index);
    }

    @Override
    public int getItemCount() {
        return mDataset.size();
    }

    public interface MyClickListener {
        public void onItemClick(int position, View v);
    }
}

Answer 1

Firts set the imageUrl as a DataObject attribute:

...
String titel = f.getString(TAG_TITEL);
String description = f.getString(TAG_BESCHREIBUNG);
int imageUrl = f.getString(TAG_IMAGE); //Assuming TAG_IMAGE is the name of the Json attribute with the image url

 DataObject obj = new DataObject(
                titel,
                description,
                imageUrl);
...

Then on your adapter do the following:

@Override
public void onBindViewHolder(DataObjectHolder holder, int position) {
    holder.label.setText(mDataset.get(position).getmText1());
    Picasso.with(context).load(mDataset.get(position).getImageUrl()).into(holder.imgViewIcon);
    holder.description.setText(mDataset.get(position).getmText2());
}

Answer 2

In your onBindViewHolder call Picasso to load an image to your ImageView. Like this:

Picasso.with(context).load("url").into(imageView);