Android - customize EditText like a page in textbook.

• Download demo project and source code - 416.4 KB

Introduction

This tip will show a useful tip in Android. That's customizing EditText, so you will have an EditText looks like a page in textbook. So, in some cases, it will make your application be more interesting.

Background

The basic idea here is I will define a custome EditText field in Java. Then, in the main layout, instead of using <Edittext> to provide an EditText field, we will replace it with our Java class that be extended class EditText.

Using the code 

Firstly, we will define a Java class that extend class EditText, named LineEditText 

package vn.com.enclave.android.demo;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.util.AttributeSet;
import android.widget.EditText;

/**
 * @author Phat ( Phillip ) H . VU <vuhongphat@hotmail.com>
 * 
 */
public class LineEditText extends EditText {
	private Rect mRect;
	private Paint mPaint;

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

		mRect = new Rect();
		mPaint = new Paint();
		// define the style of line
		mPaint.setStyle(Paint.Style.FILL_AND_STROKE);
		// define the color of line
		mPaint.setColor(Color.BLACK);
	}

	@Override
	protected void onDraw(Canvas canvas) {
		int height = getHeight();
		int lHeight = getLineHeight();
		// the number of line
		int count = height / lHeight;
		if (getLineCount() > count) {
			// for long text with scrolling
			count = getLineCount();
		}
		Rect r = mRect;
		Paint paint = mPaint;

		// first line
		int baseline = getLineBounds(0, r);

		// draw the remaining lines.
		for (int i = 0; i < count; i++) {
			canvas.drawLine(r.left, baseline + 1, r.right, baseline + 1, paint);
			 // next line
			baseline += getLineHeight();
		}
		super.onDraw(canvas);
	}
} 

 Then, in layout that you want to show EditText field, declare like this:

<vn.com.enclave.android.demo.LineEditText
      android:id="@+id/textView1"
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:layout_alignParentTop="true"
      android:layout_centerHorizontal="true"
      android:layout_marginTop="22dp"
      android:ems="10"
      android:text="@string/main_content"
      android:textAppearance="?android:attr/textAppearanceMedium"
/>

 That's all.
The result when application is running :

History 

Init release on Jan 09, 2013