BadihBarakat BadihBarakat - 4 months ago 52
Java Question

Loading images from URLs into gridview

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

sha sha
Answer

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);
Comments