How to add pagelines to a EditText in android? - android

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.

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);
}
}

#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();
}
}

#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);
}

Related

Get reference in java code to change text color and background color of custom edit text

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(Color.BLACK); //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);
}
**Im using this class for custom edit text and i am able to change properties in xml but im not getiing a reference to this custom edittext. How can I get reference to this edit text properly in java? my xml look like this **
<com.example.goh2.pronoornotepad.LinedEditText
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:textColor="#ffff1904"
android:background="#ffffcc4b"
android:gravity="top|left"
android:singleLine="false"
android:id="#+id/et_textEditor"
android:text=""
/>
Did you try this?
LinedEditText myview = (LinedEditText) findViewById(R.id.et_textEditor);
If that doesn't work then it's usually an issue of xml hierarchy. Check this post: How to pass view reference to android custom view?

Create horizontal lines in multi line edittext

I want to create horizontal lines in the edittext. I looked online and found this class. How do I call this class in my activity where edittext et1 is?
Thanks
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);
}
}
You need to replace your EditText with the custom view from that class, being LinedEditText. You are not modifying an existing EditText you are replacing it with a new instance of a class that extends the EditText class.
If you have an EditText defined in an xml file, you'd first need to replace it with a the new one. To do this, change it to use <com.example.customviews.LinedEditText replacing the first part with your package name.
In the Java part, simply change the instance to LinedEditText and the cast too ie (LinedEditText)findViewById(R.id.edit1)

Aligning custom view to screen bottom

I have created my own view. It is a semicircle. I want it to align it to the bottom of the screen. Since, I drew it using drawArc, it does not align to the bottom. I have tried the alternative of setting a circle with center's y co-ordinate co-incident with screen bottom co-ordinate. I do not wish to use it as I wish to implement some additional things to it. Here is my code for custom view.
package legacy_systems.customview;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.View;
public class CircleView extends View{
private Paint markerPaint;
private Paint textPaint;
private Paint circlePaint;
private int textHeight;
public CircleView(Context context)
{
super(context);
initCircleView();
}
public CircleView(Context context, AttributeSet attrs)
{
super(context, attrs);
initCircleView();
}
public CircleView(Context context, AttributeSet attrs, int defaultStyle)
{
super(context, attrs, defaultStyle);
initCircleView();
}
protected void initCircleView()
{
setFocusable(true);
circlePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
circlePaint.setColor(getResources().getColor(android.R.color.black));
circlePaint.setStrokeWidth(3);
circlePaint.setStyle(Paint.Style.STROKE);
markerPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
markerPaint.setColor(getResources().getColor(android.R.color.darker_gray));
}
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
{
int measuredWidth = measure(widthMeasureSpec);
int measuredHeight = measure(heightMeasureSpec);
int d = Math.min(measuredWidth, measuredHeight);
setMeasuredDimension(d,d);
}
#Override
protected void onDraw(Canvas canvas) {
// TODO Auto-generated method stub
int px, py;
px = getMeasuredWidth()/2;
py = getMeasuredHeight()/2;
int radius = Math.min(px, py);
RectF oval = new RectF();
oval.set(px-radius, py-radius, px+radius, py+radius);
canvas.drawArc(oval,180,180,false, circlePaint);
//canvas.drawCircle(px, py, radius, circlePaint);
canvas.save();
}
private int measure(int measureSpec)
{
int result = 0;
int specMode = MeasureSpec.getMode(measureSpec);
int specSize = MeasureSpec.getSize(measureSpec);
if(specMode == MeasureSpec.UNSPECIFIED)
{
result = 200;
}
else
{
result = specSize;
}
return result;
}
}
I want to align the semi-circle to bottom of screen. Any ideas how I can do it ?
First of all, thanks all of you for your answers. Your answer is partially correct. Yes, with
android:layout_alignParentBottom="true"
would do the half trick. Suppose I have a circle to draw. In custom view, (0,0) represents the heightest leftmost co-ordinate of the view, not of the screen. And suppose one wants to half circle to be located at thebottom of screen just as I wanted to do, co-ordinate guessing turns out to be a problem. Here is how I actually solved it.
px = getMeasuredWidth()/2;
py = getMeasuredHeight();
canvas.drawCircle(px, py, radius, paint);
Here, px would be the centre of whole width of view, midpoint of view width and py would be the last screen y axis co-ordinate assigned to view.
Hope it helps somebody else too.
You can try to use the:
android:gravity="bottom"
or
android:layout_gravity="bottom"
property.
Make sure that the screen on which you want to put/add it is a RelativeLayout.
Do this in the layout
<legacy_systems.customview.CircleView
android:id="#+id/myview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentBottom="true"/>
In your onCreate() method
CircleView view = (CircleView) findViewById(R.id.myview);

How do I create horizontal lines in multiline edittext on each line using xml? [duplicate]

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);
}
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
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);
}
}
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.
<com.example.goh2.pronoornotepad.LinedEditText
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#ffffcc4b"
android:gravity="top|left"
android:singleLine="false"
android:text=""
/>
The above XML works with the code from Max4ever's answer:
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);
}
}

How to create lines in a textview?

I am creating a textview which looks similar to a page of notebook.So how could I create Lines in a textview? Someone could help??
You can use the notepad example but specifically look at the the NoteEditor.java the LineEditText class
public static 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.STROKE);
mPaint.setColor(0x800000FF);
}
#Override
protected void onDraw(Canvas canvas) {
int count = getLineCount();
Rect r = mRect;
Paint paint = mPaint;
for (int i = 0; i < count; i++) {
int baseline = getLineBounds(i, r);
canvas.drawLine(r.left, baseline + 1, r.right, baseline + 1, paint);
}
super.onDraw(canvas);
}
}

Categories

Resources