Android canvas

In this Android tutorial, you learn how to draw text and different shapes (e.g. rectangle, oval, circle, and arc) using Canvas class. The Canvas class has a lot of methods that can be used to draw the shapes. Here are some methods that are frequently used:

- drawText(String text, float x, float y, Paint paint) method draws the parameter text using the specified paint at a location determined by x, y coordinates. From the paint p parameter, you can specify text color and size. You can also specify stroke width and gradient when the paint is applied to a shape.
- drawLine(float x, float y, float x1, float y1, Paint paint) method draws a line connecting x, y point to x1,y1 point.
- drawRect(RectF rect, Paint paint) method draws a rectangle that its starting coordinates and sizes are determined by the rect parameter.
- drawOval(RectF rect, Paint paint) method draws and oval that its bounds are determined by the rect parameter.
- drawCircle(float cx, float cy, float radius, Paint paint) method draws a circle at the location cx, cy. The size of the circle is determined by the radius parameter.
- drawArc(RectF rect, float startingAngle, float sweepAngle, boolean useCenter, Paint paint) method draws an arc. The bounds of the arc is determined by the rect parameter. The startingAngle is the starting angle (in degree) where the arc begins. The sweepAngle (in degree) is the sweep angle measured clockwise.



Now to have example application on using Canvas to draw text and shapes, you create a new Android project. Then add an ImageView to the activity_main.xml file to display drawings.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   tools:context=".MainActivity"
   android:orientation="vertical"
     >
   <ImageView
     android:id="@+id/imgView"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     />
</LinearLayout>


Here is the code written in the MainActivity class to draw text, a line, a rectangle, an oval, a circle, and an arc. The rectangle and oval are filled with a color. The circle is filled with a gradient. The arc is not filled.

import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.LinearGradient;
import android.graphics.Paint;
import android.graphics.RadialGradient;
import android.graphics.RectF;
import android.graphics.Shader;
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.util.DisplayMetrics;
import android.view.Display;
import android.view.Menu;
import android.view.MenuItem;
import android.view.WindowManager;
import android.widget.ImageView;
public class MainActivity extends ActionBarActivity {
   @Override
   protected void onCreate(Bundle savedInstanceState) {
     super.onCreate(savedInstanceState);
     setContentView(R.layout.activity_main);
     ImageView imgView=(ImageView)findViewById(R.id.imgView);
      // get screen width and height
     WindowManager wManager=getWindowManager();
     Display display=wManager.getDefaultDisplay();
     DisplayMetrics metrics=new DisplayMetrics();
     display.getMetrics(metrics);
     int screen_width=metrics.widthPixels;
     int screen_height=metrics.heightPixels;
     // Display images
     imgView.setImageBitmap(drawThings("#ff4455", screen_width, screen_height));
   }
   private Bitmap drawThings(String paintColor, int bgWidth, int bgHeight){
     Paint paint = new Paint();
     paint.setTextSize(30);
     paint.setColor(Color.parseColor(paintColor));
     Shader gradient = new LinearGradient(0, 50, 0, 100, Color.RED, Color.BLUE, Shader.TileMode.REPEAT);
     Bitmap bitmapBackground= Bitmap.createBitmap(bgWidth,bgHeight, Bitmap.Config.ARGB_8888);
     Canvas canvas = new Canvas(bitmapBackground);
     // Draw text
     canvas.drawText("Drawing shapes: ",100, 30, paint);
     // Draw a line
     canvas.drawLine(100, 60, 500, 60, paint);
     // Draw a rectangle
     canvas.drawRect(new RectF(100, 70, 200, 200), paint);
     // Draw a oval
     canvas.drawOval(new RectF(100, 320, 300, 400), paint);
     // Draw a circle with gradient
     paint.setShader(gradient);
     canvas.drawCircle(100, 500, 100, paint);
     // Draw a arc with gradient and no fill
     paint.setStrokeWidth(3);
     paint.setStyle(Paint.Style.STROKE);
     canvas.drawArc(new RectF(250, 500, 350, 650), 0,180,false, paint);
     return bitmapBackground;
   }
}


android canvas example

Posted by: Dara | post date: 04-04-2015 | Subject: Android Apps Development

write programming tip



This website intents to provide free and high quality tutorials, examples, exercises and solutions, questions and answers of programming and scripting languages:
C, C++, C#, Java, VB.NET, Python, VBA,PHP & Mysql, SQL, JSP, ASP.NET,HTML, CSS, JQuery, JavaScript and other applications such as MS Excel, MS Access, and MS Word. However, we don't guarantee all things of the web are accurate. If you find any error, please report it then we will take actions to correct it as soon as possible.