Android Graphics : Drawing Shape

Android Graphics : Drawing Shape Example 

Draw your graphics directly to a Canvas. This way, you personally call the appropriate class's onDraw() method (passing it your Canvas), or one of the Canvas draw...() methods

On a View

If your application does not require a significant amount of processing or frame-rate speed (perhaps for a chess game, a snake game, or another slowly-animated application), then you should consider creating a custom View component and drawing with a Canvas in View.onDraw(). The most convenient aspect of doing so is that the Android framework will provide you with a pre-defined Canvas to which you will place your drawing calls.

Continuous Rendering in the UI Thread

All we’ve done up until now is set the text of a TextView when needed. The actual rendering has been performed by the TextView itself. Let’s create our own custom View whose sole purpose it is to let us draw stuff to the screen. We also want it to redraw itself as often as possible, and we want a simple way to perform our own drawing in that mysterious redraw method.

Although this may sound complicated, in reality Android makes it really easy for us to create such a thing. All we have to do is create a class that derives from the View class, and override a method called View.onDraw(). This method is called by the Android every time it needs our View to redraw itself. Here’s what that could look like:

class RenderView extends View {

      public RenderView(Context context) {

            super(context);

      }

      protected void onDraw(Canvas canvas) {

            // to be implemented

      }

}

Drawing Lines
To draw a line we can use the following Canvas method:

Canvas.drawLine(float startX, float startY, float stopX, float stopY, Paint paint);

The first two arguments specify the coordinates of the starting point of the line, the next two arguments specify the coordinates of the endpoint of the line, and the last argument specifies a Paint instance. The line that gets drawn will be one pixel thick. If we want the line to be thicker, we can specify its thickness in pixels by setting the stroke width of the

Paint:
Paint.setStrokeWidth(float widthInPixels);

Drawing Rectangles
We can also draw rectangles with the Canvas:

Canvas.drawRect(float topleftX, float topleftY, float bottomRightX, float bottomRightY,Paint paint);

The first two arguments specify the coordinates of the top-left corner of the rectangle,
the next two arguments specify the coordinates of the bottom-left corner of the rectangle, and the Paint specifies the color and style of the rectangle. So what can the style be and how do we set it?

To set the style of a Paint instance we call the following method:
Paint.setStyle(Style style);

Style is an enumeration that has the values Style.FILL, Style.STROKE, and Style.FILL_AND_STROKE. If we specify Style.FILL, the rectangle will be filled with the color of the Paint. If we specify Style.STROKE, only the outline of the rectangle will be drawn, again with the color and stroke width of the Paint. If Style.FILL_AND_STROKE is set, the rectangle will be filled, and the outline will be drawn with the given color and stroke width.

Drawing Circles
More fun can be had by drawing circles, filled or stroked, or both:

Canvas.drawCircle(float centerX, float centerY, float radius, Paint paint);

The first two arguments specify the coordinates of the center of the circle, the next argument specifies the radius in pixels, and the last argument is again a Paint instance. As with the Canvas.drawRectangle() method, the color and style of the Paint will be used to draw the circle.

One last thing of importance is that all these drawing methods will perform alpha blending. Just specify the alpha of the color as something other than 255 (0xff), and your pixels, lines, rectangles, and circles will be translucent.

MainActivity.java Source Code

package android.graphics.drawingshape;

import android.os.Bundle;

import android.app.Activity;

import android.content.Context;

import android.graphics.Canvas;

import android.graphics.Color;

import android.graphics.Paint;

import android.graphics.Paint.Style;

import android.view.View;

import android.widget.LinearLayout;

public class MainActivity extends Activity {

    @Override

    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_drawing_shape);

       

        LinearLayout container = (LinearLayout) findViewById(R.id.graphics);

        final RenderView aView = new RenderView(this);

        container.addView(aView);              

    }

    class RenderView extends View {

     

      Paint paint;

     

      public RenderView(Context context) {

            super(context);

            paint = new Paint();

           

            setFocusable(true);

            setFocusableInTouchMode(true);           

      }

     

      protected void onDraw(Canvas canvas) {

     

            // Draw Background Colour

            canvas.drawRGB(255, 255, 160);            // Yellow

           

            // Draw Line

            paint.setColor(Color.RED);

            canvas.drawLine(0, 0, canvas.getWidth()-1, canvas.getHeight()-1, paint);

           

            // Draw Circle

            paint.setStyle(Style.STROKE);

            paint.setColor(0xff000000);               // Black

            canvas.drawCircle(canvas.getWidth() / 2, canvas.getHeight() / 2, 80, paint);

           

            // Draw Rectangle

            paint.setStyle(Style.FILL);

            paint.setColor(0x770000ff);               // Blue                            

            canvas.drawRect(100, 100, 400, 400, paint);

            invalidate();

           

      }

    }

}

Layout xml Source code

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    android:id="@+id/container"

    android:orientation="vertical"

    android:layout_width="match_parent"

    android:layout_height="match_parent" >

    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"      

        android:text="@string/hello_world"

        tools:context=".MainActivity" />

        

    <LinearLayout

      android:id="@+id/graphics"

      android:layout_width="match_parent"

      android:layout_height="match_parent"

      android:orientation="vertical"/>

</LinearLayout>

Android Graphics : Drawing Shape Example Code