Android Question Correct label scaling

[Blueforcer]

Im building my entire GUI via code.
But i dont find the correct way to scale everything right so it will look the same on any device. In this Case i mean the positioning and the textsize
I searched the Forum for some easy to use tips, but nothing worked. But I guess that I just have not understood it yet...

This is my Code for a label

Dim Name3 As Label
Name3.Initialize("ScreenButtonLabel")
Name3.Gravity=Gravity.CENTER
Name3.TextColor=xui.Color_Black
Name3.Text=ButtonMap.Get("Name3")

Name3.TextSize=22
mBase.AddView(Name3,0,mBase.Height-45,mBase.Width,30dip)

For Example:

- 160 DIP

- 320 DIP

 

[Erel]

Im building my entire GUI via code.

This is a big mistake.

You are missing dip units:

mBase.AddView(Name3,0,mBase.Height-45dip,mBase.Width,30dip)

 

[Blueforcer]

This is a big mistake.

Not really. The complete GUI is predefined via a script which is read in at runtime. It is not even possible to use the designer.

You are missing dip units:

mBase.AddView(Name3,0,mBase.Height-45dip,mBase.Width,30dip)

Doesn't solve the problem

 

[Andrew (Digitwell)]

Why not resize the label text to fit the available width at run time?

See this link : https://www.b4x.com/android/forum/t...e-plus-padding-in-a-loop-for-all-views.43284/

I would however agree with Erel, why not use designer layouts with custom views?

You can still do everything at run time and things become re-useable and much easier in the long run.

For example,

This screen from an app I have developed contains 3 custom views ,outlined in red, and 2 customlistviews outlined in green. (one scrolling horizontal and one scrolling vertical.
All components are dynamic dependant on the logged in user.

• The dear user, alert, section only appears if there is an alert to display.
• The Number of custom view buttons in the middle only appear if the user has permission to perform that function.
• The news items at the bottom only appear if there is news in the database.

The main layout look like this:

There are sub layouts for news and buttons and alert sections.

All of this is built dynamically at Runtime.

The text and other components automatically resize, using anchors etc, to fit the appropriate screen, Text uses a version of the code linked to resize itself. It is a little more complciated as I need to ensure that all the text is the same size.

 

[Blueforcer]

Again
The complete GUI is predefined via a script which is read in at runtime.
And with complete i mean complete: Ammount of views, Positions, structure of a view, textsize, Anchors, allignment and so on.
There is nothing that I could plan in advance by designer.
You can't make me believe that this is only possible with the designer. I don't know any other language where you can't do everything in the code.

 

[klaus]

Can you post your project, there must be something wrong in your code.
How do you adapt the values to the different screen sizes?
How do you adapt text sizes ?

 

[Andrew (Digitwell)]

Again
The complete GUI is predefined via a script which is read in at runtime.
And with complete i mean complete: Ammount of views, Positions, structure of a view, textsize, Anchors, allignment and so on.
There is nothing that I could plan in advance by designer.
You can't make me believe that this is only possible with the designer. I don't know any other language where you can't do everything in the code.

No, you can do it in code, I just think it is just simpler with the designer.

In that case, just take a look at the link I provided which auto sizes text to the available label size. This should solve the too big text problem. There are other links in the forum on sizing text as well.

 

[Blueforcer]

Can you post your project, there must be something wrong in your code.

Sorry i cannot provide our project to the public.

How do you adapt text sizes ?

Thats the question right now

In that case, just take a look at the link I provided which auto sizes text to the available label size. This should solve the too big text problem. There are other links in the forum on sizing text as well.

I dont think this is what i need. Have a look at my screenshots. The Textsize needs to be like the first picture. If i would use AutoResize, the textsize will be different on any screensize. Sure it will fit at any time. But the ratio of text to button must always be the same

 

[Andrew (Digitwell)]

yes,

which is why I said,

It is a little more complicated as I need to ensure that all the text is the same size.

I would suggest you start with the resizing to get it to fit and then work from there. As @klaus suggested, a sample app would be useful to be more helpful.

 

[klaus]

Without seeing your code, not knowing what exactly you have done, it is impossible to help you.
In your code snippet I see: mBase.AddView(Name3,0,mBase.Height-45,mBase.Width,30dip)
Which looks like you are using a CustomView.
Then, how do you handle this custom view?

 

[LucaMs]

Without seeing your code, not knowing what exactly you have done, it is impossible to help you.
In your code snippet I see: mBase.AddView(Name3,0,mBase.Height-45,mBase.Width,30dip)
Which looks like you are using a CustomView.
Then, how do you handle this custom view?

I state that I have only read this post by Klaus...

I see there a 30dip but also a 45 no-dip.

 

[klaus]

I see there a 30dip but also a 45 no-dip.

He was already told this, but he said in post #3 that it does not solve the problem.

 

[Blueforcer]

Short Extraction of the necessary parts.
I only use the "customview" from older versions. But indeed i could also use standard classes for this.
I think in this case it make no difference, since im not using the designer

'B4XPage

    For Each element As Map In ScreenData.Values
        Dim pos() As String = Regex.Split(",",element.Get("Pos"))
        Dim p As Position
        p.X=(Root.Width*(pos(0)/10000))
        p.Y=(Root.Height)*(pos(1)/10000)
        p.Width=(Root.Width)*(pos(2)/10000)-(p.X)
        p.Height=(Root.Height)*(pos(3)/10000)-(p.Y)

        If element.ContainsKey("Type") Then
            Select  element.Get("Type")
                Case "ScreenButton"
                    Dim panel As Panel
                    panel.Initialize("ScreenButton")
                    Root.AddView(panel,p.X+XOffset,p.Y,p.Width,p.Height)
                    Dim l As Label: l.Initialize("")
                    Dim sb As SceenbuttonView
                    sb.Initialize(Me,"")
                    sb.DesignerCreateView(panel,l,CreateMap("Nr":element.Get("Nr")))

'SceenbuttonView Class

Public Sub DesignerCreateView (Base As Object, Lbl As Label, Props As Map)
    mBase = Base
    Tag = mBase.Tag
    mBase.Tag = Me
    buttonNr=Props.Get("Nr")
    Build
End Sub

Sub Build()
    ButtonMap.Initialize
    ButtonMap = DOM.Screenbuttonmap.Get(buttonNr)

If ButtonMap.ContainsKey("Picture") Then
        Dim picfile As String = DOM.ImageListmap.Get(Functions.getInnerText(ButtonMap.Get("Picture")))
        If File.Exists(Main.PicFolder,picfile) Then
            Picture=xui.LoadBitmapResize(Main.PicFolder,picfile,mBase.Width,mBase.Height,True)
            mBase.SetBitmap(Picture)
        Else
            mBase.Color=xui.Color_Red
        End If
    End If

    If ButtonMap.ContainsKey("Name3") Then
        Dim l As Label
        l.Initialize("ScreenButtonLabel")
        l.Gravity=Gravity.CENTER
        l.TextColor=xui.Color_Black
        If ButtonMap.ContainsKey("Name3") Then
            l.TextSize=ButtonMap.get("TextSize")
        Enf ig
        If IsNumber(ButtonMap.Get("Name3")) Then
            l.Text=Language.getText(ButtonMap.Get("Name3"))
        Else
            l.Text=ButtonMap.Get("Name3")
        End If

        mBase.AddView(l,0,mBase.Height-45dip,mBase.Width,30dip)
    End If
End Sub

 

[klaus]

How do you define the values in ScreenData.Values ?
How do you set these values depending on the screen sizes and resolutions ?
And especially for TextSize in l.TextSize=ButtonMap.get("TextSize") ?
I am afraid that you use dip values for the text sizes.
Text sizes are independent of the screen resolution.
Again, just with partial code snippets, very difficult to give any concrete advice.

 

[Blueforcer]

ScreenData gets the data from a XML. There are no dip values.
e.g

<Screen Nr="1">
        <!-- Text: Übersicht -->
        <Show Nr="0">
            <Type>Text</Type>
            <Nr>1</Nr>
            <Pos>0,0,7875,470</Pos>
        </Show>
        <Show Nr="1">
            <Type>ScreenButton</Type>
            <Nr>0</Nr>
            <Pos>0,470,1667,2250</Pos>
        </Show>
        <Show Nr="2">
            <Type>ScreenButton</Type>
            <Nr>1</Nr>
            <Pos>1667,470,3333,2250</Pos>
        </Show>
        <Show Nr="3">
            <Type>ScreenButton</Type>
            <Nr>80</Nr>
            <Pos>3333,470,5000,2250</Pos>
        </Show>
        <Show Nr="4">
            <Type>ScreenButton</Type>
            <Nr>81</Nr>
            <Pos>5000,470,6667,2250</Pos>
        </Show>
        <Show Nr="5">
            <Type>ScreenButton</Type>
            <Nr>82</Nr>
            <Pos>6667,470,8333,2250</Pos>
        </Show>
        <Show Nr="8">
            <Type>ScreenButton</Type>
            <Nr>83</Nr>
            <Pos>8333,470,10000,2250</Pos>
        </Show>

    </Screen>

<ScreenButton Nr="8">
        <Name3>2020</Name3>
        <FontSize>10</FontSize>
        <ScreenNr>32</ScreenNr>
        <Picture>meldung0</Picture>
        <PictureActive>meldung1</PictureActive>
        <Offset>5</Offset>
</ScreenButton>

Currently we are porting our WinCE Application to B4a. In WinCE there was only a fix resolution.

I think now i give every information on how to get the textsize,but i think its a general Question

 

[Blueforcer]

Just found this one, will this solve my problem?
[Problem] Different devices different text sizes | B4X Programming Forum
Where BaseInches set to the inches where my textsize looks like it should?

 

[Jeffrey Cameron]

FWIW: I had a similar need for a project some time ago and that's basically the same method I use, but I don't use a constant value. I create a label and autosize the text to make sure it fits then whatever point size I came up with from the autosize I use the ratio of that to the original point size as a scaling factor when creating the UI.

 

[Blueforcer]

Ok this scaling factor solves the textsize problem.
What about the positioning?
Currently im using dip values

mBase.AddView(Name3,0,mBase.Height-45dip,mBase.Width,30dip)

But the label moves up or down depending on the device. Does it also needs a scaling factor?

240DIP

160DIP

 

[Andrew (Digitwell)]

you may find this thread useful.

How to determine scale and dpi?

I have a method to resize my screen views and this works for all devices that have 160dpi or scale = 1. Is there a way through code to determine the dpi / scale for a particular device, such as 240dpi, scale 1.5?

www.b4x.com