Drawing multiple lines in edittext e.g. notepad

Question

I was taking a look at the notepad sample in the android SDK see here: http://developer.android.com/resources/samples/NotePad/src/com/example/android/notepad/NoteEditor.html

Thing is it only draws the current line the cursor is on e.g http://cdn2.staztic.com/screenshots/simple-notepad-app-al-1.jpg

But I'd like to display lines that fill up the screen e.g. http://www.itismyworld.info/wp-content/uploads/2010/03/AK-notebook.png

Any suggestions would be great. The relevent bit of code seems to be here:

    protected void onDraw(Canvas canvas) {

        // Gets the number of lines of text in the View.
        int count = getLineCount();

        // Gets the global Rect and Paint objects
        Rect r = mRect;
        Paint paint = mPaint;

        /*
         * Draws one line in the rectangle for every line of text in the EditText
         */
        for (int i = 0; i < count; i++) {

            // Gets the baseline coordinates for the current line of text
            int baseline = getLineBounds(i, r);

            /*
             * Draws a line in the background from the left of the rectangle to the right,
             * at a vertical position one dip below the baseline, using the "paint" object
             * for details.
             */
            canvas.drawLine(r.left, baseline + 1, r.right, baseline + 1, paint);
        }

        // Finishes up by calling the parent method
        super.onDraw(canvas);
    }

Solution 1

This is the code, based on jkhouws1's suggestion and google's note editor

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

    // we need this constructor for LayoutInflater
    public LinedEditText(Context context, AttributeSet attrs) {
        super(context, attrs);

        mRect = new Rect();
        mPaint = new Paint();
        mPaint.setStyle(Paint.Style.FILL_AND_STROKE);
        mPaint.setColor(R.color.edit_note_line); //SET YOUR OWN COLOR HERE
    }

    @Override
    protected void onDraw(Canvas canvas) {
        //int count = getLineCount();

        int height = getHeight();
        int line_height = getLineHeight();

        int count = height / line_height;

        if (getLineCount() > count)
            count = getLineCount();//for long text with scrolling

        Rect r = mRect;
        Paint paint = mPaint;
        int baseline = getLineBounds(0, r);//first line

        for (int i = 0; i < count; i++) {

            canvas.drawLine(r.left, baseline + 1, r.right, baseline + 1, paint);
            baseline += getLineHeight();//next line
        }

        super.onDraw(canvas);
    }
}

In Eclipse IDE press Ctrl+Shift+O to add all needed imports

Solution 2

I think this is what you need:

public class LinedEditText extends EditText {

    private static Paint linePaint;

    static {
        linePaint = new Paint();
        linePaint.setColor(Color.BLACK);
        linePaint.setStyle(Style.STROKE);
    }

    public LinedEditText(Context context, AttributeSet attributes) {
        super(context, attributes);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        Rect bounds = new Rect();
        int firstLineY = getLineBounds(0, bounds);
        int lineHeight = getLineHeight();
        int totalLines = Math.max(getLineCount(), getHeight() / lineHeight);

        for (int i = 0; i < totalLines; i++) {
            int lineY = firstLineY + i * lineHeight;
            canvas.drawLine(bounds.left, lineY, bounds.right, lineY, linePaint);
        }

        super.onDraw(canvas);
    }


}

Solution 3

maybe after that for loop, you draw estimated* additional lines.

getHeight() will return EditText's height in pixels getLineHeight() will height of one standard line

so getHeight/getlineHeight-getCount will be number of lines left to draw.

you can't use getLineBounds, using the above functions you could calculate the position of the remaining lines to draw.

*Estimated since formatting of text could change the line height, but since there is no text in these lines yet that shouldnt be an issue. But for that same reason you should only draw the remaining lines, and not use this to draw all the lines.

Comments

[Rahul Gupta]

Is it possible to increase the spacing between lines. If i do baseline+=getLineHeight() + 30 , there is spacing between line but when i press ENTER the cursor is not above the line. It is in the middle

[Hardik Joshi]

This helps me. For putting doted line use following code : PathEffect effects = new DashPathEffect(new float[] { 3, 3, 3, 3 }, 1); mPaint.setPathEffect(effects); In LinedEditText constructor.

[Vikas Sharma]

First of all many thanks for providing the nice and easy solution. I really appreciate it. Is it possible that i can show the line numbers too in the starting of line. One more thing i want to ask that the if we add the line no. then it will be the part of edittext's text or it will be treated like placeholder text so we can see it but cannot copy it. Please share you nice thoughts on this. Thanks