Android Paint Application

Posted By : Piyush Choudhary | 30-Jun-2017

1) Create XML and Activity file that enables to draw on canvas

 

activity_paint_panel.xml

...

<com.android.graphics.CanvasView
    android:id="@+id/paint_panel"
    android:layout_width="350"
    android:layout_height="350dp"
    android:layout_gravity="center_horizontal" />

...

 

PaintActivity.java

...

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

import com.android.graphics.CanvasView;

public class PaintActivity extends AppCompatActivity {

    private CanvasView canvas = null;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_draw);

        this.paint_panel = (CanvasView)this.findViewById(R.id.paint_panel);
    }

...


}


How to use tools

Undo,Redo,Clear

this.canvas.clear();  // Clear canvas
this.canvas.redo();   // Redo
this.canvas.undo();   // Undo

Mode : - Mode for the drawing

// Setting mode for the canvas 

this.canvas.setMode(CanvasView.Mode.DRAW);    // for drawing
this.canvas.setMode(CanvasView.Mode.TEXT);    // for drawing Text
this.canvas.setMode(CanvasView.Mode.ERASER);  // for using Eraser

// Getting mode set for the current canvas

CanvasView.Mode mode = this.canvas.getMode();

Drawer: Tool used to draw figures .

// Setting the tool for the canvas 

this.canvas.setDrawer(CanvasView.Drawer.PEN);               // Use Pen Tool
this.canvas.setDrawer(CanvasView.Drawer.LINE);              // Drawing Line
this.canvas.setDrawer(CanvasView.Drawer.CIRCLE);            // Drawing Circle
this.canvas.setDrawer(CanvasView.Drawer.RECTANGLE);         // Drawing Rectangle
this.canvas.setDrawer(CanvasView.Drawer.ELLIPSE);           // Drawing Ellipse (Oval)
this.canvas.setDrawer(CanvasView.Drawer.QUADRATIC_BEZIER);  // Drawing Quadratic Bezier

// Getting the current tool set for the canvas

CanvasView.Drawer drawer = this.canvas.getDrawer();

 

Background color - To set the color of the paint panel or surface on which user is drawing 

// Setting the base color
this.canvas.setBaseColor(Color.TRANSPARENT);

// Getting the base color 
int backgroundColor = this.canvas.getBaseColor();


Stroke Style - To set the stroke style for the canvas

// Setting the stroke style

this.canvas.setPaintStyle(Paint.Style.STROKE);
this.canvas.setPaintStyle(Paint.Style.FILL);
this.canvas.setPaintStyle(Paint.Style.FILL_AND_STROKE);

// Getting the current set stroke style for the canvas

Paint.Style strokeStyle = this.canvas.getPaintStyle();


Stroke Color

// Setter
this.canvas.setPaintStrokeColor(Color.RED);

// Getter
int color = this.canvas.getPaintStrokeColor();

 

Stroke Width - To set the thickness of the current drawn path

// Setting the width for the path
this.canvas.setPaintStrokeWidth(2F);

// Getting the width of the path
float strokeWidth = this.canvas.getPaintStrokeWidth();

 

(Opacity) Alpha - To set the opacity of the drawn path

// Setting the opacity

this.canvas.setOpacity(150);  //  0 >> and << 255

// Getting the current set opactity

int opacity = this.canvas.getOpacity();

 

Blur - To blur the canvas

// Setting the intensity of blur
this.canvas.setBlur(6F);  // intensity >= 0

// Getting the intensity of blur
float blur = this.canvas.getBlur();

 

Line Cap

// Setting the line cap

this.canvas.setLineCap(Paint.Cap.BUTT);
this.canvas.setLineCap(Paint.Cap.ROUND);
this.canvas.setLineCap(Paint.Cap.SQUARE);

// getting the line cap

Paint.Cap lineCap = this.canvas.getLineCap();


Draw Text

// Change Mode
this.canvas.setMode(CanvasView.Mode.TEXT);

// Setting the text of canvas
this.canvas.setText("Canvas View");

// Getting the text from canvas
String text = this.canvas.getText();

 

Set Font Family or Font Size

// Setting the font family or size

this.canvas.setFontFamily(Typeface.DEFAULT);
this.canvas.setFontFamily(Typeface.SERIF);
this.canvas.setFontFamily(Typeface.DEFAULT_BOLD);
this.canvas.setFontFamily(Typeface.MONOSPACE);
this.canvas.setFontFamily(Typeface.SANS_SERIF);
this.canvas.setFontSize(24F);  // greater than or equal to 0

// Getting the font family or size

Typeface fontFamily = this.canvas.getFontFamily();
float fontSize      = this.canvas.getFontSize();

 

To get the canvas as a bitmap

If the app requires to save the current canvas as Bitmap use the below method save the canvas

Bitmap bitmap = this.canvas.getBitmap();

To adjust the size of bitmap,

Bitmap bitmap = this.canvas.getScaleBitmap(400, 300);  // 400 x 300

 

To make byte array of the bitmap,

// specify format.
// specify its quality.

byte[] bytes = this.canvas.getBitmapAsByteArray(CompressFormat.PNG, 100);
or,

// Format od the bitmap is PNG. Quality of the bitmap is 100.

byte[] bytes = this.canvas.getBitmapAsByteArray();

 

To use a specific bitmap,

// ...

byte[] bytes = CanvasView.getBitmapAsByteArray(bitmap, CompressFormat.PNG, 100);


Draw Bitmap to Canvas : To draw from a Bitmap,

// ...

this.canvas.drawBitmap(bitmap);

To draw from byte array of bitmap

// ...

this.canvas.drawBitmap(bytes);

 

Note : - Use the given CanvasView.java class within Project to use in layout class "activity_paint_panel.xml" and Activity class "PaintActivity.java "

https://github.com/piyushoodles/PaintApplication/blob/master/CanvasView.java

Credit goes to : https://github.com/Korilakkuma/CanvasView

About Author

Author Image
Piyush Choudhary

Piyush is a bright mobile app developer, he has expertise in building Native Android Applications and Core Java.His hobbies are reading tehnical blogs, playing snooker and console gaming.

Request for Proposal

Name is required

Comment is required

Sending message..