Click here to Skip to main content
Click here to Skip to main content

Android - customize EditText like a page in textbook.

, 9 Jan 2013 CPOL
Rate this:
Please Sign up or sign in to vote.
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 :

 

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)

Share

About the Author


Comments and Discussions

 
GeneralMy vote of 5 PinprofessionalPhat (Phillip) H. VU6-Apr-13 22:34 
GeneralMy vote of 5 Pinmemberuyentran311@yahoo.com10-Jan-13 14:47 
GeneralRe: My vote of 5 PinmemberPhat (Phillip) H. VU10-Jan-13 14:51 

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

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

| Advertise | Privacy | Mobile
Web04 | 2.8.141022.1 | Last Updated 9 Jan 2013
Article Copyright 2013 by Phat (Phillip) H. VU
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid