How to add pagelines to a EditText in android?

Question

Is it possible to show pagelines in a EditText ?

I mean these lines:

Let's say my EditText is 500 by 500 pixels in size. I want those lines to be visible across that 500 by 500 square.

Is there a build in way to do this? I already tried Google but I couldn't find an answer. I guess my other option is to dynamically create a graphic based on the textheight and linespacing, such an ugly work-around.

Answer 1

The notepad application sample from the android dev site shows you how to do this.

http://developer.android.com/resources/samples/NotePad/index.html

Looks like this (scroll down for code):

Most of the relevant code is in this file . Pay attention to the LinedEditText inner class. It is defined within the activity. It draws the lines required.

Inside the activity onCreate() method, setContentView(R.id.note_editor) is set as the view, it is defined like here

Snippet extracted from here . Update : Code modified by @Pieter888 to draw lines on the entire EditText control.

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

public class LinedEditText extends EditText 
{
    private Rect mRect;
    private Paint mPaint;

    public LinedEditText(Context context, AttributeSet attrs) 
    {
        super(context, attrs);
        mRect = new Rect();
        mPaint = new Paint();
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setColor(0xFF000000);
    }

    /**
     * This is called to draw the LinedEditText object
     * @param canvas The canvas on which the background is drawn.
     */
    @Override
    protected void onDraw(Canvas canvas) 
    {
        int height = canvas.getHeight();
        int curHeight = 0;
        Rect r = mRect;
        Paint paint = mPaint;
        int baseline = getLineBounds(0, r);
        for (curHeight = baseline + 1; curHeight < height; 
                                                 curHeight += getLineHeight())
        {
            canvas.drawLine(r.left, curHeight, r.right, curHeight, paint);
        }
        super.onDraw(canvas);
    }
}

Answer 2

@gideon's answer above works well but has an issue when you enter more text in the edittext because more lines are not drawn accordingly. To solve this, I wrote an override for onMeasure() and called invalidate() . and more lines will be drawn when text increases.

  @Override
  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec,heightMeasureSpec);
    invalidate();
  }

The code now is:

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

public class LinedEditText extends EditText 
{
    private Rect mRect;
    private Paint mPaint;

    public LinedEditText(Context context, AttributeSet attrs) 
    {
        super(context, attrs);
        mRect = new Rect();
        mPaint = new Paint();
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setColor(0xFF000000);
    }

    /**
     * This is called to draw the LinedEditText object
     * @param canvas The canvas on which the background is drawn.
     */
    @Override
    protected void onDraw(Canvas canvas) 
    {
        int height = canvas.getHeight();
        int curHeight = 0;
        Rect r = mRect;
        Paint paint = mPaint;
        int baseline = getLineBounds(0, r);
        for (curHeight = baseline + 1; curHeight < height; 
                                                 curHeight += getLineHeight())
        {
            canvas.drawLine(r.left, curHeight, r.right, curHeight, paint);
        }
        super.onDraw(canvas);
    }

 @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
   super.onMeasure(widthMeasureSpec,heightMeasureSpec);
   invalidate();
      }
}

Answer 3

@gideon's code works but more lines not be drawn

you must just change canvas.getHeight() to getHeight() as following below:

public class LinedEditText extends EditText
 {
private Rect mRect;
private Paint mPaint;

public LinedEditText(Context context, AttributeSet attrs)
{
    super(context, attrs);
    mRect = new Rect();
    mPaint = new Paint();
    mPaint.setStyle(Paint.Style.STROKE);
    mPaint.setColor(ResourcesCompat.getColor(getResources(), R.color.blue,null));
}


@Override
protected void onDraw(Canvas canvas)
{
    int height = getHeight();
    int curHeight = 0;
    Rect r = mRect;
    Paint paint = mPaint;
    int baseline = getLineBounds(0, r);
    for (curHeight = baseline + 1; curHeight < height;
         curHeight += getLineHeight())
    {
        canvas.drawLine(r.left, curHeight, r.right, curHeight, paint);
    }
    super.onDraw(canvas);
}