The Android Canvas class supports a rich set of drawing primitives - circles, lines, etc. I have an app that uses these to chart some statistical data.
After reading the description on http://developer.android.com/reference/android/graphics/Canvas.html#drawLine%28float,%20float,%20float,%20float,%20android.graphics.Paint%29
. . . I was unclear what units the coordinates were in or how to make them device / resolution independent.
What units are these in and what's "best practice" for drawing lines and circles and rectangles that work on lots of different screen sizes and resolutions? Thanks in advance.
Android documentation says "The unit for location and dimensions is the pixel". After experimenting for a while I found out that prior to version 2.0 the unit was the pixel. But starting from 2.0 the unit is most likely the dip (device-independent pixel).
For the following code:
Paint paint = new Paint();
paint.setColor(Color.RED);
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeWidth(0);
canvas.drawRect(new Rect(1, 1, 319, 319), paint);
I get the same size square matching the width of the screen on 320x480, 480x800, and 240x320 emulators with android 2.0+.
This discovery allowed me to solve the problem: 1-pixel vertical lines on a large screen are sometimes 2-pixel wide. Set stroke width to 0 to draw 1-pixel lines independent of the screen size.
Edit
After getting more experience with Android, I need to correct my conclusions. Actually there is an attribute "android:anyDensity" in the "supports-screens" tag of the AndroidManifest.xml. This attribute is true by default. When it's true, the unit of measure is dp, otherwise it's a pixel.
Related
I created some test assets for ldpi up to xxxhdpi and put them in there respective drawable folders. If I draw things at the corners of the screen say position
0,0 or 0+canvas.getWidth()-bitmap.getWidth()
or things like that they align properly across all device screens.
I'd like to be able to draw my bitmaps anywhere on screen and have them scale adjusted properly across all device sizes but I am just not getting it.
Here's a sample screen shot same code running on two emulators.
The drawing code is the same. I was able to get the Paint to scale the line properly by adding a scale. The bitmaps also scale relative to their screen sizes but how do I draw at 50units in code and have it be 50units on all devices?
init function
Paint p = new Paint();
p.setColor(Color.RED);
p.setStyle(Paint.Style.FILL_AND_STROKE);
float scale = context.getResources().getDisplayMetrics().density;
p.setStrokeWidth(40*scale);
Bitmap ball = BitmapFactory.decodeResource(context.getResources(), R.drawable.ball);
render function
canvas.drawLine(0, 0, 400, 400, p);
canvas.drawBitmap(ball, 50, 50, null);
canvas.drawBitmap(ball2, 150, 150, null);
from the above screenshot you can see two things wrong. The length of the line, it's 400px long. Now that's an just a number I chose but it goes way too far on the smaller phone.
You also see how they are really far apart on one device but literally on top of each other on the second device.
What can to get past this issue?
Looks like your images are not scaled properly in the drawable folders.
According to this post xxhdpi images must be 4 times bigger than ldpi images i.e. 400x400px (xxhdpi) and 100x100px (ldpi).
The line goes from (0,0) all the way to (400, 400). The ldpi screen is only 240x320px, so the bottom right corner coordinate would be (240, 320). What you see is perfectly normal.
I'm using OpenGL ES 2.0 on Android and I and I initialise my display like so:
float ratio = (float) width / height;
Matrix.orthoM(mProjMatrix, 0, -ratio, ratio, -1, 1, 3, 7); //Using Orthographic as developing 2d
What I'm having trouble understanding is this:
Let's say my app is a 'fixed screen' game (like Pac-Man ie, no scrolling, just the whole game visible on the screen).
Now at the moment, if I draw a quad at -1 to +1 on both x and y I get something like this:
Obviously, this is because I am setting -ratio, ratio as seen above. So this is correct.
But am I supposed to use this as my 'whole' screen? With rather massive letterboxing on the left and right?
I want a rectangular display that is the whole height of the physical display (and as much of the width as possible), but this would mean drawing at less that -1 and more than +1, is this a problem?
I realise the option may be to use clipping if this was a scrolling game, but for this particular scenario I want the whole 'game board' on the screen and to be static (And to use as much of the available screen real estate as possible without 'stretching' thus causing elongation of my sprites).
As I like to work with 0,0 as the top of the screen, basically what I do is pass my draw method something like so:
quad1.drawQuad (10,0);
When the drawQuad method get's this, it basically takes the range from left to right as expressed my openGL and divide the the screen width (so, in my case -1.7 through +1.7 so 3.4/2560 = 0.001328125). And say I specify 10 as my X (as above), it will say something like:
-1.7 + (10*0.001328125) = -1.68671875
It then plots the quad at -1.68671875.
Doing this I am able to work with normal co-ords (and I just subtract rather than add for y axis so I can have 0 at the top).
Is this a good way to do things?
Because with this method, at the moment, if I specify a 100,100 square, it isn't a square, it's rectangle. However, on the plus side, I can fill the whole physical screen by scaling the quad by width x height.
You are drawing a 1x1 quad, so that is why you see a 1x1 quad. Try translating the quad 0.25 to the right or left and you will see that you can draw in that space too.
In graphics, you create an object, like a quad, in your case you made it 1x1. Then you position it wherever you want. If you do not position it, then it will be at the origin, which is what you see.
If you draw a wider shape, you will also see you can draw outside this area on the screen.
By the way, with your ortho matrix function, you aren't just specifying the screen aspect ratio, you are also specifying the coordinate unit size you have to work with. This is why a 1x1 is filling the height the of the screen, because your upper and lower boundaries are set to 1 and -1. Your ratio is a little more than one, since your width is longer than your height, so your left and right boundaries are essentially something like -1.5 and 1.5 (whatever your ratio happens to be).
But you can also do something like this;
Matrix.orthoM(mProjMatrix, 0, -width/2, width/2, -height/2, height/2, 3, 7);
Here, your ratio is the same, but you are sending it to your ortho projection with screen coordinates. (Disclaimer: I don't use the same math library you do, but these appears to be a conventional ortho matrix function based on the arguments you are passing to it).
So lets say you have a 1000x500 pixel resolution. In OpenGL your origin of 0,0 is in the middle. So now your left edge is at (-500,y), right edge at (500,y) and your top is (x,250). So if you draw your 1x1 quad, it will be very tiny, but if you draw a 250x250 square, it will look like your 1x1 quad in your previous ortho projection.
So you can specify the coordinates you want, the ratio, the unit size, etc for how you want to work. Personally, I dont't like specifying coordinates as fractions between 0 and 1, I like to think about them in the same sense as the screen pixels.
But whether or not you choose to do this, hopefully you understand what you are actually passing to these matrix functions.
One of the best ways to learn is draw an object to the screen and just play around with different numbers you send to your modelview and projection matrices so you can see what it is they are actually doing.
I am trying to make an app using canvas and a surfaceview, and I am worrying that in the future I would have many problems with it because I am not sure if the canvas is proportional with every device. currently I can only use my emulator since my phone's usb cable doesn't work(I know.. I have to get a new one..).
anyways, i would like to know if the canvas would transfer my coordinates and make everything proportional, what I mean by that is that if i have something in point a, lets say (10, 10) on a device that the screen of it is 100 X 100 (this is just an example for easy calculation) it would be on point (1, 1) on a 10 X 10 device.
This is really bothering me...
Thanks!
No, this wouldn't be the case. If you have a coordinate (10,10), it would be the same on all devices. I'd suggest you scale your drawings.
To scale your drawings you simply define a bitmap (that will stay the same) you'd like to draw to (when screen sizes change, that bitmap will be stretched).
Define a constant bitmap:
Bitmap gameScreen = Bitmap.createBitmap(getGameScreenWidth(),
getGameScreenHeight(), Config.RGB_565);
Get the scale for both x and y
width = game.getWindowManager().getDefaultDisplay().getWidth();
height = game.getWindowManager().getDefaultDisplay().getHeight();
scaleXFromVirtualToReal = (float) width/this.gameScreenWidth;
scaleYFromVirtualToreal = (float) height/this.gameScreenHeight;
Define a canvas object based on the bitmap you defined earlier on (allowing you to draw to it eg. canvas.drawRect() [...]):
Canvas canvasGameScreen = new Canvas(gameScreen);
In your rendering Thread you'll have to have a Canvas called frameBuffer, which will render the virtual framebuffer:
frameBuffer.drawBitmap(this.gameScreen, null, new Rect(0, 0, width,
height), null);
No, the unit on the screen (whether you are using canvas or OpenGL) is a pixel. You can get the size of your canvas using Canvas.getWidth() and Canvas.getHeight() if you need relative coordinates, but your Canvas drawing methods are also in Pixels, so I guess you will need to convert coordinates in OpenGL only and not while using Canvas.
If I were to initialize a Paint, and set it's text size like so:
Paint = new Paint();
Paint.setAntiAlias(true);
Paint.setARGB(255, 255, 0, 0);
Paint.setTextSize(screenWidth/100);
//screenWidth is the width of the screen in pixels given via display metrics.
And then draw text to the canvas like so:
String text = "Hello"
canvas.drawText(text, (screenWidth/13), (screenHeight/5), Paint);
Would the text Show up in the same relative spot the same relative size regardless of screen metrics? I ask because I only have 1 device and the Emulator doesn't run very well on my multi-core machine.
What I've been doing up until this point is simply using a bitmap with the text written over a background, but my memory usage is getting quite heavy, so I'm looking to cut down on the number of bitmaps loaded.
My other option is to save the text as a bitmap with a transparent background and overlay it on a single bitmap background. But that seems to be only half as productive, as it is actually creating 1 more bitmap, just reducing the total size of all the bitmaps stored. I also don't like this idea because i'd eventually like to take more control over the object life cycle and this will make that less effective.
Also, is there any method of adding styles to text (such as complicated fonts and color patterns besides using pre-made Drawables) so that the text can be drawn to canvas? (As cheaply as possible)
NVM, Solved By Poking around all day I figured out that DP units can be called from the res folder and will give a fairly uniform position of the text. and that paint is not as customization friendly as I wish.
I’m using a canvas and bitmap to draw graphics such as circles, rects text etc and want my graphic routines to use actual pixels based on the true screen resolution in pixels just as one would on a PC graphics app. Clearly the Android OS is meant to use densities to try and give the user a good experience independent from the actual device screen size and resolutions. However when I give the command to set pixel x,y then it would be nice to actually have pixel x,y set and not have the system override my coordinates - is it possible to override the system to set pixel x,y?
For instance, if the screen is set for 320x480 (G1 or Hero) it works fine - but on a tablet(IMX515) with screen 800x600 the graphics are always stretched horizontally.
I have tried setting differing densities of Bitmap and Canvas but nothing works - on the tablet they are always stretched to fill the width of the screen.
I have also tried in Manifest
<supports-screens android:anyDensity=”true” />
.
Here are some snippets of code based on a SurfaceView:—
(1) In the Bitmap create and setup (screenWidth, screenHeight are from metrics):-
backBitmap=Bitmap.createBitMap(screenWidth,screenHeight,Bitmap.config.ARGB_8888);
//backbitmap.setDensity(160)
backCanvas=new Canvas(backBitmap)
//backCanvas.setDensity(160);
.
(2) In the drawing routine:-
paint.setStyle(Paint.Style.FILL);
paint.setColor(Color.RED);
backCanvas.drawCircle(50,50,30,paint);
.
(3) In the Canvas onDraw method:-
protected void onDraw(Canvas canvas){
if (drawingFlag==true){
// canvas.setDensity(160)
canvas.drawBitmap(backBitmap,0,0,null);
}
}
.
.
* Solution ******
Its amazing how sloppy I was - I had been working with Media Player and left the following code in when the SurfaceView was created:-
holder=mySurfaceView.getHolder();
holder.setFixedSize(320,480);
This was forcing the drawing into the 320x480 then scaling across the screen.
Changing as below fixed problem
holder.setFixedSize(800,600)
. . * Solution ** Its amazing how sloppy I was - I had been working with Media Player and left the following code in when the SurfaceView was created:-
holder=mySurfaceView.getHolder();
holder.setFixedSize(320,480);
This was forcing the drawing into the 320x480 then scaling across the screen. Changing as below fixed problem
holder.setFixedSize(800,600)