Android Graphics

Creating the first program

Use the File->New->New Project to create a new project. Select the Empty Activity. Give a name for the

This would create a project with a project with a Main activity that looks. The line setContentView shows which layout resource file is used in this activity.

package com.example.tranformation

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }
}

MainActivity.java

The content of the activity_main.xml looks like below

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

There is no great deal in this program; it is just a hello world program. You can run this on the device.

At this point, we will create a custom view which we will use to write our canvas graphics.

Create a custom view for canvas drawing

The next step we are trying is to create a custom view we will name this as my custom view. Let us name this as TranformationView. The reason for this name will be apparent later. This is subclassed from the View class. Also, you need to override the onDraw function.

package com.example.transformation

import android.content.Context
import android.graphics.Canvas
import android.graphics.Paint
import android.util.AttributeSet
import android.view.View

class TransformationView
@JvmOverloads
constructor(context: Context, attr: AttributeSet? = null, defStyleAttr:  Int = 0): View(context, attr, defStyleAttr) {
    private var drawPaint: Paint = Paint()
    init {
        drawPaint.textSize = 25f
    }

    override fun onDraw(canvas: Canvas?) {
        super.onDraw(canvas)
    }
}

The onDraw function has an instance reference to canvas, which we will be using for our canvas drawing.

Let us add some functionality to draw some text at four different points on the canvas. Note the highlighted lines of code

The first parameter is the string to write. The second and third are the (X, Y) coordinates in terms of pixel to where the text should appear. The third parameter is the Paint to draw with.

package com.example.transformation

import android.content.Context
import android.graphics.Canvas
import android.graphics.Paint
import android.util.AttributeSet
import android.view.View

class TransformationView
@JvmOverloads
constructor(context: Context, attr: AttributeSet? = null, defStyleAttr:  Int = 0): View(context, attr, defStyleAttr) {
    private var drawPaint: Paint = Paint()
    init {
        drawPaint.textSize = 25f
    }

    override fun onDraw(canvas: Canvas?) {
        super.onDraw(canvas)
        canvas?.drawText("@(200, 200)", 200f, 200f, drawPaint)
        canvas?.drawText("@(400, 200)", 400f, 200f, drawPaint)
        canvas?.drawText("@(200, 400)", 200f, 400f, drawPaint)
        canvas?.drawText("@(400, 400)", 400f, 400f, drawPaint)
    }
}

One more modification to use this new view as part of the Activity. In this, we should delete the TextView and replace it with TransformationView. Now you should see our drawText functions in action.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <com.example.transformation.TransformationView
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

Here is the output