Create Custom View in android MATRIX EFFECT CANVAS tutorial
Hi all as I stared my development with android I always wanted to create a Custom view or rather I want a canvas where I can draw freely. To learn about canvas I decided to create matrix rain effect which I can add to my android layout. Here is the complete tutorial which I have post. Hopping it will be use full to someone.
Converted this effect to live wallpaper.
View is the class represents the basic building block for user interface components. Sometime no one want to use the default widget provided by the android and want some fancy component.
So how to get the custom component build your own. However I wanted to experiment with canvas. So I decided to create Matrix Rain Effect. Below is the brief description of matrix effect.
Matrix Rain Effect
Matrix effect is the popular effect in which random characters fall from top creating a rain effect. “Brief description” isn’t.
Now before going to code the view in canvas.Let me explain how the design of canvas matrix effect will work. Check out the below image
Let me explain how to design the matrix rain effect
Design of canvas
Setting UP android studio
First let setup the android studio. I won’t be explaining how to setup android studio here. There are plenty of resources already outside.
1. So First let create an Empty Activity Project.
2. Build and Run the application to check if everything is working fine
empty Project creation wizard
Now your Empty project might be up and running.
Hope you are now clear how the effect will work.
Now exercise your finger to type the code
1. Create a Matrix Effect class which extends View
2. Let us set up some initaial variable which are required
3.Now let’s create a function to draw the text on the bitmap which is our canvas
4.Now to draw these text on the bitmap with alpha component
To get the trail effect we add alpha the component to bitmap so when one bitmap is drawn over other trail effect will appear
5.Now the main draw function which will make the draw complete draw cycle and make it bitmap visible on the view. We have override the Draw() function of the View class
Here the invalidate(); function makes the draw call again and again. Thus our bitmap is drawn over and over again on the canvas.
7.Still the problem will remain how to make the view run at different sizes. To do this solution which worked for me is to override the onSizeChange method of the view.
This method create the canvas of the size of the screen
9.Now our Custom view is ready lets add it to the layout
a.Open your main activity layout file and add the view
scrap.app.skd.matrixeffect.MatrixEffect is the class of the view.
10.Now run the app and see the matrix rain on you handset
Complete Custom View Canvas source
I will try to improve the article formatting.Some how I am not to set it.
--> Removed syntax highlighter from blog since it was creating problem