Can anybody tell how to draw a line in Android, perhaps with an example?
16 Answers
If you want to have a simple Line in your Layout to separate two views you can use a generic View with the height and width you want the line to have and a set background color.
With this approach you don't need to override a View or use a Canvas yourself just simple and clean add the line in xml.
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="@android:color/black" />
The example code I provided will generate a line that fills the screen in width and has a height of one dp.
If you have problems with the drawing of the line on small screens consider to change the height of the line to px. The problem is that on a ldpi screen the line will be 0.75 pixel high. Sometimes this may result in a rounding that makes the line vanish. If this is a problem for your layout define the width of the line a ressource file and create a separate ressource file for small screens that sets the value to 1px instead of 1dp.
This approach is only usable if you want horizontal or vertical lines that are used to divide layout elements. If you want to achieve something like a cross that is drawn into an image my approach will not work.
-
How can add the same view at runtime that's dynamically? Commented Dec 20, 2011 at 10:38
-
Lakshmanan, give it an id, and set its visibility to View.GONE or VISIBLE at run-time– HatimCommented Jan 16, 2017 at 11:15
-
A cross can also be made with this solution, just add "rotation" attribute in it as per the cross you want and use two views.– Arpit J.Commented May 27, 2020 at 12:08
This one draws 2 lines which form a cross on the top left of the screen:
DrawView.java
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.view.View;
public class DrawView extends View {
Paint paint = new Paint();
private void init() {
paint.setColor(Color.BLACK);
}
public DrawView(Context context) {
super(context);
init();
}
public DrawView(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public DrawView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init();
}
@Override
public void onDraw(Canvas canvas) {
canvas.drawLine(0, 0, 20, 20, paint);
canvas.drawLine(20, 0, 0, 20, paint);
}
}
The activity to start it:
StartDraw.java
import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
public class StartDraw extends Activity {
DrawView drawView;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
drawView = new DrawView(this);
drawView.setBackgroundColor(Color.WHITE);
setContentView(drawView);
}
}
-
3if i want add a line in some other activity like R.layout.main How can i add?– mohanCommented Sep 1, 2010 at 13:42
-
1the layout of your activity has to contain a View object - then it's no problem. You just need a View object to draw on– DonGruCommented Sep 1, 2010 at 13:58
-
1I want to draw a straight line how can i give the value startx start y stopx stopy?– mohanCommented Sep 6, 2010 at 7:17
-
actually you can find that in the android developer reference, drawLine() has the following arguments: drawLine(float startX, float startY, float stopX, float stopY, Paint paint)– DonGruCommented Sep 6, 2010 at 8:51
-
I draw line on the background using this method. I want to erase a drawn line. Any suggestions for me. Can you suggest me? Commented May 6, 2019 at 4:11
There are two main ways you can draw a line, by using a Canvas
or by using a View
.
Drawing a Line with Canvas
From the documentation we see that we need to use the following method:
drawLine (float startX, float startY, float stopX, float stopY, Paint paint)
Here is a picture:
The Paint
object just tells Canvas
what color to paint the line, how wide it should be, and so on.
Here is some sample code:
private Paint paint = new Paint();
....
private void init() {
paint.setColor(Color.BLACK);
paint.setStrokeWidth(1f);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
startX = 20;
startY = 100;
stopX = 140;
stopY = 30;
canvas.drawLine(startX, startY, stopX, stopY, paint);
}
Drawing a Line with View
If you only need a straight horizontal or vertical line, then the easiest way may be to just use a View
in your xml layout file. You would do something like this:
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="@android:color/black" />
Here is a picture with two lines (one horizontal and one vertical) to show what it would look like:
And here is the complete xml layout for that:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp"
android:text="TextView1 in vertical linear layout" />
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="@android:color/black" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp"
android:text="TextView2 in vertical linear layout" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TextView
android:layout_width="100dp"
android:layout_height="100dp"
android:padding="10dp"
android:text="TextView3 in horizontal linear layout" />
<View
android:layout_width="1dp"
android:layout_height="match_parent"
android:background="@android:color/black" />
<TextView
android:layout_width="100dp"
android:layout_height="100dp"
android:padding="10dp"
android:text="TextView4 in horizontal linear layout" />
</LinearLayout>
</LinearLayout>
-
1you are a genius bro... I have been trying to figure out how they get the coordinates while drawing a view using paint...but the picture that you've posted helped me to understand it pretty much.... Is there any online tool to simulate such graph so i use it while coding?– user3600801Commented Nov 19, 2016 at 11:33
-
is it possible to get a callback to know that the view has been finished drawing– user3600801Commented Nov 19, 2016 at 12:38
-
Im trying to draw two different lines. Once if the first line has been drawn, i have to draw the second...– user3600801Commented Nov 19, 2016 at 13:19
-
-
1@tientuyen07, If you are using
onDraw()
then surround your drawing code withif (someCondition) { draw... }
, makesomeCondition = false
, and then callinvalidate()
on your view. It will redraw the view without the line.– SuragchCommented May 6, 2019 at 15:33
You can draw multiple straight lines on view using Finger paint example which is in Developer android. example link
Just comment: mPath.quadTo(mX, mY, (x + mX)/2, (y + mY)/2);
You will be able to draw straight lines.
import android.app.Activity;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.Point;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;
import android.widget.ImageView;
public class JoinPointsActivity extends Activity {
/** Called when the activity is first created. */
Paint mPaint;
float Mx1,My1;
float x,y;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// setContentView(R.layout.main);
MyView view1 =new MyView(this);
view1.setBackgroundResource(R.drawable.image_0031_layer_1);
setContentView(view1);
mPaint = new Paint();
mPaint.setAntiAlias(true);
mPaint.setDither(true);
mPaint.setColor(0xFFFF0000);
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setStrokeJoin(Paint.Join.ROUND);
// mPaint.setStrokeCap(Paint.Cap.ROUND);
mPaint.setStrokeWidth(10);
}
public class MyView extends View {
private static final float MINP = 0.25f;
private static final float MAXP = 0.75f;
private Bitmap mBitmap;
private Canvas mCanvas;
private Path mPath;
private Paint mBitmapPaint;
public MyView(Context c) {
super(c);
mPath = new Path();
mBitmapPaint = new Paint(Paint.DITHER_FLAG);
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
mBitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
mCanvas = new Canvas(mBitmap);
}
@Override
protected void onDraw(Canvas canvas) {
canvas.drawColor(0xFFAAAAAA);
// canvas.drawLine(mX, mY, Mx1, My1, mPaint);
// canvas.drawLine(mX, mY, x, y, mPaint);
canvas.drawBitmap(mBitmap, 0, 0, mBitmapPaint);
canvas.drawPath(mPath, mPaint);
}
private float mX, mY;
private static final float TOUCH_TOLERANCE = 4;
private void touch_start(float x, float y) {
mPath.reset();
mPath.moveTo(x, y);
mX = x;
mY = y;
}
private void touch_move(float x, float y) {
float dx = Math.abs(x - mX);
float dy = Math.abs(y - mY);
if (dx >= TOUCH_TOLERANCE || dy >= TOUCH_TOLERANCE) {
// mPath.quadTo(mX, mY, (x + mX)/2, (y + mY)/2);
mX = x;
mY = y;
}
}
private void touch_up() {
mPath.lineTo(mX, mY);
// commit the path to our offscreen
mCanvas.drawPath(mPath, mPaint);
// kill this so we don't double draw
mPath.reset();
}
@Override
public boolean onTouchEvent(MotionEvent event) {
float x = event.getX();
float y = event.getY();
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
touch_start(x, y);
invalidate();
break;
case MotionEvent.ACTION_MOVE:
touch_move(x, y);
invalidate();
break;
case MotionEvent.ACTION_UP:
touch_up();
// Mx1=(int) event.getX();
// My1= (int) event.getY();
invalidate();
break;
}
return true;
}
}
}
-
2Can Someone help me how can i see my xml elements on my view which are on relative layout?? u can just go through the above example and suggest me.– HemaCommented Feb 21, 2012 at 6:21
package com.example.helloandroid;
import android.app.Activity;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.os.Bundle;
import android.view.View;
public class HelloAndroid2Activity extends Activity {
/** Called when the activity is first created. */
DrawView drawView;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
drawView = new DrawView(this);
drawView.setBackgroundColor(Color.WHITE);
setContentView(drawView);
}
class DrawView extends View {
Paint paint = new Paint();
public DrawView(Context context) {
super(context);
paint.setColor(Color.BLUE);
}
@Override
public void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawLine(10, 20, 30, 40, paint);
canvas.drawLine(20, 10, 50, 20, paint);
}
}
}
Simple one
<TextView
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#c0c0c0"
android:id="@+id/your_id"
android:layout_marginTop="160dp" />
for horizontal line on the layout :
<View
android:id="@+id/View03"
android:layout_width="fill_parent"
android:layout_height="5dip"
android:background="#0f0" />
for vertical line on the layout :
<View
android:id="@+id/View04"
android:layout_width="5dip"
android:layout_height="fill_parent"
android:background="#0f0" />
-
they are both same. what makes the difference between vertical and horizontal? Commented Jul 20, 2014 at 1:47
-
@ Burhan ARAS-they are not same as width and height are changed in two views.it draws only vertical and horz line.– MohanrajCommented Jul 24, 2014 at 6:06
canvas.drawLine(10, 10, 90, 10, paint);
canvas.drawLine(10, 20, 90, 20, paint);
This will create a straight horizontal line, hope it helps!.
You can make a drawable like circle, line, rectangle etc through shapes in xml as follow:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="line" >
<solid android:color="#00000000" />
<stroke
android:width="2dp"
android:color="#808080" />
</shape>
this code adds horizontal line to a linear layout
View view = new View(this);
LinearLayout.LayoutParams lpView = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, 1); // --> horizontal
view.setLayoutParams(lpView);
view.setBackgroundColor(Color.DKGRAY);
linearLayout.addView(view);
If you're working with ConstraintLayout
you need to define at least 2 constraints for the line to show up. Like this:
<View
android:layout_width="0dp"
android:layout_height="1dp"
android:background="@android:color/black"
app:layout_constraintEnd_toEndOf="@+id/someView1"
app:layout_constraintStart_toStartOf="@+id/someView2"
app:layout_constraintTop_toBottomOf="@+id/someView3" />
Though I defined 3 constraints.
If anyone can benefit from a simplified solution:
Point class not needed. Directly in MotionEvent.ACTION_MOVE move to the start X and Y coordinates that you get from MotionEvent.ACTION_DOWN. This method works better since we use drawPath instead of drawLine, which is less computationally intensive and therefore performs better.
class DrawingView(context: Context,
attributeSet: AttributeSet): View(context, attributeSet) {
private val mPaint = Paint()
private var mPath = Path()
var startX = 0f
var startY = 0f
var endX = 0f
var endY = 0f
init {
mPaint.color = Color.GREEN
mPaint.style = Paint.Style.STROKE
mPaint.strokeJoin = Paint.Join.ROUND
mPaint.strokeCap = Paint.Cap.ROUND
mPaint.strokeWidth = 50f
}
override fun onDraw(canvas: Canvas) {
super.onDraw(canvas)
canvas.drawPath(mPath, mPaint)
}
override fun onTouchEvent(event: MotionEvent): Boolean {
when (event.action) {
MotionEvent.ACTION_DOWN -> {
startX = event.x
startY = event.y
invalidate()
}
MotionEvent.ACTION_MOVE -> {
endX = event.x
endY = event.y
val path = Path()
path.moveTo(startX, startY) <- // Important!
path.lineTo(endX, endY)
mPath = path
invalidate()
}
}
return true
}
}
final SurfaceView surf = (SurfaceView)findViewById(R.id.surface_home);
surf.setOnTouchListener( new SurfaceView.OnTouchListener(){
private boolean moving = false;//stupid state
public boolean onTouch(View v, MotionEvent event) {
switch( event.getAction() ){
case MotionEvent.ACTION_DOWN:
final int x = (int)event.getX();
final int y = (int)event.getY();
final Rect bounds = mTiles.getBounds();
moving = bounds.intersects(x, y, x+1, y+1);
return true;
case MotionEvent.ACTION_MOVE:
if( moving ){
final int x_new = (int)event.getX();
final int y_new = (int)event.getY();
mDrawTiles.draw( new DrawLogic(){
public void draw(Rect _surface) {
mTiles.setBounds(
x_new - mDrawWidth/2,
y_new - mDrawHeight/2,
x_new + mDrawWidth/2,
y_new + mDrawHeight/2);
}
});
To improve on the answers provided by @Janusz
I added this to my styles:
<style name="Divider">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">1dp</item>
<item name="android:background">?android:attr/listDivider</item>
</style>
Then in my layouts is less code and simpler to read.
<View style="@style/Divider"/>
if you want to do horizontal line spacing then do the above.
And for vertical line between two Views you have to replace android:layout_width parameters(attributes) with android:layout_height
Another approach to draw a line programatically using ImageView
import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.Typeface;
import android.os.Bundle;
import android.widget.ImageView;
public class Test extends Activity {
ImageView drawingImageView;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
drawingImageView = (ImageView) this.findViewById(R.id.DrawingImageView);
Bitmap bitmap = Bitmap.createBitmap((int) getWindowManager()
.getDefaultDisplay().getWidth(), (int) getWindowManager()
.getDefaultDisplay().getHeight(), Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bitmap);
drawingImageView.setImageBitmap(bitmap);
// Line
Paint paint = new Paint();
paint.setColor(Color.GREEN);
paint.setStrokeWidth(10);
int startx = 50;
int starty = 100;
int endx = 150;
int endy = 210;
canvas.drawLine(startx, starty, endx, endy, paint);
}
}
or if you just want a line
TextView line = new TextView(this);
line.setBackgroundResource(android.R.color.holo_red_dark);
line.setHeight((int) Utility.convertDpToPixel(1,this));