ListView with customized Row Layout - Android

Question

I'd like to create an Activity containing a list in which the rows have a custom layout. So I've created the list_entry_layout.xml file defining the layout that each row of my list should have (in my example each row should have a title and a summary):

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

    <TextView
        android:id="@+id/list_entry_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="20dp" >
    </TextView>

    <TextView
        android:id="@+id/list_entry_summary"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="10dp" >
    </TextView>

</LinearLayout>

My problem is that I do not know how to add the data to each row in the ListActivity class. With the following code snippet I'm able to add the titles of each row:

public class MyActivity extends ListActivity 
{

    @Override
    protected void onCreate(Bundle savedInstanceState) 
    { 

        super.onCreate(savedInstanceState);
        setContentView(R.layout.list_activity);

        ListView listView = (ListView) findViewById(android.R.id.list);
        String[] values = new String[] { "Android", "iPhone", "WindowsMobile",
            "Blackberry", "WebOS", "Ubuntu", "Windows7", "Max OS X",
            "Linux", "OS/2" };

        ArrayAdapter<String> titleAdapter = new ArrayAdapter<String>(this, R.layout.list_entry_layout, R.id.list_entry_title, values);
        // Assign adapter to ListView
        listView.setAdapter(titleAdapter);

    }
}

For adding also the summary how should I do?

If I add this code I will have the summaries visualized, and not the titles:

String[] values = new String[] { "Android_summary", "iPhone_summary", "WindowsMobile_summary", "Blackberry_summary", "WebOS_summary", "Ubuntu_summary", "Windows7_summary", "Max OS X_summary", "Linux_summary", "OS/2_summary" };
ArrayAdapter<String> summaryAdapter = new ArrayAdapter<String>(this, R.layout.list_entry_layout, R.id.list_entry_summary, values);
// Assign adapter to ListView
listView.setAdapter(summaryAdapter);

The following is the result I'd like to obtain:

Answer 1

You need to create your own ArrayAdapter:

private class YourAdapter extends ArrayAdapter<String> {
   // do some work
}

Then you should specify how will look your row with XML, exactly for your goal, i recommend to you use RelativeLayout and it can looks like this:

row.xml

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

    <TextView 
        android:id="@+id/name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        />

    <TextView 
        android:id="@+id/email"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_below="@id/name"
        />

</RelativeLayout>

So then in YourAdapter you have to set super constuctor:

public YourAdapter() {
   super(YourActivity.this, R.layout.row, data);
}

Then for customize your data in ListView + more effective implementation i recommend to you override getView() method and also use Holder design pattern.

@Override
public View getView(int position, View convertView, ViewGroup parent) {         
   ViewHolder holder = null;
   LayoutInflater inflater = getLayoutInflater();
      if (convertView == null) {
         convertView = inflater.inflate(R.layout.row, null, false);
         holder = new ViewHolder(convertView);
         convertView.setTag(holder);
      }
      else {
         holder = (ViewHolder) convertView.getTag();
      }     
      holder.getUpperText().setText(dataSource[position]);
      holder.getLowerText().setText(dataSource[position]);

   return convertView;  
}

Finally just initialize ListView and set Adapter:

ListView list = (ListView) findViewById(R.id.list);
list.setAdapter(new YourAdapter());

Note: Design pattern Holder represents arbitrary object that holds child widgets of each row, so you need to find them only once and then with Holder object you will always have access to them.

Implementation of Holder can looks like this:

public class ViewHolder {
   private View row;
   private TextView upperText = null, lowerText = null;

   public ViewHolder(View row) {
      this.row = row;
   }

   public TextView getUpperText() {
      if (this.upperText == null) {
         this.upperText = (TextView) inView.findViewById(R.id.someId);
      }
      return this.upperText;
   }

   public TextView getLowerText() {
      if (this.lowerText == null) {
         this.lowerText = (TextView) inView.findViewById(R.id.someId);
      }
      return this.lowerText;
   }
}

Hope it helps.