Android Tutorial Lets play with vertical lables!

We'll do this using the Canvas object.

I'm just learning but pretending that I can teach it :)

Download the provided CanvasTest.zip and open it.

What I've done here is to create a panel and then stick a Canvas on it.

Then using the DrawTextRotated method of the Canvas we can make a vertical lable.

The DrawTextRotated method (and all the other methods of the Canvas object) draw on a bitmap.

There doesn't seem to be any easy way to just wipe that bitmap so what I'm doing here is first writing text in black, then remembering that text and before writing new text i'm writing that same text but in white, effectively deleting all the pixels that were written to in black.

We should de-couple it a bit more for example the line:

Canvas1.DrawTextRotated(rememberedText, 0, 0, Typeface.DEFAULT, 20, Colors.White, "LEFT", 90)

is written in two different places with the only difference being the colour.

The colours are an 'enum' (enumeration) so maybe we can use a Long variable to decide if we should paint white or black pixels and then we'd only need that line once.

the 0,0 bit is deciding if there should be 'margin' on the bottom of, or to the left of the text and also depends on the alignment part currently set to "LEFT"

Have a play and come with your own ideas.

The Canvas looks to be mightily powerful!

Try also changing the last number currently set to 90 (degrees) but remember that if you first 'draw' on the canvas and then change it before you have 'cleared' it using white text then you'll have lots of black pixels all over the place :)
 

Attachments

  • CanvasTest.zip
    7.5 KB · Views: 388

IanMc

Well-Known Member
Licensed User
Longtime User
This is better

zup1zo.jpg


Just drawing the same text on the canvas in white leaves little ghost trails, the way to do it is to draw a massive white rectangle the same size as the canvas, that clears it.

Here's the routine:

B4X:
Sub SideWays(text As String)
    Canvas1.Initialize(Panel1) 'this sets the canvas to be the background of Panel1 and to draw on it's bitmap ... I think :)
    'first delete anything already written by writing a big white rectangle on it!
    Dim Rect1 As Rect
    Rect1.Initialize(0, 0, Panel1.Width, Panel1.Height)
    Canvas1.DrawRect(Rect1, Colors.White, True, 1)
    'Then draw the text on the canvas at 90degrees where 'CENTER' is the middle of the panel
    Canvas1.DrawTextRotated(text, Panel1.Width / 2, Panel1.Height / 2, Typeface.DEFAULT_BOLD, 25, Colors.Black, "CENTER", 90)
    'and thusly your panel is your label!
End Sub

I include the test project and you can:

Install directly to your device from this link

Try clicking on the buttons as fast as you like, try long clicking on them and ... can you find the hidden panel?

P.S. It doesn't have to be 90 degrees! (last number in the big long line) and it doesn't have to be text!
Although text is cool :)

What can you do with it? Rotating text labels maybe?

The world is your lobster! (or should that be oyster?)
 

Attachments

  • SideWays.zip
    229.8 KB · Views: 416
Last edited:
Top