How do I create an interactive GridView using Picasso for Android?

Question

Hi I'm trying to create a GridView using images from an online depository using Picasso. I also want the user to be able to click on the image and it load up full screen to view.

So far I have managed to get it working almost perfectly. The only problem is the image that shows when they click on the grid is not the one that they clicked on, in fact it randomly chooses an image each time.

I was hoping somebody could take a look at my code and tell me where I am going wrong. Thanks.

So this is my MainActivity class:

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.GridView;


public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        GridView gv = (GridView) findViewById(R.id.grid_view);
        gv.setAdapter(new GridViewAdapter(this));


        gv.setOnItemClickListener(new OnItemClickListener() {
             @Override
             public void onItemClick(AdapterView<?> parent, View v,
                     int position, long id) {

                 // Sending image id to FullScreenActivity
                 Intent i = new Intent(getApplicationContext(), FullImageActivity.class);
                 // passing array index
                 i.putExtra("id", position);
                 startActivity(i);
             }
         });
     }
 }

This is my GridView class:

import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import com.squareup.picasso.Picasso;
import java.util.ArrayList;
import java.util.Collections;
import java.util.List;

import static android.widget.ImageView.ScaleType.CENTER_CROP;

final class GridViewAdapter extends BaseAdapter {

final Context context;
final List<String> urls = new ArrayList<String>();

public GridViewAdapter(Context context) {
this.context = context;

// Ensure we get a different ordering of images on each run.
Collections.addAll(urls, Info.URLS);
Collections.shuffle(urls);

// Triple up the list.
ArrayList<String> copy = new ArrayList<String>(urls);
urls.addAll(copy);
urls.addAll(copy);
}

@Override public View getView(int position, View convertView, ViewGroup parent) {
SquaredImageView view = (SquaredImageView) convertView;
if (view == null) {
  view = new SquaredImageView(context);
  view.setScaleType(CENTER_CROP);     
}

// Get the image URL for the current position.
String url = getItem(position);

// Trigger the download of the URL asynchronously into the image view.
Picasso.with(context) //
    .load(url) //
    .placeholder(R.drawable.placeholder) //
    .error(R.drawable.error) //
    .fit() //
    .into(view);

return view;
}

@Override public int getCount() {
return urls.size();
}

@Override public String getItem(int position) {
return urls.get(position);
}

@Override public long getItemId(int position) {
return position;
}
}

And finally my FullScreen Class:

import com.squareup.picasso.Picasso;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.widget.ImageView;

public class FullImageActivity extends Activity {

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.full_image);

    // get intent data
    Intent i = getIntent();

    // Selected image id
    int position = i.getExtras().getInt("id");
    GridViewAdapter ia = new GridViewAdapter(this);

    ImageView iv = (ImageView) findViewById(R.id.full_image_view);

    Picasso.with(this) //
    .load(ia.getItem(position)) //
    .placeholder(R.drawable.placeholder) //
    .error(R.drawable.error) //
    .fit()
    .centerCrop()//
    .into(iv);
}

}

Answer 1

I believe this is your culprit:

Collections.addAll(urls, Info.URLS);
Collections.shuffle(urls);  // this reshuffles on every new instance

GridViewAdapter ia = new GridViewAdapter(this);  // your full screen activity is creating a new instance.

Since I cannot comment yet, the answer is No. When you say startActivity, it will create a new instance of the FullScreenActivity, and then in that FullScreenActivity you are also instantiating a new Adapter which in turn does the shuffle work.

Please put in a breakpoint if you are in doubt.

Answer 2

You reinitialized the adapter for whatever reason here GridViewAdapter ia = new GridViewAdapter(this); That's when the shuffling occurs, in the constructor.

You should not have an adapter in your 2nd Activity. Adapters are for lists. You should simply pass that Activity the image URL.

    GridView gv = (GridView) findViewById(R.id.grid_view);
    GridViewAdapter adapter = new GridViewAdapter(this);
    gv.setAdapter(adapter);
    gv.setOnItemClickListener(new OnItemClickListener() {
         @Override
         public void onItemClick(AdapterView<?> parent, View v,
                 int position, long id) {

             // Sending image url to FullScreenActivity
             Intent i = new Intent(getApplicationContext(), FullImageActivity.class);

             i.putExtra("url", adapter.getItem(position));
             startActivity(i);
         }
     });

and

public class FullImageActivity extends Activity {

    @Override
    public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.full_image);

    // get intent data
    Intent i = getIntent();

    string url = i.getExtras().getString("url");

    ImageView iv = (ImageView) findViewById(R.id.full_image_view);

    Picasso.with(this) //
        .load(url) //
        .placeholder(R.drawable.placeholder) //
        .error(R.drawable.error) //
        .fit()
        .centerCrop()//
        .into(iv);
    }

}

Answer 3

You are creating an adapter twice - once in MainActivity, second time in FullImageActivity. Each time it is created shuffled, that's the reason. Nice copy-paste from Picasso sample btw ;)