When you work with a ListView in Android to show a list of items to the user, you might want every item or row of the ListView contains both text and icon. This tip shows you how to achieve this goal.

Now create a new Android project in Eclipse ADT. Then modify the activity_main.xml file to add a ListView as shown below.

<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=".MainActivity" >

   <ListView
     android:id="@+id/list"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
  
     />
      
</RelativeLayout>



The ListView contains its own layout file that defines the template for every item of the ListView. In that file, you can customize an item of the ListView. In this tip, every item of the ListView contains two parts: icon and text. So, the layout file (listlayout.xml) is written as below:

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="fill_parent"
   android:layout_height="wrap_content"
   android:orientation="horizontal"
   android:background="#000000"
   android:padding="5dip" >

<ImageView
   android:id="@+id/icon"
   android:layout_width="30dp"
   android:layout_height="30dp"
   android:padding="5sp"
   android:contentDescription="icon"
  />

<TextView
   android:id="@+id/country"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:padding="10sp"
     android:textSize="20sp"
     android:textColor="#ffffff"
     android:textStyle="bold" >
</TextView>

</LinearLayout>

After the template for every item of the ListView is defined, you will create a class that its object is used as the data source of the list. This class (ListAdapterModel) will extends the ArrayAdapter class. You need to override the getView method of the ArrayAdapter class to add data to every item of the list.

package com.example.andtip;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.TextView;

public class ListAdapterModel extends ArrayAdapter<String>{
int groupid;
String[] clist;
Context context;

public ListAdapterModel(Context context, int vg, int id, String[] clist){
super(context,vg, clist);
this.context=context;
groupid=vg;
this.clist=clist;

}
public View getView(int position, View convertView, ViewGroup parent) {

     LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
     View itemView = inflater.inflate(groupid, parent, false);
     ImageView imageView = (ImageView) itemView.findViewById(R.id.icon);
     imageView.setImageDrawable(context.getResources().getDrawable(imageList[position]));
     TextView textcountry= (TextView) itemView.findViewById(R.id.country);
     textcountry.setText(clist[position]);    
     return itemView;
    
}
private Integer[] imageList={R.drawable.khr, R.drawable.cad, R.drawable.cny,
R.drawable.jpy,R.drawable.usd};
}

Next, in the onStart method of MainActivity class, you need to create a reference to the ListView, create an object of the ListAdapterModel, set the object to the ListView witht the setAdapter method.

package com.example.andtip;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.widget.ListView;

public class MainActivity extends Activity {

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


   @Override
   public boolean onCreateOptionsMenu(Menu menu) {
     // Inflate the menu; this adds items to the action bar if it is present.
     getMenuInflater().inflate(R.menu.main, menu);
     return true;
   }
  
   public void onStart(){
   super.onStart();
   String[] countries=new String[]{"Cambodia","Canada","China","Japan","USA"};
   ListView list=(ListView)findViewById(R.id.list);
   ListAdapterModel ma=new ListAdapterModel(this,R.layout.listlayout,R.id.country,countries);
   list.setAdapter(ma);
  
   }
  
}

Before running the project, you need to have five icons: khr.png, cad.png, cny.png, jpy.png, and usd.png in the res/drawable folder.