Android Tutorials 2022 - Canvas Paint Example

Develop Android Apps, how to code a Hyperlink

New Tutorial 2022

Android - Canvas Paint Example

Added April 2022

For this tutorial, we are going to learn about Canvas Paint, and create an app which shows the basics of implementing a canvas onto your screen.

We are going to create a new app for this tutorial, and name is - Canvas Paint

Android Tutorial,

Creating Our New App

Open AIDE, Select New Project, from the left menu, or center menu hierachy of files; and do the following:

Select
Create an Android app, choose java xml programming language

Create an Android app, choose java xml programming language

choose NEW ANDROID APP(Gradle/Android SDK/java/xml) if your using the newest version of AIDE.

Choose HELLO WORLD example app template(java/xml);if your using an older version of AIDE,

For app name; type 'Canvas Paint'

For app package name type: com.aac.canvaspaint_example

Click Create

Your new app is now created for you - named 'Canvas Paint'. For now, you will have the 'little green Android image' as your app icon.
Once you add your apps' icon image and run your app with the updated and new pages you create, and the apps' other images; you'll see the customized 'App Icon' instead of little green Android icon. Note: Not all tutorials have a customized icon or require new pages to be created.

AIDE automatically opens your new app in the editor for you.

Where Code is Coded

For this tutorial , we must edit the main.xml, and edit the MainActivity.java, aka, our java class. And, add our app icon image to the res/drawable-hdpi folder. You can use any image you want for the apps' icon. For this app I took a screenshot of the app homepage and used that as the app icon.

First we add our LinearLayout to the layout at main.xml; and add code as shown in this image.
All codes for this tutorial are at the Example Code section on this page.
image of layout for android canvas paint

image of layout for android canvas paint

Next we edit our java page; MainActivity.java. In our java page; we add all the code to create the canvas. Then once we run our code the canvas paint is shown on the app homepage; aka main.xml. The code has notations to describe what each does. Basically we choose which shapes to add, include the code for them, and then add the colors by adding the color numbers.

We edit our java page and add the code as shown in this image.
Image of Code at MainActivity.java image of java class for android

We must also add the proper 'import statements' as shown in this next image. If we do not, or add the wrong ones, the app won't function, and you get error messages when you Run the app code.
import statements for canvas paint android example

import statements for canvas paint android example

Take note, we must add import statements for Bitmap, Paint, Color, Canvas, and Context.
In java code, we first must create and name variable; 'Demoview', then we attach it to our 'SetContentView' method.

All code for this tutorial is at the Example Code section on this page. Only copy and replace code for the pages mentioned that require updating.
At Example Code section on this page; any page notated as 'no edit required', means you don't have to copy and paste that page - added only for you to view it.

TIPS

Navigating The App Project Hierachy

To view A FILE do either: from right menu choose FILES or GOTO, this will show the apps files along the top of editor, dropdown, and left side menu. After editing a file, SAVE it, right side menu, choose SAVE.

Creating Pages

Check for the filename extensions of page your creating. If for example, your creating a new Java page, (java folder)you want to see pages already created in that folder that have the .java file extension. Click 'create new java class' to create your page.

For xml files, you must create these in the 'res/layout' folder of your app project. Click 'add new xml file', to create your page.

Additional Reading on Canvas Paint, at Android Developer website
Graphics - Canvas Paint

In Summary,
App Name is 'Canvas Paint' - located at AppProjects/CanvasPaint in AIDE; OPEN the AIDE app, then open App Projects, THEN select the 'Canvas Paint', app from your files hierachy(left menu); then DOUBLE CLICK on any file from the app, like strings.xml, to open it in AIDE.

Make sure at top of page, the app name 'CanvasPaint' is there next to AppProjects like so: AppProjects/CanvasPaint, then you know you have the proper App.

Once a file is in the editor, you can edit, save it, then RUN your APP, install, to Open your app.

You can open the app Simply by Clicking on the Android little green App Icon(or included app icon at Example Code),with the wording 'Canvas Paint' on your device. It will be with your other installed apps.

If you make further changes to this App, you need to SAVE, RUN, UPDATE, INSTALL, OPEN the app again.

