Android Custom TextView and it's use

We can write our custom components in android and we can use them according to our need as well for this purpose we need to follow few simple steps. in this example there is a custom text-view which is used in a custom list as well. please have a close look.

make a new project with some appropriate name and make a main class with name ToDoList.java and copy the following given code to it



package jitesh.example;

import java.util.ArrayList;
import android.app.Activity;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.View;
import android.view.View.OnKeyListener;
import android.widget.ArrayAdapter;
import android.widget.EditText;
import android.widget.ListView;

public class ToDoList extends Activity {

  /** Called when the activity is first created. */
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    // Inflate your view
    setContentView(R.layout.main);
      
    // Get references to UI widgets
    ListView myListView = (ListView)findViewById(R.id.myListView);
    final EditText myEditText = (EditText)findViewById(R.id.myEditText);
    
    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);
        
    myEditText.setOnKeyListener(new OnKeyListener() {
        public boolean onKey(View v, int keyCode, KeyEvent event) {
          if (event.getAction() == KeyEvent.ACTION_DOWN)
            if (keyCode == KeyEvent.KEYCODE_ENTER)
            {
              todoItems.add(0, myEditText.getText().toString());
              aa.notifyDataSetChanged();
              myEditText.setText("");
              return true;
            }
          return false;
        }
      });
  }
}

Now go throug the main.xml and copy the following layout


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent">
  <EditText
    android:id="@+id/myEditText"
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:text="New To Do Item"
  />
  <ListView  
    android:id="@+id/myListView"
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
  />
</LinearLayout>

after it we need to make a class with name TodoListItemView.java and copy the following code to it

package jitesh.example;


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 {

  private Paint marginPaint;
  private Paint linePaint;
  private int paperColor;
  private float margin;

  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() {
    // 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);
  }

  @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();
  }
}

the correspondigly use layout is todolist_item.xml where the above custom textview is used.


<?xml version="1.0" encoding="utf-8"?>
<jitesh.example.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"
/>

inside the values folder under res make a new colors.xml and write the following values there


<?xml version="1.0" encoding="utf-8"?>
<resources>
  <color name="notepad_paper">#C23838</color>
  <color name="notepad_lines">#4338C2</color>
  <color name="notepad_margin">#164E4A</color>
  <color name="notepad_text">#4D1810</color>
</resources>

in same way make another dimens.xml with following


<?xml version="1.0" encoding="utf-8"?>
<resources> 
  <dimen name="notepad_margin">100dp</dimen> 
</resources>