Putting It All Together


Build your own Android App Dev Empire

Get Instant Access

Let's write a quick test activity that demonstrates the preceding methods. This time I want you to analyze the code in Listing 4-13 first. Figure out where on a 480x800 screen in portrait mode the different shapes will be drawn. When doing graphics programming, it is of upmost importance to imagine how the drawing commands you issue will behave. It takes some practice, but it really pays off.

Listing 4-13. ShapeTest.java; Drawing Shapes Like Crazy package com.badlogic.androidgames;

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.os.Bundle; import android.view.View; import android.view.Window; import android.view.WindowManager;

public class ShapeTest extends Activity { class RenderView extends View { Paint paint;

public RenderView(Context context) { super(context); paint = new Paint();

protected void onDraw(Canvas canvas) { canvas.drawRGB(255, 255, 255); paint.setColor(Color.RED);

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

paint.setStyle(Style.STROKE); paint.setColor(0xff00ff00);

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

paint.setStyle(Style.FILL); paint.setColor(0x770000ff); canvas.drawRect(l00, 100, 200, 200, paint); invalidate();

^Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); requestWindowFeature(Window.FEATURE_NO_TITLE); getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN); setContentView(new RenderView(this));

Did you create that mental image already? Then let's analyze the RenderView.onDraw() method quickly. The rest is the same as in the last example.

We start off by filling the screen with the color white. Next we draw a line from the origin to the bottom-right pixel of the screen. We use a paint that has its color set to red, so the line will be red.

Next we modify the paint a little and set its style to Style.STROKE, its color to green, and its alpha to 255. The circle is drawn in the center of the screen with a radius of 40 pixels using the Paint we just modified. Only the outline of the circle will be drawn, due to the Paint's style.

Finally we modify the Paint again. We set its style to Style.FILL and the color to full blue. Notice that I set the alpha to 0x77 this time, which equals 119 in decimal. This means that the shape we draw with the next call will be roughly 50 percent translucent.

Figure 4-13 shows you the output of the test activity on 480x800 and 320x480 screens in portrait mode.

Figure 4-13. The ShapeTest output on a 480x800 screen (left) and a 320x480 screen (right) (black border added afterward)

Oh my, what happened here? That's what you get for rendering with absolute coordinates and sizes on different screen resolutions. The only thing that is constant in both images is the red line, which simply draws from the top-left corner to the bottom-right corner. This is done in a screen resolution-independent manner.

The rectangle is positioned at (100,100). Depending on the screen resolution, the distance to the screen center will differ. Also, the size of the rectangle is 100x100 pixels. On the bigger screen, it takes up far less relative space than on the smaller screen.

The circle's position is again screen resolution independent, but its radius is not. Thus, it again takes up more relative space on the smaller screen than on the bigger one.

We already see that handling different screen resolutions might be a bit of a problem. It gets even worse when we factor in different physical screen sizes. But we'll try to solve that issue in the next chapter. Just keep in mind that screen resolution and physical size matter.

NOTE: The Canvas and Paint classes offer a lot more than what we just talked about. In fact, all the standard Android Views draw themselves with this API, so you can image that there's more behind it. As always, check out the Android Developers site for more information.

Figure 4-13 shows you the output of the test activity on 480x800 and 320x480 screens in portrait mode.

Was this article helpful?

0 0

Post a comment