Android Question how to make views align vertically and shrink base on dynamic text content?

omarruben

Active Member
Licensed User
Longtime User
Hi, I have a stack of views: imageview, label, and a few checkboxes that load its content dynamically (check the picture), how I can align them vertically ? avoiding blank spaces ? shrinking the height of each
 

Attachments

  • 2021-08-08 21_01_17-questionx - (mvctest) Visual Designer.jpg
    2021-08-08 21_01_17-questionx - (mvctest) Visual Designer.jpg
    17.3 KB · Views: 307

omarruben

Active Member
Licensed User
Longtime User
My solution is not elegant, but it works, I am wondering if there is a better way than this:

after loading the content of each label and checkbox from a json file (could be any text, any length) I call the sub RecalculateHeightViews

B4X:
Sub RecalculateHeightViews()
    Dim su As StringUtils
    Dim temp As Int
   
    ' recalculate new heights
    lblQuestion.height = su.MeasureMultilineTextHeight(lblQuestion,lblQuestion.Text)
    chBox1.height = su.MeasureMultilineTextHeight(chBox1,chBox1.Text)+ 10
    chBox2.height = su.MeasureMultilineTextHeight(chBox2,chBox2.Text)+ 10
    chBox3.height = su.MeasureMultilineTextHeight(chBox3,chBox3.Text)+ 10
    chBox4.height = su.MeasureMultilineTextHeight(chBox4,chBox4.Text)+ 10
    chBox5.height = su.MeasureMultilineTextHeight(chBox5,chBox5.Text)+ 10
    lblHint.height = su.MeasureMultilineTextHeight(lblHint,lblHint.Text)
   
    ' recalculate new vertical positions
    temp = B4XImageView1.mBase.Top+B4XImageView1.mBase.Height
    temp = temp +15
    lblQuestion.Top = temp
    temp = temp + lblQuestion.Height + 15
    chBox1.Top = temp
    temp = temp + chBox1.Height + 5
    chBox2.Top = temp
    temp = temp + chBox2.Height + 5
    chBox3.Top = temp
    temp = temp + chBox3.Height + 5
    chBox4.Top = temp
    temp = temp + chBox4.Height + 5
    chBox5.Top = temp
    temp = temp + chBox5.Height + 5
    lblHint.Top = temp
   
End Sub
 

Attachments

  • Screenshot_20210809-074340.png
    Screenshot_20210809-074340.png
    301.3 KB · Views: 284
Upvote 0

Sandman

Expert
Licensed User
Longtime User
loading the content of each label and checkbox from a json
So what you're saying is that the text in the labels isn't something known beforehand? That's why you don't already know the height, and that's why you want to calculate the new height so you give all views the correct height (without getting clipped or too much empty space around it)?
 
Upvote 0

omarruben

Active Member
Licensed User
Longtime User
So what you're saying is that the text in the labels isn't something known beforehand? That's why you don't already know the height, and that's why you want to calculate the new height so you give all views the correct height (without getting clipped or too much empty space around it)?
yes!! you got it
 
Upvote 0

omarruben

Active Member
Licensed User
Longtime User
You have still not posted your UI as suggested by Erel in post #2.

My small input is try and use customlistview or scrollview so that in case you calculate the heights and its longer than your users screen, the questions can be able to scroll.
it is posted on the #4
 
Upvote 0

Andrew (Digitwell)

Well-Known Member
Licensed User
Longtime User
I would add the variable items (lblQuestion onwards) to a CustomListView.

You can use the component I created to solve this problem.
It will auto size based on contents.

to add the item to a customListView you will need to do something like:


B4X:
       Private p As B4XView = CreateSizingItem(clv.AsView.Width,txt)
        clv.Add(p,act)



private Sub CreateSizingItem(wid As Int, txt as string) As B4XView
    Private p As B4XView = xui.CreatePanel("")
    '    The height in Addview is unimportant as it will automatically resize
    Root.AddView(p,0,0,wid,300dip)

     'Contains a single item   Private RTCS As ResizingTextComponent
    p.LoadLayout("ResizingTextComponentSingle")
    p.RemoveViewFromParent
    
    ' Set up some other stuff
    RTCS.SetPadding(20dip,10dip,20dip,10dip)
    RTCS.SetBackColor(Globals.gcol_midcol)
    RTCS.SetCorners(10dip)

    ' CSBuilder code removed for clarity
    RTCS.Text = txt
    
    ' Resize the containing panel
    p.Height = RTCS.GetHeight
    Return p
End Sub

I have taken this from working code, but simplified
I use CSstring to control the colour and font, i removed this code for clarity
 
Upvote 0

Andrew (Digitwell)

Well-Known Member
Licensed User
Longtime User
Hi all,
I have tried this on my phone, an Pixel 6 running CalyxOS and I can see the problem. When a large font is generated then the last line is clipped.
It seems that the problem only happen on certain phones.

I have found a solution (on the forum)

- turn off fallback line spacing.

This will work.
I will update the sample program and add create a new Tutorial post which incorporates the solution.
 
Upvote 0

Andrew (Digitwell)

Well-Known Member
Licensed User
Longtime User
Upvote 0
Top