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:

Solution 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.

Solution 2

You can achieve this layout using android.R.layout.simple_list_item_2 rather than creating Custom row layout.

Anyways if you want to go with custom row layout approach then i have snippet ready for you.

Here you go.

SampleActivity.java

package org.sample;

import java.util.ArrayList;

import android.app.ListActivity;
import android.content.Context;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.TextView;
import android.widget.TwoLineListItem;

public class SampleActivity extends ListActivity {

    @Override
    public void onCreate(Bundle icicle) {
        super.onCreate(icicle);

        Mobile mobile;

        ArrayList<Mobile> mobiles  new ArrayList<Mobile>();

        mobile = new Mobile();
        mobile.setName("Android");
        mobile.setSummary("summary goes here");
        mobiles.add(mobile);

        mobile = new Mobile();
        mobile.setName("Blackberry");
        mobile.setSummary("summary goes here");
        mobiles.add(mobile);

        setListAdapter(new MyAdapter(this, mobiles));
    }

}

Mobile.java

class Mobile {
    String name;
    String summary;

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getSummary() {
        return summary;
    }

    public void setSummary(String summary) {
        this.summary = summary;
    }

}

MyAdapter.java

class MyAdapter extends BaseAdapter {

    private Context context;
    private ArrayList<Mobile> mobiles;

    public MyAdapter(Context context, ArrayList<Mobile> mobiles) {
        this.context = context;
        this.mobiles = mobiles;
    }

    @Override
    public int getCount() {
        return mobiles.size();
    }

    @Override
    public Object getItem(int position) {
        return mobiles.get(position);
    }

    @Override
    public long getItemId(int position) {
        return 0;
    }

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


        if (convertView == null) {
            LayoutInflater inflater = (LayoutInflater) context
                    .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            convertView = (View) inflater.inflate(
                    R.layout.list_entry_layout, null);
        }

        TextView name = (TextView)convertView.findViewById(R.id.list_entry_title);
        TextView summary=(TextView)convertView.findViewById(R.id.list_entry_summary);

        name.setText(mobiles.get(position).getName());
        summary.setText(mobiles.get(position).getSummary());

        return convertView;
    }
}

Solution 3

Build your own ArrayAdapter.
See for example http://www.ezzylearning.com/tutorial.aspx?tid=1763429.

Comments

[Matteo]

It's the only possible solution?

[nhaarman]

You need to override the getView() method of the ArrayAdapter to fill in your listrow.

[Matteo]

Ok so I have 2 possibilities?which one is better in your opinion, override a method, or write my own arrayadapter?

[nhaarman]

No, I meant you need the ArrayAdapter to override the getView() method of the ArrayAdapter.

[Gene Bo]

This tutorial was very helpful for me. The only thing I would recommend to do different is instead of an array (Weather []), I figured out (thanks to stackoverflow.com/a/20479071/2162226 ) I should use List<Weather> .. this way when you update the list, you can call notify method after the update and it will update the listView UI element.

[abhishek]

is it necessary to create custom adapter for custom layout