Android - customize EditText like a page in textbook.
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