How to display remote images in ListView using BaseAdapter?

Question

I am using the following code to display images on ListView using BaseAdapter .The code displays images from inside drawable folder. But I want to modify the code so it displays remote images from following Array:

  String flags[] ={"http://www.website.com/images/usa.png","http://www.website.com/images/china.png","http://www.website.com/images/australia.png","http://www.website.com/images/portugle.png","http://www.website.com/images/norway.png","http://www.website.com/images/new_zealand.png"};

Could an expert show me what part needs to be change.Thanks in advance.

MainActivity.java:

public class MainActivity extends Activity {

    ListView simpleList;
    String countryList[] = {"USA", "China", "australia", "Portugle", "Norway", "NewZealand"};
    int flags[] = {R.drawable.usa, R.drawable.china, R.drawable.australia, R.drawable.portugle, R.drawable.norway, R.drawable.new_zealand};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        simpleList = (ListView) findViewById(R.id.simpleListView);
        CustomAdapter customAdapter = new CustomAdapter(getApplicationContext(), countryList, flags);
        simpleList.setAdapter(customAdapter);

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

                Toast.makeText(getApplicationContext(), "Hello " + countryList[position], Toast.LENGTH_LONG).show();


            }
        });
    }
}

CustomAdapter.java:

Public class CustomAdapter extends BaseAdapter {
    Context context;
    String countryList[];
    int flags[];
    LayoutInflater inflter;

    public CustomAdapter(Context applicationContext, String[] countryList, int[] flags) {
        this.context = context;
        this.countryList = countryList;
        this.flags = flags;
        inflter = (LayoutInflater.from(applicationContext));
    }

    @Override
    public int getCount() {
        return countryList.length;
    }

    @Override
    public Object getItem(int i) {
        return null;
    }

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

    @Override
    public View getView(int i, View view, ViewGroup viewGroup) {
        view = inflter.inflate(R.layout.activity_listview, null);
        TextView country = (TextView) view.findViewById(R.id.textView);
        ImageView icon = (ImageView) view.findViewById(R.id.icon);
        country.setText(countryList[i]);
        icon.setImageResource(flags[i]);
        return view;
    }
}

score 1 · Answer 1 · answered Dec 03 '17 at 01:16

1

You need to:

1) Fetch those images in a separate thread, you can use volley, retrofit, robospice for this.

2) On the response of any of those methods from 1) you have to pass the list of values you obtained from the service to your adapter's constructor. You will need to create a POJO for the model, this structure will hold all the elements from the REST webservice.

3) It is recommended to use a viewholder for your listview's adapter, to avoid inflating the views again and again.

answered Dec 03 '17 at 01:16

HaroldSer

2,025
2
12
23

Thanks for reply . I am not very experienced in android development so could you point me to some tutorial on how to write a function and call it from inside getView and pass it the image array so it display them on listview? – user1788736 Dec 03 '17 at 02:58
Yes you can star with: https://www.simplifiedcoding.net/android-volley-tutorial-fetch-json/ – HaroldSer Dec 03 '17 at 03:41
Later on you can use jackson databinding to map the values from the response to the POJO(model class). See this link for reference: https://stackoverflow.com/questions/25545984/how-to-use-jackson-objectmapper-to-parse-json-response-to-java-objects – HaroldSer Dec 03 '17 at 03:53

score 0 · Answer 2 · answered Dec 03 '17 at 03:04

The easiest thing to do is use Glide or Picasso:

@Override
public View getView(int i, View view, ViewGroup viewGroup) {
    view = inflter.inflate(R.layout.activity_listview, null);
    TextView country = (TextView) view.findViewById(R.id.textView);
    ImageView icon = (ImageView) view.findViewById(R.id.icon);
    country.setText(countryList[i]);

    // Assuming flags is now the list of Strings of image urls
    GlideApp.with(view.getContext()).load(flags[i]).into(icon);

    return view;
}

Thanks for your post. could you tell me how to add GlideApp to android studio 2.2 ? i never used it before. — user1788736, Dec 03 '17 at 03:30

score 0 · Answer 3 · answered Dec 03 '17 at 03:11

you can also use some third party library like Picasso or Glide to load images right into your adapter's get view method

Picasso.with(this).load(flags[adapter's position]).into(imageView);

same in glide.

here is simple tutorial https://www.simplifiedcoding.net/picasso-android-tutorial-picasso-image-loader-library/

How to display remote images in ListView using BaseAdapter?

3 Answers3