List View Tutorial For Android

List View Tutorial is used to show data in tabular form as shown in picture.

Here is the complete source code.

list_item.xml

In list_item.xml i simply designed a cell of list which contains two text views(name & description) and imageview(forward arrow).

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:layout_width="fill_parent" android:padding="6px"
	android:layout_height="67px" android:id="@+id/rlt_main"
	android:background="#000000">
	<TextView android:layout_width="wrap_content"
		android:layout_height="wrap_content" android:id="@+id/tv_name"
		android:text="Name" android:layout_centerVertical="true"></TextView>
	<TextView android:layout_width="wrap_content"
		android:layout_height="wrap_content" android:text="Description"
		android:id="@+id/tv_description" android:layout_centerVertical="true"
		android:layout_toRightOf="@+id/tv_name" android:layout_marginLeft="10px"></TextView>
	<ImageView android:layout_width="wrap_content"
		android:layout_height="wrap_content" android:layout_centerVertical="true"
		android:id="@+id/iv_forward" android:background="@drawable/forward_arrow"
		android:layout_alignParentRight="true"></ImageView>
</RelativeLayout>

main.xml

In main.xml i designed the layout contain header and footer(relative layout) having height 50 px. In between them there is relative layout containing list view used to show items list.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout android:id="@+id/RelativeLayout01"
	android:layout_width="fill_parent" android:layout_height="fill_parent"
	xmlns:android="http://schemas.android.com/apk/res/android">
	<RelativeLayout android:id="@+id/RelativeLayout02"
		android:layout_height="50px" android:layout_width="fill_parent"
		android:background="#ffffff"></RelativeLayout>
	<RelativeLayout android:id="@+id/RelativeLayout03"
		android:layout_width="fill_parent" android:layout_height="fill_parent"
		android:background="#808080" android:layout_above="@+id/RelativeLayout04"
		android:layout_below="@+id/RelativeLayout02">
		<ListView android:layout_width="wrap_content"
			android:layout_height="wrap_content" android:id="@+id/list_view"></ListView>
	</RelativeLayout>
	<RelativeLayout android:id="@+id/RelativeLayout04"
		android:layout_height="50px" android:layout_width="fill_parent"
		android:layout_alignParentBottom="true" android:background="#ffffff"></RelativeLayout>
</RelativeLayout>

Splash.java

In Splash activity i bind the itemslist coming from itemBO getItems() method.

In order to bind list i have to make ArrayAdapter Class ArrayList<ItemBO>, Context attributes and Constructor and getView() methods.

In getView() method i inflate the list_item layout and implement onClickListner to ListCell to apply action when user clicks on list cell which starts new Activity and pass ItemName to it in Intent.

public class Splash extends Activity implements OnClickListener {

	private ListView listview;
	private ArrayList mListItem;

	/** Called when the activity is first created. */
	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);
		listview = (ListView) findViewById(R.id.list_view);
		mListItem = ItemBO.getItems();
		listview.setAdapter(new ListAdapter(Splash.this, R.id.list_view,
				mListItem));
	}

	@Override
	public void onClick(View v) {
	}

	// ***ListAdapter***
	private class ListAdapter extends ArrayAdapter { //--CloneChangeRequired
		private ArrayList mList; //--CloneChangeRequired
		private Context mContext;

		public ListAdapter(Context context, int textViewResourceId,
				ArrayList list) { //--CloneChangeRequired
			super(context, textViewResourceId, list);
			this.mList = list;
			this.mContext = context;
		}

		public View getView(int position, View convertView, ViewGroup parent) {
			View view = convertView;
			try {
				if (view == null) {
					LayoutInflater vi = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);
					view = vi.inflate(R.layout.list_item, null); //--CloneChangeRequired(list_item)
				}
				final ItemBO listItem = mList.get(position); //--CloneChangeRequired
				if (listItem != null) {
					// setting list_item views
					((TextView) view.findViewById(R.id.tv_name))
							.setText(listItem.getName());
					view.setOnClickListener(new OnClickListener() {
						public void onClick(View arg0) { //--clickOnListItem
							Intent myIntent = new Intent(Splash.this,
									Activity2.class);
							myIntent.putExtra("NAME", listItem.getName());
							startActivity(myIntent);
							finish();
						}
					});
				}
			} catch (Exception e) {
				Log.i(Splash.ListAdapter.class.toString(), e.getMessage());
			}
			return view;
		}
	}
}

Activity2.java

In Activity2 i just show that which item of items list is clicked and allow to go back.

public class Activity2 extends Activity {
	private Context context;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);

		RelativeLayout relativeLayout = new RelativeLayout(this);
		Button button = new Button(this);
		Bundle bundle = getIntent().getExtras();
		if (bundle != null) {
			button.setText("Item name = " + bundle.getString("NAME")
					+ " --- Go Back ");
		} else {
			button.setText("Go Back");
		}
		context = this;
		button.setOnClickListener(new OnClickListener() {
			@Override
			public void onClick(View v) {
				startActivity(new Intent(context, Splash.class));
				finish();
			}
		});
		relativeLayout.addView(button);
		LayoutParams params = new LayoutParams(LayoutParams.FILL_PARENT,
				LayoutParams.FILL_PARENT);
		setContentView(relativeLayout, params);
	}

}

ItemBO.java

It is the itemBO class containing name, description attributes and getItems() method.

public class ItemBO {
	private String name;
	private String description;
	public String getName() { return name;	}
	public void setName(String name) { this.name = name; }
	public String getDescription() { return description; }
	public void setDescription(String description) { this.description = description; }
	// / --------------------
	public static ArrayList getItems() {
		ArrayList list = new ArrayList();
		ItemBO item;

		item = new ItemBO();
		item.setName("item 1");
		item.setDescription("desc 1");
		list.add(item);

		item = new ItemBO();
		item.setName("item 2");
		item.setDescription("desc 2");
		list.add(item);

		item = new ItemBO();
		item.setName("item 3");
		item.setDescription("desc 3");
		list.add(item);

		return list;
	}
}

Here is the complete source code.

You can also extend ListView Class and make your own Generic List. Here its source code.

Other Links

http://ykyuen.wordpress.com/2010/01/03/android-simple-listview-using-simpleadapter/

free counters

About these ads
This entry was posted in Android, Tutorials and tagged , , , . Bookmark the permalink.

5 Responses to List View Tutorial For Android

  1. david says:

    am i supposed to do any thing with the string.xml file and drawables folder?pls help!

  2. MB says:

    Aren’t you missing a cast in this line?
    final ItemBO listItem = mList.get(position);

  3. Great.
    Helped me out here with the custom lists.
    Simple and worked almost instantly for me.

  4. charly says:

    Thank you! really useful !!
    But I want to start a dialog instead of Activity2. The dialog needs a context, I cannot use a non-static variable in the onClick listener, and the context cannot be static. Then, how I can start a dialog?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s