将图像从URL加载到gridview中

Question

I have a gridview which is supposed to contain an image and a text below it. I am using Picasso to load the images but when I run the app, nothing appears in the imageviews! Below is my MainActivity.java code:

import android.content.Context;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.GridView;
import android.widget.ImageView;
import com.squareup.picasso.Picasso;

import java.util.ArrayList;
import java.util.Arrays;

public class MainActivity extends AppCompatActivity {
    GridView gv;
    Context context;
    ArrayList prgmName;
    public static String [] prgmNameList={"C++","VB.NET","JAVA", "JavaScript", "MySQL", "PHP"};
    public static String [] prgmImgFiles = {"cpp.png", "vb.net.png", "java.png", "js.png", "mysql.png", "php.png"};
    public static Integer [] prgmImages={R.mipmap.img_0, R.mipmap.img_1, R.mipmap.img_2};
    public ArrayList<String> arrayList = new ArrayList<String>(Arrays.asList(prgmNameList));
    public ArrayList<Integer> arrayList2 = new ArrayList<Integer>(Arrays.asList(prgmImages));
    public ArrayList<String> arrayList3 = new ArrayList<String>(Arrays.asList(prgmImgFiles));
    public static GridViewAdapter gvd;

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


    }

    public void onLoadClick(View v)
    {
        gv=(GridView) findViewById(R.id.gridView2);
        gvd = new GridViewAdapter(this, arrayList, arrayList3);
        gv.setAdapter(gvd);

        ImageView iv2 = (ImageView)findViewById(R.id.imageViewTest);

        // addItem("JavaScript", "http://10.0.2.2/picgal/images/js.png");
        Picasso.with(this).load("http://10.0.2.2/picgal/images/java.png").into(iv2);
    }

    public void addItem(String txt, String ImgID)
    {
        arrayList.add(txt);
        arrayList3.add(ImgID);
        gvd.notifyDataSetChanged();
    }

}

Below is my GridViewAdapter.java code:

import android.content.Context;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;
import com.squareup.picasso.Picasso;
import java.util.ArrayList;

/**
 * Created by ITM on 7/4/2016.
 */
public class GridViewAdapter extends BaseAdapter {
    ArrayList<String> result;
    Context context;
    ArrayList<String> imageId;
    private static LayoutInflater inflater=null;
    public static final String server = "http://10.0.2.2/picgal/images/";
    public Holder holder=new Holder();

    public GridViewAdapter(MainActivity mainActivity, ArrayList<String> prgmNameList, ArrayList<String> prgmImages) {
        // TODO Auto-generated constructor stub
        result=prgmNameList;
        context=mainActivity;
        imageId=prgmImages;
        inflater = ( LayoutInflater )context.
                getSystemService(Context.LAYOUT_INFLATER_SERVICE);

    }

    @Override
    public int getCount() {
        // TODO Auto-generated method stub
        return result.size();
    }

    @Override
    public Object getItem(int position) {
        // TODO Auto-generated method stub
        return position;
    }

    @Override
    public long getItemId(int position) {
        // TODO Auto-generated method stub
        return position;
    }

    public class Holder
    {
        public TextView tv;
        public ImageView img;
    }
    @Override
    public View getView(final int position, View convertView, ViewGroup parent) {
        // TODO Auto-generated method stub
        View rowView;

        rowView = inflater.inflate(R.layout.img_layout, null);
        holder.tv=(TextView) rowView.findViewById(R.id.txt);
        holder.img=(ImageView) rowView.findViewById(R.id.img);

        holder.tv.setText(result.get(position));
        Log.i("getView", imageId.get(position));
        Picasso.with(context).load(imageId.get(position)).into(holder.img);

        // holder.img.setImageResource(imageId.get(position));

        rowView.setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View v) {
                // TODO Auto-generated method stub
                Toast.makeText(context, "You Clicked " + result.get(position) +"\n"+getCount(), Toast.LENGTH_LONG).show();
            }
        });

        return rowView;
    }
}

The activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.badihbarakat.gridviewapp.MainActivity">

    <GridView
        android:layout_width="wrap_content"
        android:layout_height="250dp"
        android:id="@+id/gridView2"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:background="#ffe5e5"
        android:columnWidth="100dp"
        android:drawSelectorOnTop="true"
        android:gravity="center"
        android:numColumns="auto_fit"
        android:stretchMode="spacingWidthUniform"
        android:verticalSpacing="5dp"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="5dp"
        android:layout_marginTop="5dp"
        android:scrollIndicators="left" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Load"
        android:id="@+id/btnLoad"
        android:layout_below="@+id/gridView2"
        android:layout_centerHorizontal="true"
        android:onClick="onLoadClick" />

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/imageViewTest"
        android:layout_below="@+id/btnLoad"
        android:layout_centerHorizontal="true" />

</RelativeLayout>

The img_layout.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <FrameLayout
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true">

        <ImageView
            android:id="@+id/img"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:src="@drawable/frame" />

    </FrameLayout>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/txt"
        android:textAlignment="center"/>

</LinearLayout>

I have added a test ImageView below the button to test the Picasso object working. It is working fine. Can any one help please. Thanks

Answer 1

Best ever I used , ImageLoader Library

https://github.com/nostra13/Android-Universal-Image-Loader

ImageLoader imageLoader = ImageLoader.getInstance();
imageLoader.displayImage(imageUri, imageView);

Answer 2

1.You are passing wrong arguments in the gridView's constructor.

  gvd = new GridViewAdapter(this, arrayList, arrayList3);

should be

  gvd = new GridViewAdapter(this, arrayList, arrayList2);

as stated in your code, arrayList2 consists of Images.

2.In adapter, change the second argument in constructor:

 from ArrayList<String> to ArrayList<Integer>

 public GridViewAdapter(MainActivity mainActivity, ArrayList<String> prgmNameList, ArrayList<Integer> prgmImages) {
    //...

}

After this, try passing it to Picasso.

New : Can you try the following code :

      //server url
      String imageURL = ""
     //array of images passed in constructor to append with url
      String arrayOfImages[] = imageId;                                                                                                               
      String completeImageURL = server + arrayOfImages[position];
                Picasso.with(context)
                        .load(completeImageURL)
                        .into(holder.img);

Answer 3

Thanks for all of you who assisted in this question. Actually, after revising the Picasso code, I discovered that the path to the image file was missing! What I have put was:

Picasso.with(context).load(imageId.get(position)).into(holder.img);

As imageId.get(position) contains only the file name and not the full path on the server, the Picasso was not able to find the file! The correct code is:

Picasso.with(context).load(server+imageId.get(position)).into(holder.img);

Where server is a String containing the full path of the images folder. Thanks again to all of you.