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 . 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 I posted it at my blog http://www.androidlearner.com/
Introduction
Here is a quick tutorial to create custom view in Android. The custom view creates a MATRIX RAIN EFFECT.
This is the tutorial posted on http://www.androidlearner.com/.
Background
Here is the little background on how this works:
Custom View
View
is the class that represents the basic building block for user interface components. Sometimes, no one wants to use the default widget provided by Android and wants some fancy component.
So how to get the custom component is 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.
Let Me Explain How to Design the Matrix Rain Effect
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
Setting UP Android Studio
First, let's set up Android studio. I won’t be explaining how to setup Android studio here. There are plenty of resources already outside.
- So first, let's create an Empty Activity Project.
- Build and run the application to check if everything is working fine.
Using the Code
1. Create a Matrix Effect class which extends View:
public class MatrixEffect extends View {
public MatrixEffect(Context context, AttributeSet attrs) {
super(context, attrs);
}
}
2. Let us set up some initial variables which are required:
int width = 1000000; //default initial width
int height = 100; //default initial height
Canvas canvas =null; //default canvas
Bitmap canvasBitmap; //Bitmap used to create the canvas
int fontSize = 15; //font size of the text which will fall
int columnSize = width/fontSize; //column size ; no of digit required to fill the screen
int parentWidth;
String text = "MATRIXRAIN"; // Text which need to be drawn
char[] textChar = text.toCharArray(); // split the character of the text
int textLength = textChar.length; //length of the length text
Random rand = new Random(); //random generater
int[] textPosition; // contain the position which will help to draw the text
3. Now let’s create a function to draw the text on the bitmap which is our canvas:
void drawText()
{
//Set up the paint
Paint paint = new Paint();
paint.setStyle(Paint.Style.FILL);
paint.setColor(Color.GREEN);
paint.setTextSize(15);
//loop and paint
for(int i =0 ;i<textposition .length="" at="" bottom="" canvas.drawtext=""
check="" draw="" fontsize="" has="" i=""
if="" not="" or="" paint=""
position="" rand.nextint="" random=""
reached="" text="" textchar=""
textlength="" textposition="" the=""> height && Math.random() > 0.975)
textPosition[i] = 0; // change text position to zero when 0 when text is at the bottom
textPosition[i]++; //increment the position array
}
}
The above function is responsible to draw the text on the canvas from top at random position, makes them fall and check if text has reached its bottom position. Then change text position to top.
4. Now to draw this text on the bitmap with alpha component:
public void canvasDraw()
{
//set the paint for the canvas
Paint paint = new Paint();
paint.setColor(Color.BLACK);
paint.setAlpha(5);
paint.setStyle(Paint.Style.FILL);
canvas.drawRect(0, 0, width, height, paint);//draw rect to clear the canvas
drawText(); // draw the canvas
}
To get the trail effect, we add alpha the component to bitmap so when one bitmap is drawn over the 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 overridden the Draw() function of the View class.
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
Paint paint = new Paint();
paint.setColor(Color.BLACK);
canvas.drawBitmap(canvasBitmap,0,0,paint); //draw the bitmap to canvas
canvasDraw(); // call the draw command
//Redraw the canvas
invalidate();
}
Here, the invalidate();
function makes the draw call again and again. Thus, our bitmap is drawn over and over again on the canvas.
6. Still the problem will remain how to make the view run at different sizes. To do this, the solution which worked for me is to override the onSizeChange method of the view.
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
width= w;
height = h;
super.onSizeChanged(w, h, oldw, oldh);
//create a Bitmap
canvasBitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
canvas = new Canvas(canvasBitmap); //set the canvas
// init paint with black rectangle
Paint paint = new Paint();
paint.setColor(Color.BLACK);
paint.setAlpha(255); //set the alpha
paint.setStyle(Paint.Style.FILL);
canvas.drawRect(0, 0, width, height, paint);
columnSize = width/fontSize;
//initalise the textposiotn to zero
textPosition = new int[columnSize+1]; //add one more drop
for(int x = 0; x < columnSize; x++)
textPosition[x] = 1;
}
This method creates the canvas of the size of the screen.
7. Now our Custom view is ready. Let's add it to the layout.
- Open your main activity layout file and add the view:
<scrap.app.skd.matrixeffect.MatrixEffect android:layout_width="match_parent" android:layout_height="match_parent" />
scrap.app.skd.matrixeffect.MatrixEffect
is the class of the view.
8. Now run the app and see the matrix rain on your handset.
To get the complete source of the canvas from the github:
Points of Interest
So how will this tutorial may be helpful to you. Most probably nothing. However, you can use canvas to create a live wallpaper. :P