How to show line number in EditText

Question

Here I am trying to build an edit text in which shows the line number whenever new line encounters. I made my own Custom edit text as described in this Using this Link. Here's my code

public class MyEditText extends android.support.v7.widget.AppCompatEditText {

    private Rect rect;
    private Paint paint;

    public MyEditText(Context context) {
        super(context);
        rect = new Rect();
        paint = new Paint();
        paint.setStyle(Paint.Style.FILL);
        paint.setColor(Color.BLACK);
        paint.setTextSize(20);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        int baseline = getBaseline();
        for (int i = 0; i < getLineCount(); i++) {
            canvas.drawText("" + (i+1), rect.left, baseline, paint);
            baseline += getLineHeight();
        }
        super.onDraw(canvas);
    }
}

Here's XML layout of MainActvity

    <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <ScrollView
        android:id="@+id/SCROLLER_ID"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:scrollbars="vertical"
        android:fillViewport="true">

        <android.support.v7.widget.AppCompatEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Type here"
            android:inputType="textMultiLine"
            android:paddingLeft="16dp"
            android:paddingRight="16dp"
            android:paddingTop="16dp"
            android:paddingBottom="16dp"
            android:id="@+id/editor_area"
            android:backgroundTint="@android:color/transparent"
            />
    </ScrollView>
</LinearLayout>

And Here's the Main Activity Code

public class MainActivity extends AppCompatActivity {
Button button;
    TextView textView;
    MyEditText myEditText;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        myEditText = (MyEditText) findViewById(R.id.editor_area);

             // Now what should be further steps to achieve the task
    }
}

I am not able to figure out what's should I do next in this to do this line number thing. I saw many answers on stackoverflow but didn't solve the query, I am new to android. Please help.

Thanks

EDIT : After doing the alterations based on the following answers this is what i am getting in logcat Window

 java.lang.RuntimeException: Unable to start activity ComponentInfo{com.example.aman.demo/com.example.aman.demo.MainActivity}: android.view.InflateException: Binary XML file line #14: Binary XML file line #14: Error inflating class com.example.aman.demo.MyEditText
                                                       at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2817)
                                                       at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2892)
                                                       at android.app.ActivityThread.-wrap11(Unknown Source:0)
                                                       at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1593)
                                                       at android.os.Handler.dispatchMessage(Handler.java:105)
                                                       at android.os.Looper.loop(Looper.java:164)
                                                       at android.app.ActivityThread.main(ActivityThread.java:6541)
                                                       at java.lang.reflect.Method.invoke(Native Method)
                                                       at com.android.internal.os.Zygote$MethodAndArgsCaller.run(Zygote.java:240)
                                                       at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:767)
                                                    Caused by: android.view.InflateException: Binary XML file line #14: Binary XML file line #14: Error inflating class com.example.aman.demo.MyEditText
                                                    Caused by: android.view.InflateException: Binary XML file line #14: Error inflating class com.example.aman.demo.MyEditText
                                                    Caused by: java.lang.NoSuchMethodException: <init> [class android.content.Context, interface android.util.AttributeSet]
                                                       at java.lang.Class.getConstructor0(Class.java:2320)
                                                       at java.lang.Class.getConstructor(Class.java:1725)
                                                       at android.view.LayoutInflater.createView(LayoutInflater.java:615)
                                                       at android.view.LayoutInflater.createViewFromTag(LayoutInflater.java:790)
                                                       at android.view.LayoutInflater.createViewFromTag(LayoutInflater.java:730)
                                                       at android.view.LayoutInflater.rInflate(LayoutInflater.java:863)
                                                       at android.view.LayoutInflater.rInflateChildren(LayoutInflater.java:824)
                                                       at android.view.LayoutInflater.rInflate(LayoutInflater.java:866)
                                                       at android.view.LayoutInflater.rInflateChildren(LayoutInflater.java:824)
                                                       at android.view.LayoutInflater.inflate(LayoutInflater.java:515)
                                                       at android.view.LayoutInflater.inflate(LayoutInflater.java:423)
                                                       at android.view.LayoutInflater.inflate(LayoutInflater.java:374)
                                                       at android.support.v7.app.AppCompatDelegateImplV9.setContentView(AppCompatDelegateImplV9.java:292)
                                                       at android.support.v7.app.AppCompatActivity.setContentView(AppCompatActivity.java:140)
                                                       at com.example.aman.demo.MainActivity.onCreate(MainActivity.java:18)
                                                       at android.app.Activity.performCreate(Activity.java:6975)
                                                       at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1213)
                                                       at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2770)
                                                       at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2892)
                                                       at android.app.ActivityThread.-wrap11(Unknown Source:0)
                                                       at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1593)
                                                       at android.os.Handler.dispatchMessage(Handler.java:105)
                                                       at android.os.Looper.loop(Looper.java:164)
                                                       at android.app.ActivityThread.main(ActivityThread.java:6541)
                                                       at java.lang.reflect.Method.invoke(Native Method)
                                                       at com.android.internal.os.Zygote$MethodAndArgsCaller.run(Zygote.java:240)
                                                       at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:767)

