Draw line in Android Example


Introduction
          Many of our android applications essentially require 2D line to be drawn in different scenarios. Drawing line in android is quite a simple program. This can be done by drawing line directly into a canvas.  A Canvas works as a interface, to the actual surface upon which your graphics will be drawn,  it holds all of your "draw" calls. Via the Canvas, your drawing is actually performed upon an underlying Bitmap, which is placed into the window.

Step 1 : Create a Canvas
        If we need to create a new Canvas, then we must define the Bitmap upon which drawing will actually be performed. The Bitmap is always required for a Canvas. We can set up a new Canvas like this
Bitmap bitmap = Bitmap.createBitmap((int) getWindowManager()
        .getDefaultDisplay().getWidth(), (int) getWindowManager()
        .getDefaultDisplay().getHeight(), Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bitmap); 

Step 2: Use Paint class to draw line on canvas
         Next, we need to draw line on the canvas. Paint class holds the style and color information about how to draw geometries, text and bitmaps.

 Paint paint = new Paint();
 paint.setColor(Color.rgb(255, 153, 51));
 paint.setStrokeWidth(10);
    int startx = 50;
    int starty = 90;
    int endx = 150;
    int endy = 360;
 canvas.drawLine(startx, starty, endx, endy, paint);

Paint class can be used to draw line, we can also set properties to the line such as strokewidth, color etc., Lets try it out by drawing horizontal, vertical and diagonal lines.
This can be done by changing X and Y points as follows.

Horizontal Line
        Keep Start Y and End Y fixed, with varying X values, that will draw a horizontal line as follows.

int startx = 50;
int starty = 100;
int endx = 400;
int endy = 100;

Vertical Line
         Keep Start X and End Y fixed, with varying Y values, that will draw a vertical line as follows.

int startx = 100;
int starty = 50;
int endx = 100;
int endy = 400;

Diagonal Line
         Varying all values appropriately will draw a diagonal line as follows.

int startx = 50;
int starty = 90;
int endx = 150;
int endy = 360;


Thus we have drawn line in android canvas.. Hope this helps... !

activity_main.xml
<RelativeLayout 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:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <ImageView
        android:id="@+id/DrawingImageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />


</RelativeLayout>


MainActivity.java

import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.os.Bundle;
import android.widget.ImageView;

public class MainActivity extends Activity {
ImageView drawingImageView;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_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.rgb(255, 153, 51));
paint.setStrokeWidth(10);
int startx = 50;
int starty = 90;
int endx = 150;
int endy = 360;
canvas.drawLine(startx, starty, endx, endy, paint);

}

}








Reactions:

2 comments :

  1. How do I make this line to be a vertical line that always appears at the center of the screen??

    ReplyDelete
  2. how to draw line on user's click not giving by specific start and end point

    ReplyDelete