The To-Do List example from Chapter 2 uses TextViews (within a List View) to display each item. You can customize the appearance of the list by creating a new extension of the Text View, overriding the onDraw method.

In this example, you’ll create a new TodoListItemView that will make each item appear as if on a paper pad. When complete, your customized To-Do List should look like Figure 4-2.

Create a new TodoListItemView class that extends TextView. Include a stub for overriding the onDraw method, and implement constructors that call a new init method stub.

package com.paad.todolist;

import android.content.Context;

import android.content.res.Resources;

import android.graphics.Canvas;

import android.graphics.Paint;

import android.util.AttributeSet;

import android.widget.TextView;

public class TodoListItemView extends TextView {

public TodoListItemView (Context context, AttributeSet ats, int ds) { super(context, ats, ds);

init();

}

public TodoListItemView (Context context) {

super(context);

init();

}

public TodoListItemView (Context context, AttributeSet attrs) { super(context, attrs);

init();

}

private void init() {

}

@Override

public void onDraw(Canvas canvas) {

Use the base TextView to render the text. super.onDraw(canvas);

}

}

Create a new colors.xml resource in the res/values folder. Create new color values for the paper, margin, line, and text colors.

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

<resources>

<color name=”notepad_paper”>#AAFFFF99</color> <color name=”notepad_lines”>#FF0000FF</color> <color name=”notepad_margin”>#90FF0000</color> <color name=”notepad_text”>#AA0000FF</color>

</resources>

Create a new dimens.xml resource file, and add a new value for the paper’s margin width.

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

<resources>

<dimen name=”notepad_margin”>30px</dimen>

</resources>

With the resources defined, you’re ready to customize the TodoListItemView appearance. Create new private instance variables to store the Paint objects you’ll use to draw the paper background and margin. Also create variables for the paper color and margin width values.

Fill in the init method to get instances of the resources you created in the last two steps and create the Paint objects.

private Paint marginPaint;

private Paint linePaint;

private int paperColor;

private float margin;

private void init() {

Get a reference to our resource table.

Resources myResources = getResources();

Create the paint brushes we will use in the onDraw method.

marginPaint = new Paint(Paint.ANTI_ALIAS_FLAG); marginPaint.setColor(myResources.getColor(R.color.notepad_margin)); linePaint = new Paint(Paint.ANTI_ALIAS_FLAG); linePaint.setColor(myResources.getColor(R.color.notepad_lines));

Get the paper background color and the margin width.

paperColor = myResources.getColor(R.color.notepad_paper); margin = myResources.getDimension(R.dimen.notepad_margin);

}

To draw the paper, override onDraw, and draw the image using the Paint objects you created in Step 4. Once you’ve drawn the paper image, call the superclass’s onDraw method, and let it draw the text as usual.

@Override

public void onDraw(Canvas canvas) {

Color as paper canvas.drawColor(paperColor);

Draw ruled lines

canvas.drawLine(0, 0, getMeasuredHeight(), 0, linePaint); canvas.drawLine(0, getMeasuredHeight(),

getMeasuredWidth(), getMeasuredHeight(),

linePaint);

// Draw margin

canvas.drawLine(margin, 0, margin, getMeasuredHeight(), marginPaint);

Move the text across from the margin

canvas.save(); canvas.translate(margin, 0);

Use the TextView to render the text.

super.onDraw(canvas); canvas.restore();

}

That completes the TodoListItemView implementation. To use it in the To-Do List Activity, you need to include it in a new layout and pass that in to the Array Adapter constructor.

Start by creating a new todolist_item.xml resource in the res/layout folder. It will specify how each of the to-do list items is displayed. For this example, your layout need only consist of the new TodoListItemView, set to fill the entire available area.

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

<com.paad.todolist.TodoListItemView

xmlns:android=”http://schemas.android.com/apk/res/android” android:layout_width=”fill_parent” android:layout_height=”fill_parent”

android:padding=”10dp”

android:scrollbars=”vertical”

android:textColor=”@color/notepad_text”

android:fadingEdge=”vertical”

/>

Now open the ToDoList Activity class. The final step is to change the parameters passed in to the ArrayAdapter in onCreate. Replace the reference to the default android.R.layout

.simple_list_item_1 with the new R.layout.todolist_item layout created in Step 6.

final ArrayList<String> todoItems = new ArrayList<String>(); int resID = R.layout.todolist_item;

final ArrayAdapter<String> aa = new ArrayAdapter<String>(this, resID, todoItems); myListView.setAdapter(aa);