Draw in Canvas with Android Graphics

Create Project

Create new project in Android Studio with steps as below:

Step 1: Input Project Name and Select Project Location

Step 2: Select SDK for Android App

Step 3: Select Default Activity for App

Step 4: Finish create project

Add Strings

Open res\values\strings.xml file and add new string as below:

<resources>
    <string name="app_name">Learn Android with Real Apps</string>
    <string name="draw_line">Draw Line</string>
    <string name="draw_rectangle">Draw Rectangle</string>
    <string name="draw_circle">Draw Circle</string>
    <string name="draw_text">Draw Text</string>
    <string name="draw_image">Draw Image</string>
</resources>

Create Menu XML

Create menu folder in res folder. Create main.xml file contains menus as below:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/drawLine"
        android:title="@string/draw_line"></item>

    <item
        android:id="@+id/drawRectangle"
        android:title="@string/draw_rectangle"></item>

    <item
        android:id="@+id/drawCircle"
        android:title="@string/draw_circle"></item>

    <item
        android:id="@+id/drawText"
        android:title="@string/draw_text"></item>

    <item
        android:id="@+id/drawImage"
        android:title="@string/draw_image"></item>

</menu>

Draw Line

Create new java class named DrawLine.java in android.demo.learnandroidwithrealapps package as below:

package android.demo.learnandroidwithrealapps;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.PorterDuff;
import android.view.View;

public class DrawLine extends View {

    Paint paint = new Paint();

    public DrawLine(Context context) {
        super(context);
    }

    @Override
    public void onDraw(Canvas canvas) {
        // Clear Canvas
        canvas.drawColor(Color.WHITE, PorterDuff.Mode.MULTIPLY);

        // Draw Line
        paint.setColor(Color.RED);
        paint.setStrokeWidth(20);
        canvas.drawLine(50, 100, 600, 600, paint);
        canvas.drawLine(50, 550, 770, 0, paint);
    }

}

Draw DrawRectangle

Create new java class named DrawRectangle.java in android.demo.learnandroidwithrealapps package as below:

package android.demo.learnandroidwithrealapps;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.PorterDuff;
import android.view.View;

public class DrawRectangle extends View {

    Paint paint = new Paint();

    public DrawRectangle(Context context) {
        super(context);
    }

    @Override
    public void onDraw(Canvas canvas) {
        // Clear Canvas
        canvas.drawColor(Color.WHITE, PorterDuff.Mode.MULTIPLY);

        // Draw Rectangle
        paint.setColor(Color.RED);
        paint.setStrokeWidth(5);
        canvas.drawRect(30, 30, 500, 200, paint);
    }

}

Draw DrawCircle

Create new java class named DrawCircle.java in android.demo.learnandroidwithrealapps package as below:

package android.demo.learnandroidwithrealapps;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.PorterDuff;
import android.view.View;

public class DrawCircle extends View {

    Paint paint = new Paint();

    public DrawCircle(Context context) {
        super(context);
    }

    @Override
    public void onDraw(Canvas canvas) {
        // Clear Canvas
        canvas.drawColor(Color.WHITE, PorterDuff.Mode.MULTIPLY);

        // Draw Circle
        paint.setColor(Color.RED);
        paint.setStrokeWidth(5);
        canvas.drawCircle(200, 200, 150, paint);
    }

}

Draw DrawText

Create new java class named DrawText.java in android.demo.learnandroidwithrealapps package as below:

package android.demo.learnandroidwithrealapps;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.PorterDuff;
import android.view.View;

public class DrawText extends View {

    Paint paint = new Paint();

    public DrawText(Context context) {
        super(context);
    }

    @Override
    public void onDraw(Canvas canvas) {
        // Clear Canvas
        canvas.drawColor(Color.WHITE, PorterDuff.Mode.MULTIPLY);

        // Draw Circle
        paint.setColor(Color.RED);
        paint.setTextSize(50);
        canvas.drawText("PMK Lab", 10, 100, paint);
    }

}

Draw Image

Copy images need use to res/drawable folder. Create new java class named DrawImage.java in android.demo.learnandroidwithrealapps package as below:

package android.demo.learnandroidwithrealapps;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.PorterDuff;
import android.view.View;

public class DrawImage extends View {

    Paint paint = new Paint();

    public DrawImage(Context context) {
        super(context);
    }

    @Override
    public void onDraw(Canvas canvas) {
        // Clear Canvas
        canvas.drawColor(Color.WHITE, PorterDuff.Mode.MULTIPLY);

        // Draw Circle
        Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.thumb3);
        paint.setColor(Color.RED);
        canvas.drawBitmap(bitmap, 100, 100, paint);
    }

}

Main Activity Layout

Open res\layout\activity_main.xml file and create layout as below:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#ffffff"
    android:orientation="vertical"
    tools:ignore="HardcodedText" >

</LinearLayout>

Main Activity Class

Add code to MainActivity.java in android.demo.learnandroidwithrealapps package as below:

package android.demo.learnandroidwithrealapps;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.Menu;
import android.view.MenuInflater;
import android.view.MenuItem;

public class MainActivity extends AppCompatActivity {

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

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        MenuInflater inflater = getMenuInflater();
        inflater.inflate(R.menu.main, menu);
        return super.onCreateOptionsMenu(menu);
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        if (item.getItemId() == R.id.drawLine) {
            drawLine();
        } else if(item.getItemId() == R.id.drawRectangle) {
            drawRectangle();
        } else if(item.getItemId() == R.id.drawCircle) {
            drawCircle();
        } else if(item.getItemId() == R.id.drawText) {
            drawText();
        } else if(item.getItemId() == R.id.drawImage) {
            drawImage();
        }
        return super.onOptionsItemSelected(item);
    }

    private void drawImage() {
        DrawImage drawImage = new DrawImage(this);
        setContentView(drawImage);
    }

    private void drawText() {
        DrawText drawText = new DrawText(this);
        setContentView(drawText);
    }

    private void drawCircle() {
        DrawCircle drawCircle = new DrawCircle(this);
        setContentView(drawCircle);
    }

    private void drawRectangle() {
        DrawRectangle drawRectangle = new DrawRectangle(this);
        setContentView(drawRectangle);
    }

    private void drawLine() {
        DrawLine drawLine = new DrawLine(this);
        setContentView(drawLine);
    }

}

Structure of Project

Run App

Load Main Activity

Draw Line

Draw Rectangle

Draw Circle

Draw Text

Draw Image