Android Question Correct label scaling

Blueforcer

Well-Known Member
Licensed User
Longtime User
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
B4X: 
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

 

Attachments

  • 1630014456409.png
    476.1 KB · Views: 183
Last edited:
Sort by date Sort by votes

Andrew (Digitwell)

Well-Known Member
Licensed User
Longtime User
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.
 
Upvote 0

Blueforcer

Well-Known Member
Licensed User
Longtime User
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.
 
Upvote 0

Andrew (Digitwell)

Well-Known Member
Licensed User
Longtime User

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.
 
Upvote 0

Blueforcer

Well-Known Member
Licensed User
Longtime User
klaus said:
Can you post your project, there must be something wrong in your code.
Click to expand...
Sorry i cannot provide our project to the public.
klaus said:
How do you adapt text sizes ?
Click to expand...
Thats the question right now


Andrew (Digitwell) said:
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.
Click to expand...
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
 
Upvote 0

Andrew (Digitwell)

Well-Known Member
Licensed User
Longtime User
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.
Click to expand...

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.
 
Upvote 0

klaus

Expert
Licensed User
Longtime User
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?
 
Upvote 0

LucaMs

Expert
Licensed User
Longtime User
I state that I have only read this post by Klaus...

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

Blueforcer

Well-Known Member
Licensed User
Longtime User
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
B4X: 
    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
B4X: 
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
 
Upvote 0

klaus

Expert
Licensed User
Longtime User
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.
 
Upvote 0

Blueforcer

Well-Known Member
Licensed User
Longtime User
ScreenData gets the data from a XML. There are no dip values.
e.g
XML: 
<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>


XML: 
<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
 
Last edited:
Upvote 0

Jeffrey Cameron

Well-Known Member
Licensed User
Longtime User
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.
 
Upvote 0

Blueforcer

Well-Known Member
Licensed User
Longtime User
Ok this scaling factor solves the textsize problem.
What about the positioning?
Currently im using dip values
B4X: 
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
 
Upvote 0

Andrew (Digitwell)

Well-Known Member
Licensed User
Longtime User
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
 
Upvote 0
You must log in or register to reply here.

Similar Threads

  • Article
Android Code Snippet [B4X] SetPanelCornerRadius only for certain corners
Replies
3
Views
220
LucaMs
  • Question
Android Question Label Height and top vertical spacing
Replies
3
Views
434
klaus
D
Games fonts with outline
2
Replies
21
Views
4K
emexes
E
L
  • Question
Android Question label not showing in customlistview
Replies
3
Views
948
leitor79
L
F
  • Question
Android Question Calculate the label height before ading to Custom list view
Replies
2
Views
2K
frenkipi
F
Menu
Log in
Register
Cookies are required to use this site. You must accept them to continue using the site. Learn more…