Android Canvas and Create Custom View
Hey! Welcome to my article Dear Android Developers! and Dear Predators!
Today, I am going to explain Canvas and how to create your own custom view in Android. So, What is the Canvas?
A Canvas is 2D drawing framework that provides developers to implement their own custom views or animations. Canvas is basically based on the SKIA library which is 2D Graphics Library used on different platforms such as Flutter, Chrome and Firefox. Therefore, If you want to understand concept of the Canvas fully, you have to deep in SKIA source.
Here is the SKIA website: https://skia.org
Let’s get back to our topic and start by explaining the canvas coordinate system first.
Canvas Coordinate System
As seen here, the Canvas coordinate system starts from the upper left corner and start (0,0) point. Also, the x-coordinate increases as you move horizontally to the right. Likewise, if we go down vertically, the y-coordinate increases.
How do we basically use Canvas?
1-With the help of bitmap or view, we can hold the pixels and make the canvas drawn.
2- Also, We need a canvas to run the drawing commands.
3-Likewise, We need these drawing commands because we need to show the canvas what to draw.
4-Finally, we need Paint because we need to define how to show drawing commands.
Basically we need 4 things for use. View or bitmap, Canvas, Drawing Commands and Paint.
Now let’s create our own custom view to better understand this concept.
First of all, we should to create a Java class and extend this class to the View class. Then, we have to add the constructor method of our class.
After all, we need to add the OnDraw() method, which is one of the lifecycle methods of the View class. As you might have guessed, the View class has many lifecycle methods, but I’ll cover them in another article. For now I will only use the OnDraw() method, but I will add a little image here about these methods.
View Life Cycle:
The invalidate() method is used to redraw the view. It calls the onDraw method again. Additionally, the Canvas class includes many drawing methods such as line, rectangle, circle. Moreover, we can use the Path class for drawing more detailed and challenging geometric shapes.
The Path class has 3 basic methods to make our work easier.
moveTo() >> It moves directly to the coordinate we specified.lineTo() >> It draws a line from our current position to where we want it.close() >> is used to close a path.
OnDraw() method will come with a Canvas object in itself which will help us to create own custom views.
Then, we should create our Paint and Path objects.
Now, I add my custom method to make settings of the Paint object.
Furthermore, In order to create the shape that I want on the screen, I will insert the user movements into the path, for this reason I add onTouchEvent() method to follow user draw.
Finally, I can now create my Custom View using the OnDraw() method.
Here you can see our Custom view on the right side.
Now, Let’s test it on the Device. You will magically see what happens.
Here is my codes for custom view class:
public class myView extends View {
private Path path = new Path();
private Paint paint = new Paint();
//Constructor
public myView(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
setFocusable(true);
setFocusableInTouchMode(true);
PaintSettings();
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawPath(path, paint);
}
// Get x and y and follow user motion events
public boolean onTouchEvent(MotionEvent event) {
float pointX = event.getX();
float pointY = event.getY();
// Checks for the event that occurs
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
// Starts a new line in the path
path.moveTo(pointX, pointY);
break;
case MotionEvent.ACTION_MOVE:
// Draws line between last point and this point
path.lineTo(pointX, pointY);
break;
default:
return false;
}
invalidate();
return true;
}
private void PaintSettings() {
paint.setStyle(Paint.Style.STROKE);
paint.setColor(Color.BLUE);
paint.setStrokeWidth(10);
}
}I hope it was a useful article for you! See you in my other articles!
My Sources:
