1 / 20

Introduction to Android (Part 3) Understanding Android Graphics

Introduction to Android (Part 3) Understanding Android Graphics. Representing Color.

lionel
Download Presentation

Introduction to Android (Part 3) Understanding Android Graphics

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Introduction to Android(Part 3)Understanding Android Graphics

  2. Representing Color The Android libraries do not have the same type of Color class as the one available in the standard Java Awt library. The Android Color library (from the android.graphics package) consist of a set of Static methods for producing an integer value that represents 4 byte Alpha-RGB value or ARGB value. The first byte is the alpha value (0-255), the second byte is the red value (0-255), the third byte is the green value (0-255), and the fourth byte is the blue value (0-255).

  3. RGB Color Combinations You can use the Color constants provided in the Color class or you can you the Color.rgb(red,green,blue) method or the Color.argb(alpha,red,green,blue) method to create a custom color value. The Alpha value gives the amount of transparency in the color. A value of 255 means no transparency, and a value of 0 means completely transparent. The other RGB values combine to create colors in the normal way, meaning that (255,255,0) will create yellow.

  4. Object Color.BLACK Color.BLUE Color.CYAN Color.DKGRAY Color.GRAY Color.GREEN Color.LTGRAY Color.MAGENTA Color.RED Color.TRANSPARENT Color.WHITE Color.YELLOW ARGB Value 255, 0, 0, 0 255, 0, 0, 255 255, 0, 255, 255 255, 64, 64, 64 255, 128, 128, 128 255, 0, 255, 0 255, 192, 192, 192 255, 255, 0, 255 255, 255, 0, 0 0, 255, 255, 255 255, 255, 255, 255 255, 255, 255, 0 The Color Constants • The predefined colors include the following:

  5. Drawing Shapes • Let's explore some of the methods of the Canvas class that draw shapes in more detail • The first parameters specify the top left coordinates and the bottom right coordinates (leftX, topY, rightX, bottomY). • The last parameter specifies a Paint object that determines the color to use, whether the object is filled (FILL) or unfilled (STROKE) and other drawing details of the pen that will draw the shape. The paint object can be set like so: paint.setColor (Color.RED); paint.setStyle (Style.STROKE);

  6. X Y canvas.drawLine (10,20,150,45,paint); or canvas.drawLine (150,45,10,20,paint); Drawing a Line 10 150 20 45

  7. X 40 (150, 60) 100 Y Drawing a Rectangle 50 20 canvas.drawRect (50,20,150,60,paint);

  8. X 80 (225, 100) 50 Y Drawing an Oval (Note: You must create a RectF object and place the oval inside) 175 20 bounding rectangle Rectf ovalRect = new Rectf(); ovalRect.set (175,20,225,100); canvas.drawOval (ovalRect,paint);

  9. Drawing an Arc • The drawArcmethod draws an arc. drawArc(oval, 180, 180, false, paint); • The drawArcmethod takes five arguments. • The first argument is the bounding RectF object, like with the drawOvalmethod. • The next two arguments indicate where the arc starts, and the number of degrees through which is sweeps clockwise. • The next argument determines if the center point is shown as a connected point in a unfilled (stroke) drawing. • The next argument is the paint to use.

  10. Specifying an Arc (Note: You must create a RectF object and place the oval inside) Rectf oval = new Rectf(); oval.set(x,y,x+Width,y+Height); canvas.drawArc(oval,0,90,false,paint); Rectf oval = new Rectf(); oval.set(x,y,x+Width,y+Height); canvas.drawArc(oval,0,-90,false,paint); The fourth argument is a flag to determine if the center is included in the arc (making it a wedge). It is false in the above examples.

  11. Specifying an Arc (Note: You must create a RectF object and place the oval inside) Rectf oval = new Rectf(); oval.set(x,y,x+Width,y+Height); canvas.drawArc(oval,0,90,true,paint); Rectf oval = new Rectf(); oval.set(x,y,x+Width,y+Height); canvas.drawArc(oval,0,-90,true,paint); The fourth argument is a flag to determine if the center is included in the arc (making it a wedge). It is true in the above examples.

  12. Basic Drawing Methods • In the Canvas class the following methods are available for drawing certain shapes: • canvas.drawLine(x1, y1, x2, y2, paint); • canvas.drawRect(x, y, x+width, y+height, paint); • canvas.drawOval(x, y, x+width, y+height, paint); • canvas.drawArc(x, y, x+width, y+height, startAngle, arcAngle, paint); • canvas.drawText(String, x, y, paint); • canvas.drawColor(Color); // fills entire canvas with color, like a backgrd color • And the following methods are available for manipulating the pen: • paint.setColor(Color); // sets pen color • paint.setStyle(Style); // Style.FILL = filled/ Style.STROKE = unfilled • paint.setStrokeWidth(Width); // sets stroke width, Width is an int • paint.setTextSize(Size); // sets text size, Size is an int • paint.setTypeface(TypeFace); // sets type face 3

  13. Polygons • In the Canvas class, to draw polygons, the Path class is used instead of standard Java Polygon class. For instance, a three sided shape that had vertices at the three points (x1,y1), (x2,y2) and (x3,y3) would be drawn by creating a Path object like so: Path pathShape = new Path();pathShape.moveTo(x1,y1);pathShape.lineTo(x2,y2);pathShape.lineTo(x3,y3);pathShape.close ();canvas.drawPath(pathShape, paint); • The moveTo() method starts the path, then points are added with the lineTo() command, and when you call close() a line segment to the original point is added. You can also just lineTo() the first point to end the path, or that and the close() out to end the path.

  14. Bitmaps • In the Canvas class, Bitmap objects are used instead of standard Java Image objects to show images. • PNG, GIF and JPEG images are supported. To load an image file, you must put it in one of the “drawable” folders and then use a command like the following that does not include the image’s file extension in the filename: Bitmap bmp = BitmapFactory.decodeResource(resource, R.drawable.filename); • The resource object that is passed to this method is usually retrieved using the getResources() method if you are in a View or the getApplicationResources() method in an Activity.

  15. Bitmaps • Once you have the Bitmap object you can place it anywhere on the canvas using its (x,y) coordinate. For instance, you could display the bitmap at position (40,20) as its top left corner like so: canvas.drawBitmap(bmp,40,20,paint); • If you want to resize the bitmap, you need to create a Rect or RectF object that has the new size dimensions in it, then you can resize the bitmap and place it at any (x,y) coordinate like so: Rect newDim = new Rect(x,y,x+newWidth,y+newHeight); canvas.drawBitmap(bmp,null,newDim,paint);

  16. Bitmaps • If you want to draw just a portion of the bitmap, you can provide two Rect objects, where the first has the portion of the original Bitmap dimensions you wish to use, the second has the place you would like two draw that portion on the canvas. The following lines draws the top left corner of a bitmap onto the top left corner of the screen at whatever new dimensions are desired: Rect oldDim = new Rect(0,0,bmpWidth/2,bmpHeight/2); Rect newDim = new Rect(0,0,newWidth,newHeight); canvas.drawBitmap(bmp,oldDim,newDim,paint);

  17. Bitmaps • If you want a bitmap to blend into its background, you can do so by setting the alpha value of the paint to whatever transparency level you want. The following example draws the bitmap at a half transparent alpha value because 128 is about half of 255: paint.setColor(Color.argb(128,0,0,0)); canvas.drawBitmap(bmp,x,y,paint);

  18. The onDraw() methodand Animation • You can draw your bitmap onto any View using the onDraw() method of the View. The onDraw() method accepts a Canvas object which you use to draw into the View. • To animate a bitmap you would repeatedly move the x and/or y coordinate of the image in a different method than the onDraw() method, and then call the inValidate() method of the View which will trigger the onDraw() method to run. If you do this in a Timer, you can manage the interval of the updates to make the animation update accordingly.

  19. Timers • There are many ways to make a task run at a certain interval in Android, and we will cover some of the ways that are native to the Android OS in the future. However, using the Timer class from the standard java.util library is a very reliable approach. The only issue that is tricky with this approach is that you cannot access the Android UI thread directly from the thread the Timer triggers. • Instead the Timer thread must call a separate method to post a new thread which will run on the Android UI thread. Although this may sound convoluted, it is a simple pattern to follow as shown in the example that follows.

  20. Timer Example • Setting up the timer for INTERVAL milliseconds: // Constructor header code goes up here myTimer = new Timer(); myTimer.schedule(new TimerTask() { @Override public void run() { TimerMethod(); } }, 0, INTERVAL); // End the Constructor down here private void TimerMethod() { //Same thread as the timer, so need to call runOnUiThread() method from here. this.runOnUiThread(Timer_Tick); } private Runnable Timer_Tick = new Runnable() { public void run() { //This method runs in the Android UI thread. // Do your UI tasks here } };

More Related