Customizing YourToDo List

The to-do list example from Chapter 2 uses TextView controls to represent each row in a List View. You can customize the appearance of the list by extending Text View and 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-1.

1. 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() {

gBlQi:i3PM

gBlQi:i3PM

@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= <resources> <color name= <color name= <color name= <color name= </resources>

'notepad_paper">#AAFFFF99</color> 'notepad_lines">#FF0000FF</color> 'notepad_margin">#90FF0000</color> 'notepad_text">#AA0000FF</color>

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

'notepad_paper">#AAFFFF99</color> 'notepad_lines">#FF0000FF</color> 'notepad_margin">#90FF0000</color> 'notepad_text">#AA0000FF</color>

q w

e

r t y u

i

0

P

a

S

ti

f

E

h

j

k

1

z

X

c

V

b

n

m

Bfl <¿1

7123

I

*___*

FIGURE 4-1

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

<dimen name="notepad_margin">3 0dp</dimen> </resources>

4. 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);

5. 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();

6. 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 layout 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"

7. 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 a reference to 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);

All code snippets in this example are part of the Chapter 4 Todo List project, available for download at Wrox.com.

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


Responses

  • MOHAMED
    Where to create todolistitemview?
    7 years ago
  • asmara
    Why a stub is needed for overiding the onDraw() method in android?
    7 years ago

Post a comment