Creating GridView With Images from URL

Question

I never seam to be away from here at the minute, ha

i am having some issues with loading images from a url into a gridview using picasso

I have been following the tutorial from here

http://developer.android.com/guide/topics/ui/layout/gridview.html#example

The tutorial is easy enough to follow, however it doesnt deal with bitmap images, so i attempted to use the imageView reference within the custom image adaptor to apply an image from a url to the ImageView

The expected result was the same image repeated a number times on the screen, however the app loads ok but the images are blank. The objects are there because they can be seen when touching the screen.

Main Activity Class

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


public class MainActivity extends Activity {

    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);


        //Call JSON
        // make call to json to get the information to display



        GridView gridview = (GridView) findViewById(R.id.gridview);
        gridview.setAdapter(new ImageAdapter(this));

        gridview.setOnItemClickListener(new OnItemClickListener() {
            public void onItemClick(AdapterView<?> parent, View v,
                                    int position, long id) {
                Toast.makeText(MainActivity.this, "" + position,
                        Toast.LENGTH_SHORT).show();
            }
        });
    }


}

ImageAdapter Class

import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.GridView;
import android.widget.ImageView;

import com.squareup.picasso.Picasso;

public class ImageAdapter extends BaseAdapter {
    private Context mContext;

    public ImageAdapter(Context c) {
        mContext = c;
    }

    public int getCount() {
        return mThumbIds.length;
    }

    public Object getItem(int position) {
        return null;
    }

    public long getItemId(int position) {
        return 0;
    }

    // create a new ImageView for each item referenced by the Adapter
    public View getView(int position, View convertView, ViewGroup parent) {
        ImageView imageView;
        if (convertView == null) {
            // if it's not recycled, initialize some attributes
            imageView = new ImageView(mContext);
            imageView.setLayoutParams(new GridView.LayoutParams(200, 200));
         //   imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
         //   imageView.setPadding(1, 1, 1, 1);
        } else {
            imageView = (ImageView) convertView;
        }

        // Picasso.with(this.mContext).load("http://www.bathchronicle.co.uk/user/lw-avatar/3541022/profileSmall1407142824456.png").into(imageView);

        String url = "http://www.500kgiveaway.co.uk/upload/images/1430572021716.jpg";

        Picasso.with(this.mContext).load(url)
                .resize(100, 100).into(imageView);

 //       imageView.setImageResource(mThumbIds[position]);


        return imageView;
    }

    // references to our images
    private Integer[] mThumbIds = {
            R.drawable.sample_2, R.drawable.sample_3,
            R.drawable.sample_4, R.drawable.sample_5,
            R.drawable.sample_6, R.drawable.sample_7,
            R.drawable.sample_0, R.drawable.sample_1,
            R.drawable.sample_2, R.drawable.sample_3,
            R.drawable.sample_4, R.drawable.sample_5,
            R.drawable.sample_6, R.drawable.sample_7,
            R.drawable.sample_0, R.drawable.sample_1,
            R.drawable.sample_2, R.drawable.sample_3,
            R.drawable.sample_4, R.drawable.sample_5,
            R.drawable.sample_6, R.drawable.sample_7
    };
}

Answer 1

I ran your code. You probably forgot to add this permission, rest looks okay.

<uses-permission android:name="android.permission.INTERNET"/>

It's required for downloading images from internet.

Also you can enable logging to see what's going on behind the scene.

Picasso.with(this.mContext).setLoggingEnabled(true);