Customizing theToDo List Array Adapter

This example extends the To-Do List project, storing each item as a ToDoitem object that includes the date each item was created.

You will extend ArrayAdapter to bind a collection of ToDoItem objects to the ListView and customize the layout used to display each List View item.

1. Return to the To-Do List project. Create a new ToDoItem class that stores the task and its creation date. Override the toString method to return a summary of the item data.

package com.paad.todolist;

import java.text.SimpleDateFormat; import java.util.Date;

public class ToDoItem {

String task; Date created;

public String getTask() { return task;

public Date getCreated() { return created;

public ToDoItem(String _task) {

this(_task, new Date(java.lang.System.currentTimeMillis()));

public ToDoItem(String _task, Date _created) { task = _task;

created = _created;

©Override public String toString() {

SimpleDateFormat sdf = new SimpleDateFormat("dd/MM/yy"); String dateString = sdf.format(created); return "(" + dateString + ") " + task;

2. Open the ToDoList Activity and modify the ArrayList and ArrayAdapter variable types to store ToDoItem objects rather than Strings. You'll then need to modify theonCreate method to update the corresponding variable initialization. You'll also need to update the onKeyListener handler to support the ToDoItem objects.

private ArrayList<ToDoItem> todoItems;

private ListView myListView; private EditText myEditText; private ArrayAdapter<ToDoItem> aa;

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

// Inflate your view setContentView(R.layout.main);

// Get references to UI widgets myListView = (ListView)findViewById(; myEditText = (EditText)findViewById(;

todoItems = new ArrayList<ToDoItem>();

int resID = R.layout.todolist_item;

aa = new ArrayAdapter<ToDoItem>(this, resID, todoItems);


myEditText.setOnKeyListener(new OnKeyListener() {

public boolean onKey(View v, int keyCode, KeyEvent event) { if (event.getAction() == KeyEvent.ACTION_DOWN) if (keyCode == KeyEvent.KEYCODE_DPAD_CENTER) {

ToDoItem newItem = new ToDoItem(myEditText.getText().toString());

todoItems.add(0, newItem);




return true;

return false;


3. If you run the Activity it will now display each to-do item as shown in Figure 5-3.

ca A

tofflQi;« PM


' 1

nGtfJW) Cream T«Mttm layuUL

111 i/09) Updalt ToioAi Imty

|1&V1 2/Dfl) Crfai" Todoti^Licfn flai:



4. Now you can create a custom layout to display each to-do item.

Start by modifying the custom layout you created in Chapter 4 to include a second TextView.

It will be used to show the creation date of each to-do item.

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="@color/notepad_paper"> <TextView android:id="@+id/rowDate"








<TextView android:id="@+id/row"









5. Create a new class (ToDoItemAdapter) that extends an ArrayAdapter with a ToDoItem-specific variation. Override getview to assign the task and date properties in the ToDoItem object to the Views in the layout you created in Step 4:

import java.text.SimpleDateFormat; import android.content.Context; import java.util.*; import android.view.*; import android.widget.*;

public class ToDoItemAdapter extends ArrayAdapter<ToDoItem> { int resource;

public ToDoItemAdapter(Context _context, int _resource, List<ToDoItem> _items) { super(_context, _resource, _items); resource = _resource;

©Override public View getView(int position, View convertView, ViewGroup parent) { LinearLayout todoView;

ToDoItem item = getItem(position);

String taskString = item.getTask(); Date createdDate = item.getCreated();

SimpleDateFormat sdf = new SimpleDateFormat("dd/MM/yy"); String dateString = sdf.format(createdDate);

todoView = new LinearLayout(getContext()); String inflater = Context.LAYOUT_INFLATER_SERVICE;

LayoutInflater vi = (LayoutInflater)getContext().getSystemService(inflater); vi.inflate(resource, todoView, true); } else {

todoView = (LinearLayout) convertView;

TextView dateView = (TextView)todoView.findViewById(; TextView taskView = (TextView)todoView.findViewById(;

dateView.setText(dateString); taskView.setText(taskString);

return todoView;

6. Finally, replace the ArrayAdapter declaration with a ToDoItemAdapter: private ToDoItemAdapter aa;

Within onCreate, replace the ArrayAdapter<String> instantiation with the new ToDoItemAdapter:

aa = new ToDoItemAdapter(this, resID, todoItems);

7. If you run your Activity it should appear as shown in the screenshot in Figure 5-4.


All code snippets in this example are part of the Chapter 5 Todo List project, available for download at

Mobile Apps Made Easy

Mobile Apps Made Easy

Quick start guide to skyrocket your offline and online business success with mobile apps. If you know anything about mobile devices, you’ve probably heard that famous phrase coined by one of the mobile device’s most prolific creators proclaiming that there’s an app for pretty much everything.

Get My Free Training Guide

Post a comment