Create Custom View in Android MATRIX EFFECT CANVAS Tutorial

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.

1. So first, let's create an Empty Activity Project.
2. 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.

1. Open your main activity layout file and add the view:
   XML

   <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:

• https://github.com/sapandang/Android-Custom-View-Matrix-Rain-Effect

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