Click here to Skip to main content
15,867,686 members
Articles / Mobile Apps / Android
Tip/Trick

Android - customize EditText like a page in textbook.

Rate me:
Please Sign up or sign in to vote.
4.95/5 (16 votes)
9 Jan 2013CPOL 34.4K   1.1K   74   3
Customize EditText in Android with has lines inside.

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 :

 Image 1

History 

Init release on Jan 09, 2013

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



Comments and Discussions

 
GeneralMy vote of 5 Pin
Phat (Phillip) H. VU6-Apr-13 22:34
Phat (Phillip) H. VU6-Apr-13 22:34 
GeneralMy vote of 5 Pin
uyentran311@yahoo.com10-Jan-13 14:47
uyentran311@yahoo.com10-Jan-13 14:47 
GeneralRe: My vote of 5 Pin
WebMaster10-Jan-13 14:51
WebMaster10-Jan-13 14:51 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.