EXAMPLE CODE - Code For This Tutorial.

JUST copy the code for this tutorial from the Example Code in this section.

Example Code:
Copy Paste the Code

build.gradle No Edit Required

apply plugin: 'com.android.application'

android {
    compileSdkVersion 21
    buildToolsVersion "21.1.0"

defaultConfig {
        applicationId "com.aac.canvaspaint_example"
        minSdkVersion 14
        targetSdkVersion 28
        versionCode 1
        versionName "1.0"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
}
___________

AndroidManifest.xml No Edit Required

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

</manifest>
___________

main.xml

<LinearLayout 
	xmlns:android="http://schemas.android.com/apk/res/android"  
	xmlns:tools="http://schemas.android.com/tools"  
	android:layout_width="wrap_content"  
	android:layout_height="wrap_content" 
	tools:context=".MainActivity" >  
	
</LinearLayout>  
    
	______________
	
	MainActivity.java
	
	package com.aac.canvaspaint_example;

import android.os.Bundle;  
import android.app.Activity;  
import android.content.Context;  
import android.graphics.Canvas;  
import android.graphics.Color;  
import android.graphics.Paint;  
import android.view.View;  
import android.graphics.Bitmap;

public class MainActivity extends Activity {

DemoView demoview;

@Override  
    public void onCreate(Bundle savedInstanceState) {  
        super.onCreate(savedInstanceState);  
		
        demoview = new DemoView(this);  
        setContentView(demoview);  
    }

private class DemoView extends View{  
        public DemoView(Context context){  
            super(context);  
        }

@Override protected void onDraw(Canvas canvas) {  
            super.onDraw(canvas);

// required drawing code 
            Paint paint = new Paint();  
            paint.setStyle(Paint.Style.FILL);  
			
			
		  // make the canvas background white  
            paint.setColor(Color.rgb(255,255,255));  
            canvas.drawPaint(paint);

// draw circle and anti aliasing is off  
			//use color like RED or use rgb numbers as shown
			//(Color.RED);
            paint.setAntiAlias(false);  
            paint.setColor(Color.rgb(224,23,152));
			canvas.drawCircle(550, 760, 200, paint);

// draw circle and anti aliasing is on  
            paint.setAntiAlias(true);  
            paint.setColor(Color.rgb(200,23,152));  
            canvas.drawCircle(400, 760, 150, paint);

// draw red rectangle with anti aliasing turned off  
            paint.setAntiAlias(false);  
            paint.setColor(Color.rgb(81,23,152));  
            canvas.drawRect(150, 300, 800, 600, paint);

// to draw the rotated text  
            canvas.rotate(-25);

paint.setStyle(Paint.Style.FILL);  
			paint.setTextSize(95); 
			paint.setColor(Color.argb(125,15,35,250));  
            canvas.drawText("Graphics Rotation", -395, 1300, paint); 
			
			Bitmap bitmap = Bitmap.createBitmap(getWidth(), getHeight(), Bitmap.Config.ARGB_8888);
			Canvas mcanvas = new Canvas(bitmap);

}  }}
    __________________
    
    strings.xml Only app_name string required
    
    
    <?xml version="1.0" encoding="utf-8"?>
<resources>

<string name="app_name">CanvasPaint</string>

</resources>
   
   
    End of Example Code

Image(s); just save each image as named, then copy/paste to: app projects/CanvasPaint/app/src/res/drawable-hdpi folder
______ This is the app icon, just Save to your device, then copy paste to the res/drawable-hdpi of the app project, 'Canvas Paint'.

SAVE IMAGE(S): Right Click and Save As
app_canvas_paint460.png
logo for canvas paint example android tutorial

This free script provided by
JavaScript Kit

AIDE for creating Android Apps on your tablet or cell phone(android).
Free and Paid.
GoTo Aide

ANDROID STUDIO - for creating Android Apps on your desktop computer.
Free to Install and Use
Learn more - Android Studio

The Java XML files we code(example codes) and the Android Apps we create in our Free Tutorials are compatible with Android Studio and AIDE. Just choose Java XML as your Programming Language.

You May Like:
Make Sushi Rolls Taste World Wines Flavours and Aromas