Friday, February 8, 2013

Populate Android listview with text and image

This is a simple tutorial on how to populate android listview with text and image. For simplicity I use static data in this tutorial, but you can make it dynamic.
Now let's start with a new android project.
Open main.xml and add a listview element as show below (in this, I use default)


    
    


Create list.xml and put it into res/layout/ (main.xml 's folder). This file is used for displaying a row in your listview:


    

    


 Then, open MainActivity (or as your define). Define some variables, we will use later in our class as shown below:
 private LayoutInflater mInflater;
 private ListView mListView;
 private Vector data;
Vector is used for storing our data. LayoutInflater class is used to instantiate layout XML file into its corresponding View objects. Use getSystemService(String) to retrieve a standard LayoutInflater instance that is already hooked up to the current context and correctly configured for the device you are running on.

The whole MainActivity:
private static int[] resID = new int[]{R.drawable.apple, R.drawable.orange};
  
 private LayoutInflater mInflater;
 private ListView mListView;
 private Vector data;
  
 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.main);
  
  mListView = (ListView)findViewById(R.id.listView1);
  mInflater = (LayoutInflater)getSystemService(Activity.LAYOUT_INFLATER_SERVICE);
  
  data = new Vector();
  data.add("Apple");
  data.add("Orange");
  
  MyAdapter adapter = new MyAdapter(this, R.layout.list, R.id.textView1, data);
  
  mListView.setAdapter(adapter);
  mListView.setTextFilterEnabled(true);
  mListView.setOnItemClickListener(new OnItemClickListener() {

   @Override
   public void onItemClick(AdapterView arg0, View arg1, int position,
     long id) {
    Toast.makeText(getApplicationContext(), "You have selected at item: " + position, Toast.LENGTH_LONG).show();  
   }
  });
 }
 
 private class MyAdapter extends ArrayAdapter
 {

  public MyAdapter(Context context, int resource,
    int textViewResourceId, List objects) {
   super(context, resource, textViewResourceId, objects);
  }

  @Override
  public View getView(int position, View convertView, ViewGroup parent) {
   MyView mView = null;
   TextView title = null;
   ImageView img = null;
   String rowData = getItem(position);
   
   if (convertView == null)
   {
    convertView = mInflater.inflate(R.layout.list, null);
    mView = new MyView(convertView);
    convertView.setTag(mView);
   }
   
   mView = (MyView)convertView.getTag();
   
   title = mView.getTitle();
   title.setText(rowData);
   
   img = mView.getImage();
   img.setImageResource(resID[position]);
   
   return convertView;
  }
  
  private class MyView {
   private View _row;
   private TextView _title;
   private ImageView _imgView;
   
   public MyView(View row)
   {
    _row = row;
   }
   
   public TextView getTitle()
   {
    if (_title == null)
     _title = (TextView)_row.findViewById(R.id.textView1);
    return _title;
   }
   
   public ImageView getImage()
   {
    if (_imgView == null)
     _imgView = (ImageView)_row.findViewById(R.id.imageView1);
    return _imgView;
   }
  }
 }
Done! Run it and feel your work! :)

No comments: