Android Question Monospace text problem

[davemorris]

Hi, Guys

I can't get monospace working, the number widths are changing

I have a simple countdown timer showing minutes and seconds i.e. simple MM:SS format and so it looks like a standard clock the numbers all need to be the same width.

I am using a started Label view and setting its Text Property to MONOSPACE , Horizontal alignment = CENTER_HORIZONTAL.

However, as it counts down the MM:SS jumps about slightly as the number width changes. Its not a big deal but it does not look good..

Can anyone give me a few pointers what I am doing wrong.

Kind regards
Dave Morris

 

[William Lancee]

If you haven't set the alignment to "RIGHT', the default is center and when the number of characters goes from 5 to 4 the position shifts.
(Hint: caste the label to B4XView and use lblx.SetTextAlignment("CENTER", "RIGHT"))

 

[William Lancee]

Otherwise it works fine for me with code below

Private Sub B4XPage_Created (Root1 As B4XView)
    Root = Root1
    Dim lbl As Label
    lbl.initialize("")   
    Dim lblx As B4XView = lbl
    lblx.Font = xui.CreateFont(Typeface.MONOSPACE, 25)
    lblx.SetColorAndBorder(xui.Color_White, 1dip, xui.Color_Black, 5dip)
    lblx.SetTextAlignment("CENTER", "RIGHT")

    Dim fw As Float = 500dip
    Dim fh As Float = 100dip
    Root.AddView(lblx, Root.Width / 2 - fw /2, Root.Height / 2 - fh / 2, fw, fh)
    
    For i = 0 To 10000
        Dim mins As Int = Rnd(0, 60)
        Dim secs As Int = Rnd(0, 60)
        lblx.Text = NumberFormat2(mins, 0, 0 ,0, False) & ":" & NumberFormat2(secs, 2, 0 ,0, False) & "             "               'note padding to right
        Sleep(1000)
    Next

End Sub

 

[davemorris]

Hi William

Thanks for your input.

However, I tend to prefer Designer for my forms and the MonoSpace is insert there - I did try Casting the label view to B4XView in the B4XPage_Created and switching fonts but could not get it to work.

However, my concern is the Monospace font - I assume it is all the same spacing (i.e. '1' is the same width as '8'), However the WYSIWYG Designer shows it as proportionally spaced.

Show I use another font or should I build the text on-the-fly as you have shown in your example.

Kind regards
Dave

 

[klaus]

How and where does it jump ?
How do you setup the text in the Label ?
Can you post a small project showing the problem ?

I made a small test program and it looks OK for me.

 

[William Lancee]

It makes no difference whether you use the designer or code generated labels. They both work as expected (see @klaus example)

In designer you changed alignment to center. You have to change it to RIGHT,
otherwise single digit minutes will make the display jump. If you use designer you don't need to use the B4XView casting.

You said...

I am using a started Label view and setting its Text Property to MONOSPACE , Horizontal alignment = CENTER_HORIZONTAL.

 

[davemorris]

Hi
I tried Klaus's code and the number still jumps about the centre point - (I did have to adjust the SDK version to 35 - if that makes a difference).

I did make a short video (MP4 format) but I cannot see how to insert it in the Post. I see William inserted a video, so there must be a way.

Regards
Dave

 

[klaus]

Well, my device is an 'old' one, Samsung Galaxy S10 with Android 12.
I do not know if something has changed in newer Android versions or if it depends on the phone manufacturer.