Pr.Pg Next Pg

Custom View tutorials

 

Setting UpCustom View

  • We are now going towards graphics.

  • We are now going to set up our own custom view and incorporate animation and fonts.

  • To demonstrate a custom view, we create an activity named Graphics.java.

  • We then set its ContentView as our own personalize view named myView.

  • This myView is an object of our own type called MyClass.

  • In the MyClass class we will define the view for our activity.

  • Below is the Code for Graphics.java.

 

Graphics.java

 

package com.example.helloandroid;

 

import android.app.Activity;

import android.os.Bundle;

 

public class Graphics extends Activity {

MyClass myView;

@Override

protected void onCreate(Bundle savedInstanceState) {

// TODO Auto-generated method stub

super.onCreate(savedInstanceState);

myView = new MyClass(this);

setContentView(myView);

}

}

 

  • In this class we have made an object of class MyClass which we define later.

  • We initialize the object with a constructor which takes the Context of the class as its parameter.

  • That’s why we pass this as a parameter.

  • We then set the ContentView as myView.

  • We would also like to have new fonts.

  • We also will add an icon for our tutorial in the drawable folder.

  • The image can be a simple icon. Put the image into correct drawable folder depending upon the pixl density.

  • For our example, we have an image named extra.png.

  • For that you can download the fonts and store them in the assets folder.

  • We have named them as redcoat.ttf.

  • The extension can be TTF or OTF.

  • We will now explain the structure of MyClass class.

 

MyClass.java

 

package com.example.helloandroid;

 

import android.content.Context;

import android.graphics.Bitmap;

import android.graphics.BitmapFactory;

import android.graphics.Canvas;

import android.graphics.Color;

import android.graphics.Paint;

import android.graphics.Paint.Align;

import android.graphics.Typeface;

import android.text.TextPaint;

import android.view.View;

 

public class MyClass extends View {

Bitmap bm;

float changingY;

Typeface font;

float changingX;

MyClass(Context context) {

super(context);

bm = BitmapFactory.decodeResource(getResources(), R.drawable.extra);

changingY=0;

changingX=0;

font = Typeface.createFromAsset(context.getAssets(), "redcoat.ttf");

}

 

@Override

protected void onDraw(Canvas canvas) {

// TODO Auto-generated method stub

super.onDraw(canvas);

Paint textpaint = new Paint();

canvas.drawColor(Color.GREEN);

textpaint.setColor(Color.MAGENTA);

textpaint.setTextAlign(Align.CENTER);

textpaint.setTextSize(60);

textpaint.setTypeface(font);

canvas.drawText("My Application",changingX , 200, textpaint);

canvas.drawBitmap(bm, canvas.getWidth()/2, changingY, null);

if(changingY<canvas.getHeight()){

changingY+=10;

}else{

changingY=0;

}

if(changingX<canvas.getWidth()){

changingX+=10;

}else{

changingX=0;

}

invalidate();

}

}

 

 

  • We will now go through the code.

  • We have declared various variables as described above.

  • Then we have defined the constructor which takes in a Context.

  • We have initialized the variables inside the constructor.

  • For the Bitmap variable, we use the decodeResources() method of the BitmapFactory class to load the icon image from the resources.

  • getResources() method returns a Resources instance in which the resource with the id specified in the other parameter is present.

  • We also get the reference of the font which we have saved in the assets folder and the reference in our TypeFace variable named font.

  • Now me move on to the onDraw() method of the View class which takes in a Canvas object.

  • The most important step in drawing a custom view is to override the onDraw() method. The parameter to onDraw() is a Canvas object that the view can use to draw itself. The Canvasclass defines methods for drawing text, lines, bitmaps, and many other graphics primitives. You can use these methods in onDraw() to create your custom user interface (UI).

  • Before you can call any drawing methods, though, it's necessary to create a Paint object. We will discuss Paint in more detail.

  • We make an object of Paint called paint.

  • The Paint class holds the style and color information about how to draw geometries, text and bitmaps.

  • Then we set the color of the canvas to be GREEN, this will set the background color of the view as green since the canvas covers the entire screen in this case.

  • We then set the color of the Paint object to be Magenta.

  • We then set the alignment for the text defined by the paint object as center.

  • We also set the size of the text and set our font as the Type face.

  • We then add a string “My Application” to our canvas with the drawText() method.

  • public void drawText (String text, float x, float y, Paint paint)

  • Added in API level 1

  • Draw the text, with origin at (x,y), using the specified paint. The origin is interpreted based on the Align setting in the paint.

Parameters

text

The text to be drawn

x

The x-coordinate of the origin of the text being drawn

y

The y-coordinate of the origin of the text being drawn

paint

The paint used for the text (e.g. color, size, style)

  • We set the x-coordinate as our changingX variable whose use we describe later.

  • We then add the Bitmap to our canvas using the drawBitmap() method.

  • public void drawBitmap (Bitmap bitmap, float left, float top, Paint paint)

  • Added in API level 1

  • Draw the specified bitmap, with its top/left corner at (x,y), using the specified paint, transformed by the current matrix.

  • If the bitmap and canvas have different densities, this function will take care of automatically scaling the bitmap to draw at the same density as the canvas.

Parameters

Bitmap

The bitmap to be drawn

Left

The position of the left side of the bitmap being drawn

Top

The position of the top side of the bitmap being drawn

Paint

The paint used to draw the bitmap (may be null)

  • We set the position of the left side of the bitmap as the center of the canvas by using the canvas.getWidth() method.

  • We use the changingY variable for our top position.

  • Now we have if and else for our animation.

  • If changingY variable hasn’t reached the full height of the canvas then it will keep shifting the image lower and lower and when it does it will postion it to the top.

  • Similarly for changingX variable which will function for the text in horizontal direction.

  • To make our onDraw() code run again and again for our animations, we use the method invalidate().

  • public void invalidate ()

  • Added in API level 1.

  • Invalidate the whole view.

  • If the view is visible, onDraw(android.graphics.Canvas) will be called at some point in the future.

  • This must be called from a UI thread. To call from a non-UI thread, call postInvalidate().

  • Now we also have to add our Graphics activity into our AndroidManifest file.

  • We can also add our activity into our MenuList activity so that we can start it from there or we can just set this acitivity as Launcher.

  • Below are the screenshots for the application.

 

 

 

Pr.Pg border                                              Next Pg