Load Multiple Images in ListView

Question

I was following a NewBoston Tutorial (https://www.youtube.com/watch?v=nOdSARCVYic&list=PL6gx4Cwl9DGBsvRxJJOzG4r4k_zLKrnxl&index=48)

He showed how to put an image into a list but he never showed how to assign a different image to every piece of text.

Here is my MainActivity.

public class MainActivity extends Activity {

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


    String[] Jobsites = {"River Park Place", "Mayfair", "Jameson House"};
    ListAdapter jobsiteAdapter = new CustomAdapter(this, Jobsites);
    ListView jobsiteListView = (ListView) findViewById(R.id.jobsiteListView);
    jobsiteListView.setAdapter(jobsiteAdapter);

    jobsiteListView.setOnItemClickListener(
            new AdapterView.OnItemClickListener() {
                @Override
                public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                    String jobsite = String.valueOf(parent.getItemAtPosition(position));
                    //Toast.makeText(MainActivity.this, jobsite, Toast.LENGTH_LONG).show();
                    if (jobsite == "River Park Place"){
                        //Perform segue to the proper view where employess can sign in
                        //******************************************
                        System.out.println("*****************");
                        System.out.println("Attempting to segue");
                        System.out.println("*****************");



                        //******************************************
                    }else{
                        System.out.println("*****************");
                        System.out.println("These jobsites aren't avaliable yet!");
                        System.out.println("*****************");
                        Toast.makeText(MainActivity.this, "**These Sites aren't avaliable yet!**", Toast.LENGTH_LONG).show();
                    }
                }
            }
        );

    }
}

During the video we made a custom View that handles the images. Here is the code.

class CustomAdapter extends ArrayAdapter<String> {


public CustomAdapter(Context context, String[] jobsites) {
    super(context,R.layout.custom_row ,jobsites);
}

@Override
public View getView(int position, View convertView, ViewGroup parent) {
    LayoutInflater jobsiteInflater = LayoutInflater.from(getContext());
    View customView = jobsiteInflater.inflate(R.layout.custom_row, parent, false);

    String singleJobsiteItem = getItem(position);

    ImageView josbiteImage = (ImageView) customView.findViewById(R.id.josbiteImage);

    josbiteImage.setImageResource(R.drawable.riverparkplace);


    return customView;

    }
}

I have two other images that I want to add in for the bottom two items of text in the list. Right now it is just loading the SAME picture over and over again for all three rows in the list.

Answer 1

Let me guide you through this step by step. Before we continue, you need to understand that ArrayAdapter of your ListView populates each row with the data you specify to it. In other words, You would like to pass the image to the adapter just like you did with the Jobsites String array.

1. Define a simple wrapper object that contains your String (Jobsites) and the image you would like to assign to it.

   public class SimpleObject {
   
       private String jobSite;
       private int imageID; // your R.drawable.image
   
       public SimpleObject(String jobSite, int imageID) {
           this.jobSite = jobSite;
           this.imageID = imageID;
       }
   
       public String getJobSite() {
           return jobSite;
       }
   
       public int getImageID() {
           return imageID;
       }
   }
   

2. Initialise your SimpleObject array to be used by the adapter. In your onCreate() of the main activity, do the following:

   ArrayList<SimpleObject> objectList = new ArrayList<>();
   objectList.add(new SimpleObject("River Park Place", R.drawable.image1);
   objectList.add(new SimpleObject("Mayfair", R.drawable.image2);
   // the list goes on....
   

3. Now, change your CustomAdapter to hold the SimpleObject instead of String:

   class CustomAdapter extends ArrayAdapter<SimpleObject> {
   
   
       public CustomAdapter(Context context, ArrayList<SimpleObject> objectList) {
           super(context,R.layout.custom_row ,objectList);
       }
   
       @Override
       public View getView(int position, View convertView, ViewGroup parent) {
           LayoutInflater jobsiteInflater = LayoutInflater.from(getContext());
           View customView = jobsiteInflater.inflate(R.layout.custom_row, parent, false);
   
           // Get the SimpleObject
           SimpleObject item = (SimpleObject) getItem(position);
           String singleJobsiteItem = item.getJobSite(); // get the String
   
           ImageView josbiteImage = (ImageView) customView.findViewById(R.id.josbiteImage);
   
           josbiteImage.setImageResource(item.getImageID()); // get the image ID and assign it to jobsiteImage :)
   
   
           return customView;
   
       }
   }
   

4. Now make sure you initialise the adapter in your main activity with the new SimpleObject list:

   ListAdapter jobsiteAdapter = new CustomAdapter(this, objectList);