Showing posts with label Android listview. Show all posts
Showing posts with label Android listview. Show all posts

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! :)