Answer 1

custom EditText xml:

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scrollbars="vertical|horizontal"
    android:fillViewport="true"
    tools:context="com.wade.webview.HtmlEditActivity">
    <com.wade.webview.LineNumberEditText
        android:id="@+id/lineNumberEditText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        ***android:paddingLeft="100px"***
        android:gravity="top|left"
        ***android:scrollbars="vertical|horizontal"***
        android:text=""
        android:ellipsize="end"
        />
</ScrollView>

Custom EditText java package com.wade.webview;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.text.method.ScrollingMovementMethod;
import android.util.AttributeSet;

public class LineNumberEditText extends android.support.v7.widget.AppCompatEditText {
    private Rect rect;
    private Paint paint;
    final LineNumberEditText me;

    public LineNumberEditText(Context context, AttributeSet attrs) {
        super(context, attrs);
        me = this;
        rect = new Rect();
        paint = new Paint();
        paint.setStyle(Paint.Style.FILL);
        paint.setColor(Color.RED);
        paint.setTextSize(40);
        **setHorizontallyScrolling(true);
        setMovementMethod(new ScrollingMovementMethod());**
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        int baseline = getBaseline();
        for (int i = 0; i < getLineCount(); i++) {
            canvas.drawText(String.format("%04d:", (i+1)), rect.left, baseline, paint);
            baseline += getLineHeight();
        }
    }
}

Please refer to https://www.github.com/wade-fs/wade_webview

Answer 2

Replace this on your xml :

<android.support.v7.widget.AppCompatEditText

To this:

<your.package.MyEditText

Also add this parameters into your editext

 <your.package.MyEditText 
    android:inputType="textMultiLine"
     <!-- Multiline input -->
     android:lines="8"
     <!-- Total Lines prior display --> 
     android:minLines="6"
     <!-- Minimum lines --> 
    android:gravity="top|left" 
    <!-- Cursor Position -->
     android:maxLines="10" 
    <!-- Maximum Lines --> 
    android:layout_height="wrap_content" 
    <!-- Height determined by content --> 
    android:layout_width="match_parent"
     <!-- Fill entire width --> 
     android:scrollbars="vertical" 
    <!-- Vertical Scroll Bar --> />

Your crash is because you need the constructor from xml file, add this :

public MyEditText(Context context, AttributeSet attrs) {
    super(context,attrs);
    init();
}

public MyEditText(Context context) {
    super(context);
    init();
}

private void init(){

    rect = new Rect();
    paint = new Paint();
    paint.setStyle(Paint.Style.FILL);
    paint.setColor(Color.BLACK);
    paint.setTextSize(20);
}

Answer 3

In your layout XML, you not using the subclassed EditText you made, you need to declare it by replacing android.support.v7.widget.AppCompatEditText by your.package.declaration.MyEditText

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <ScrollView
        android:id="@+id/SCROLLER_ID"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:scrollbars="vertical"
        android:fillViewport="true">

        <your.package.declaration.MyEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Type here"
            android:inputType="textMultiLine"
            android:paddingLeft="16dp"
            android:paddingRight="16dp"
            android:paddingTop="16dp"
            android:paddingBottom="16dp"
            android:id="@+id/editor_area"
            android:backgroundTint="@android:color/transparent"
            />
    </ScrollView>
</LinearLayout>

If you want the "Type Here" to not be part of the text replace android:text by android:hint

Also, your MyEditText miss the constructor (Context, AttributeSet) that is necessary for inflation by XML, so add it to the class:

public MyEditText(Context context, AttributeSet attrs) {
    super(context, attrs);
    rect = new Rect();
    paint = new Paint();
    paint.setStyle(Paint.Style.FILL);
    paint.setColor(Color.BLACK);
    paint.setTextSize(20);
}

And one last note, call super.onDraw before drawing the numbers yourself.

The super implementation may draw the white background, erasing you numbers

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    int baseline = getBaseline();
    for (int i = 0; i < getLineCount(); i++) {
        canvas.drawText("" + (i+1), rect.left, baseline, paint);
        baseline += getLineHeight();
    }
}

The result is:

Unfortunately the drawing is join with the text, I would say to increase text paddiing but did not worked.