Android Question Canvas draw position, how to align?

Sub7

Active Member
Licensed User
Longtime User
Hello, i'm looking for some tutorial or advice on how work with views added from code, most times i use the designer and designer script to build the layout so i never had big problems.
Now that i need to use a canvas i'm having some good troubles to align and set the position of the drawed text correctly.
For example i added an imagview using the designer and then set his position and properties with designer script.
Later using the below code i want draw some text over imageview1 in a exact position which will be the same in all screeens.

Which is the best pratice to achieve this? im getting really lost with X and Y.

The imageview is a template file of a business card, the user can input some text and save the output.

B4X:
Dim cnv1
cnv1.initialize(imageView1)
cnv1.DrawTextRotated("Text 1",250,270, Typeface.MONOSPACE,12,Colors.White,"RIGHT",4)
cnv1.DrawTextRotated("Text 2",???,???, Typeface.MONOSPACE,12,Colors.White,"RIGHT",4)
activity.invalidate

Thank you so much
 

sorex

Expert
Licensed User
Longtime User
I guess the easiest method is to always draw to the same location but just reposition the imageview that holds the canvas.
 
Upvote 0

sorex

Expert
Licensed User
Longtime User
well, I don't know what exactly you're trying to do so it's hard to guess ;)
 
Upvote 0

Sub7

Active Member
Licensed User
Longtime User
Sorry,
i have several view in one activity, im trying tro drawText over one of them, i need to find a way so that the text get draw always in the same position on different devices.
 
Upvote 0

klaus

Expert
Licensed User
Longtime User
cnv1.DrawTextRotated("Text 1",250,270, Typeface.
In this line:
First point:
You should use dip values and not absolute pixel values.
Second point:
Are 250,270 screen coordinates or ImageView coordiates ?
If you draw on a view the coordinates are relative to the upper left corner of this view and not to the Activity !

Or post your project as a zip file or at leat a smaller one showing the problem so we could have a look at it.
 
Upvote 0

sorex

Expert
Licensed User
Longtime User
if it is an imageview you can draw on top of it.

if not you can

put an imageview on top of if based on .top & .left from the other view

or

put that view in a panel and put an imageview at the same offset .top=0 .left=0 then it's always at the same spot.
 
Upvote 0

Sub7

Active Member
Licensed User
Longtime User
Sorry for not beeing clear, in attachment an example.
I need that the draw text alway fit inside the imageview in a fixed position and works on different screens, in the example i draw the text over the red panel because i dont know ho to align over on the imageview, or better, by messing with values i can align the text but then on different screen size it get messed up.

ty
 

Attachments

  • test_canvas.zip
    8.1 KB · Views: 189
  • result.png
    result.png
    10.6 KB · Views: 170
Last edited:
Upvote 0

sorex

Expert
Licensed User
Longtime User
B4X:
cnv.Initialize(ImageView1)

is the way to go then you draw inside the picture.
 
Upvote 0

sorex

Expert
Licensed User
Longtime User
if you draw the green lines by code you have more control over it since you can calculate the gaps etc...
 
Upvote 0

Sub7

Active Member
Licensed User
Longtime User
if you draw the green lines by code you have more control over it since you can calculate the gaps etc...
That was just as example, the file loaded inside the imagewview is more complex, is a business card with logos and stuff.
I think the problem is here: "If you draw on a view the coordinates are relative to the upper left corner of this view and not to the Activity !"

So i have tried:
B4X:
cnv1.DrawTextRotated("Test row",10dip,250, Typeface.MONOSPACE,12,Colors.White,"LEFT", 4)
which looks okay in my phone, not okay in other phones.

dunno.
 
Upvote 0

Sub7

Active Member
Licensed User
Longtime User
This almost works :)

B4X:
cnv1.DrawTextRotated("ROW 1",10%x,ImageView1.Top, Typeface.MONOSPACE,12,Colors.White,"LEFT", 4)
cnv1.DrawTextRotated("ROW 2",10%x,ImageView1.Top + 20dip, Typeface.MONOSPACE,12,Colors.White,"LEFT",4)
cnv1.DrawTextRotated("ROW 3",10%x,ImageView1.Top + 30dip, Typeface.MONOSPACE,12,Colors.White,"LEFT",4)
 
Upvote 0

sorex

Expert
Licensed User
Longtime User
in fact, the code could always be the same even without the use of percentages.

just draw it on the original size and then resize to what it needs to be, I made a sliding puzzle that way and it worked fine on both my phone and tablet with completely different resolutions and aspect ratios.
 
Upvote 0

Sub7

Active Member
Licensed User
Longtime User
Without percentages i get everything screwed up on both devices (phone/tablet), even the last code does not works perfectly, the position on the two devices is similar but different.
 
Upvote 0

sorex

Expert
Licensed User
Longtime User
that's because 10% is not right. you should calculate that value based on the screen size and the original size of your object.
 
Upvote 0
Top