Custom List View

Some Times we may come across few situations where we need to display an image and information about the image beside it.
consider the following image as an example : 

This task can be accomplished in many ways and am gonna discuss a way using Base Adapter.

In general a list view will contain only a single textview in each row  which will be inflated (by default) for the number of items. But if we need another view other than a textview or an additional view we need to use an alternative.

This inflation is done by using an additional xml file which will be inflated onto the list view.
consider an xml file with a list view as below :

main.xml

<?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="fill_parent"

    android:orientation="vertical" >

   
  <TextView

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:text="@string/hello" />

    
     <ListView

        android:id="@+id/main_LV_list"

        android:layout_width="match_parent"

        android:layout_height="wrap_content" >

    </ListView>

</LinearLayout>

And we are going to inflate the following xml file so that we can get an image and a textview in each row .
row.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" >

    <ImageView
        android:id="@+id/row_IV_android"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_launcher" />

    <TextView
        android:id="@+id/row_TV_detail"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView" />

</LinearLayout>

Now let us consider how to use the BaseAdapter class
we need to use a class which extends the baseAdapter class.
After extending the baseadapter class we need to add the 4 unimplemented methods of baseAdapter.

Consider the following code : 

1. class CustomAdapter extends BaseAdapter {
2. Context cont;
3. 
   
4. public CustomAdapter(Context c) {
5. // TODO Auto-generated constructor stub
6. cont = c;
7. }
8. 
   
9. @Override
10. public int getCount() {
11. // TODO Auto-generated method stub
12. return 5;
13. }
14. 
    
15. @Override
16. public Object getItem(int arg0) {
17. // TODO Auto-generated method stub
18. return arg0;
19. }
20. 
    
21. @Override
22. public long getItemId(int arg0) {
23. // TODO Auto-generated method stub
24. return arg0;
25. }
26. 
    
27. @Override
28. public View getView(int arg0, View arg1, ViewGroup arg2) {
29. // TODO Auto-generated method stub
30. View v = arg1;
31. LayoutInflater lv = (LayoutInflater) cont
32. .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
33. v = lv.inflate(R.layout.row, arg2, false);
34. ImageView iv_android = (ImageView) v
35. .findViewById(R.id.row_IV_android);
36. TextView tv_label = (TextView) v.findViewById(R.id.row_TV_detail);
37. tv_label.setText(" label is " + arg0);
38. return v;
39. }
40. }
 

The getView() is used to inflate the image and the textview to the listview.
getCount() is used to identify the number of items that should be displayed in the list view.
We can consider a arraylist and specify the size of the arraylist so that the getView() will be called for all the list items , thereby displaying a row for each arraylist item.

Now how to use this above code to make it display the listview?

Its similar to setting an adapter for a listview but here the adapter will be an object of the class that extends the BaseAdapter.

i.e.., we use 

listView.setAdapter(new CustomAdapter(this)) instead of  

listView.setAdapter(adapter);

Once have a look at the line 34 :
Here we can see that we are inflating the row.xml file as a view and finally returning the view.

consider the entire code below : (I am not extending a ListActivity. Dont do it)

1. import android.widget.Toast;
2. import android.app.Activity;
3. import android.content.Context;
4. import android.os.Bundle;
5. import android.view.LayoutInflater;
6. import android.view.View;
7. import android.view.ViewGroup;
8. import android.widget.AdapterView;
9. import android.widget.AdapterView.OnItemClickListener;
10. import android.widget.BaseAdapter;
11. import android.widget.ImageView;
12. import android.widget.ListView;
13. import android.widget.TextView;
14. 
    
15. public class CustomListsActivity extends Activity implements
16. OnItemClickListener {
17. /** Called when the activity is first created. */
18. ListView listView;
19. 
    
20. @Override
21. public void onCreate(Bundle savedInstanceState) {
22. super.onCreate(savedInstanceState);
23. setContentView(R.layout.main);
24. listView = (ListView) findViewById(R.id.main_LV_list);
25. listView.setAdapter(new CustomAdapter(this));
26. listView.setOnItemClickListener(this);
27. }
28. 
    
29. class CustomAdapter extends BaseAdapter {
30. Context cont;
31. 
    
32. public CustomAdapter(Context c) {
33. // TODO Auto-generated constructor stub
34. cont = c;
35. }
36. 
    
37. @Override
38. public int getCount() {
39. // TODO Auto-generated method stub
40. return 5;
41. }
42. 
    
43. @Override
44. public Object getItem(int arg0) {
45. // TODO Auto-generated method stub
46. return arg0;
47. }
48. 
    
49. @Override
50. public long getItemId(int arg0) {
51. // TODO Auto-generated method stub
52. return arg0;
53. }
54. 
    
55. @Override
56. public View getView(int arg0, View arg1, ViewGroup arg2) {
57. // TODO Auto-generated method stub
58. View v = arg1;
59. LayoutInflater lv = (LayoutInflater) cont
60. .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
61. v = lv.inflate(R.layout.row, arg2, false);
62. ImageView iv_android = (ImageView) v
63. .findViewById(R.id.row_IV_android);
64. TextView tv_label = (TextView) v.findViewById(R.id.row_TV_detail);
65. tv_label.setText(" label is " + arg0);
66. return v;
67. }
68. }
69. 
    
70. @Override
71. public void onItemClick(AdapterView<?> arg0, View arg1, int arg2, long arg3) {
72. // TODO Auto-generated method stub
73. Toast.makeText(this, "item clicked is " + arg2, Toast.LENGTH_SHORT)
74. .show();
75. }
76. }

The above code also has an implementation of displaying a toast when a list item is clicked. 

Any suggestions are welcomed.
Please do comment if any problem with the code.