Listview With Customized Row Layout - Android

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

Solution 1:

You need to create your own ArrayAdapter:

privateclassYourAdapterextendsArrayAdapter<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"?><RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="fill_parent"android:layout_height="fill_parent"><TextViewandroid:id="@+id/name"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignParentLeft="true"
        /><TextViewandroid: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.

@Overridepublic View getView(int position, View convertView, ViewGroup parent) {         
   ViewHolderholder=null;
   LayoutInflaterinflater= getLayoutInflater();
      if (convertView == null) {
         convertView = inflater.inflate(R.layout.row, null, false);
         holder = newViewHolder(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:

ListViewlist= (ListView) findViewById(R.id.list);
list.setAdapter(newYourAdapter());

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:

publicclassViewHolder{
   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);
      }
      returnthis.upperText;
   }

   public TextView getLowerText() {
      if (this.lowerText == null) {
         this.lowerText = (TextView) inView.findViewById(R.id.someId);
      }
      returnthis.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;

publicclassSampleActivityextendsListActivity {

    @OverridepublicvoidonCreate(Bundle icicle) {
        super.onCreate(icicle);

        Mobile mobile;

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

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

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

        setListAdapter(newMyAdapter(this, mobiles));
    }

}

Mobile.java

classMobile {
    String name;
    String summary;

    publicStringgetName() {
        return name;
    }

    publicvoidsetName(String name) {
        this.name = name;
    }

    publicStringgetSummary() {
        return summary;
    }

    publicvoidsetSummary(String summary) {
        this.summary = summary;
    }

}

MyAdapter.java

classMyAdapterextendsBaseAdapter {

    private Context context;
    private ArrayList<Mobile> mobiles;

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

    @OverridepublicintgetCount() {
        return mobiles.size();
    }

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

    @OverridepubliclonggetItemId(int position) {
        return0;
    }

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


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

        TextViewname= (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.