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

[omarruben]

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

 

[Erel]

How does the content change? Post a screenshot of the actual UI.

 

[Peter Simpson]

I take it that your question relates to the imageview and two of the three labels?

 

[omarruben]

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

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

 

[Sandman]

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)?

 

[omarruben]

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

 

[mcqueccu]

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.

 

[omarruben]

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

 

[Andrew (Digitwell)]

I would add the variable items (lblQuestion onwards) to a CustomListView.

You can use the component I created to solve this problem.

[B4X] [SOLVED] xCustomListView Text Padding question

I'm using a customlistview to display formatted text using clv.AddTextItem I use clv.getPanel to set the background to white. The problem is that that the text is too close to the edges. Does anyone known a simple way to add some more padding to this text I can add space to the top and...

www.b4x.com

It will auto size based on contents.

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

       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

 

[Mahares]

I have taken this from working code, but simplified

Looks like an interesting concept, but can be more helpful if a working project is included to illustrate and tie all these snippets together.

 

[Andrew (Digitwell)]

Looks like an interesting concept, but can be more helpful if a working project is included to illustrate and tie all these snippets together.

True. If I get the time this week. I'll see what I can knock up.

 

[Andrew (Digitwell)]

Here is a sample project.

 

[Soheyl]

Here is a sample project.

I change the text and it doesn't work.
If this thread is alive, have a look at the attached example project

Cheers

 

[DonManfred]

If this thread is alive

No, it isn´t. You should never post in existing threads.
Create a new thread for any Issue you have.

 

[Andrew (Digitwell)]

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)

Non-English characters and MeasureMultilineTextHeight in API28

Hi, StringUtils MeasureMultilineTextHeight working perfect on English and any other language on API-26 but after changing target API to 28, English is measured correctly while Arabic is not test project attached - i think it's related to LineSpacing reducing line spacing to 0.85 in...

www.b4x.com

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

 

[Andrew (Digitwell)]

I have created a new example which fixes the problem @Soheyl identified with a bit of an explanation.

Resizing Text Control Custom View - Set text control size based on text - Non Latin Text fix

There are many occasions when you need to have multiple labels which all size themselves to their contents and also align with each other with no space. The solution to this is to use MeasureMultiLineText within the StringUtils Library. To make this easy to use I created a CustomView...

www.b4x.com