Android Question Measure text

[ykucuk]

I'm creating a panel for each line received from a web service. Within this panel, I have `BBCodeView1`. Based on the length of the incoming text, I need to calculate the text height, adjust the panel's height accordingly, and then load it onto a `customlistview`.

From examples I found in the forums, I use the following code to calculate the height:

Dim h As Int = BBCodeView1.Paragraph.Height / Helper.TextEngine.mScale + BBCodeView1.Padding.Top + BBCodeView1.Padding.Bottom

Then, I set the height of my panel using the computed `h` variable with this code:

PanelInput.AddView(PanelHe, 0, yIndex, PanelBox.Width, h)
yIndex = yIndex + PanelHe.Height
PanelInput.SetLayoutAnimated(0, PanelInput.Left, PanelInput.Top, PanelInput.Width, PanelHe.top + PanelHe.Height + 2dip)
PanelBox.SetLayoutAnimated(0, PanelBox.Left, PanelBox.Top, PanelBox.Width, PanelHe.top + PanelHe.Height + 2dip)

However, I'm facing issues (as attached). I know I'm making a mistake somewhere, but I can't figure out what I'm doing wrong. I'd appreciate your assistance.

If Rel_Users_Expertises.Size >0  Then
        Dim PanelTitle As B4XView = xui.CreatePanel("PanelTitle")
       PanelTitle.SetLayoutAnimated(0,0,0,lstvForm.AsView.Width*0.9,GetDeviceLayoutValues.Height*0.07)
       lstvForm.Add(PanelTitle,"")
       Dim lbl As Label
       lbl.Initialize("")
       PanelTitle.AddView(lbl,lstvForm.AsView.Width*0.05,0,PanelTitle.Width,PanelTitle.Height)
       lbl.Color= Colors.Transparent

        Helper.ChangeTitle("Expertises",Colors.Black,20,lbl, "ALIGN_LEFT", Helper.FontBold,"0xF5B0","2")

        Dim PanelBox As B4XView = xui.CreatePanel("PanelAction")

        PanelBox.SetLayoutAnimated(0,0,0,lstvForm.AsView.Width*0.9, (GetDeviceLayoutValues.Height*0.1)  )

        Dim PanelInput As B4XView = xui.CreatePanel("")
        PanelInput.SetColorAndBorder(Colors.White,1dip, 0xFFE6E6E6,PanelBox.Height*0.01)
        PanelBox.AddView(PanelInput,lstvForm.AsView.Width*0.05,0,lstvForm.AsView.Width*0.9,PanelBox.Height)

        Dim y As Int=0
        Dim yIndex As Int=0

'####### panel inside BBCodeView1 for each line
        For Each colRel_Users_Expertises As Map In Rel_Users_Expertises
            Dim xx As String ="[Alignment=Left][color=#000000][Font=MyIconFont][/Font][/color][b][Font=MyFont]" & colRel_Users_Expertises.Get("ExpertiseID") & "[/Font][/b]"
            Dim PanelHe As B4XView = xui.CreatePanel("")
            PanelHe.LoadLayout("LayoutBBView")
            BBCodeView1.TextEngine = Helper.TextEngine
            BBCodeView1.sv.Color= Colors.Transparent
            BBCodeView1.Text=xx
            Dim h As Int = BBCodeView1.Paragraph.Height / Helper.TextEngine.mScale + BBCodeView1.Padding.Top + BBCodeView1.Padding.Bottom+10dip
            PanelInput.AddView(PanelHe,0,yIndex ,PanelBox.Width,h)
      PanelHe.Color= Colors.White
            yIndex=yIndex +PanelHe.Height
            PanelInput.SetLayoutAnimated(0,PanelInput.Left,PanelInput.Top,PanelInput.Width,PanelHe.top +PanelHe.Height+2dip)
            PanelBox.SetLayoutAnimated(0,PanelBox.Left,PanelBox.Top,PanelBox.Width,PanelHe.top +PanelHe.Height+2dip)
            y=y+1
            If y>0 Then
                PanelInput.AddView(Helper.AddLine(lstvForm.AsView.Width,Colors.LightGray),0, (PanelHe.Top+PanelHe.Height+1dip),PanelInput.Width,2dip)
                yIndex=yIndex +2dip
            End If
        Next
####### panel inside BBCodeView1 for each line
        lstvForm.Add(PanelBox,"")
    End If

 

[Erel]

I don't think that this is the right approach.

BBCodeView is a scrollable element. Either use a single one without CLV or don't use BBCodeView. You will run into performance problems once the list becomes longer.
If you do want to combine BBCodeView and CLV then use this: https://www.b4x.com/android/forum/threads/b4x-bblistitem-bctextengine-inside-clv.131123/#content

 

[ykucuk]

I don't think that this is the right approach.

BBCodeView is a scrollable element. Either use a single one without CLV or don't use BBCodeView. You will run into performance problems once the list becomes longer.
If you do want to combine BBCodeView and CLV then use this: https://www.b4x.com/android/forum/threads/b4x-bblistitem-bctextengine-inside-clv.131123/#content

Could you tell me alternatives without using BBCodeView but measure text height will work fine ?

 

[William Lancee]

I have used B4XListItem, but as @Erel says, you run into performance problems. It requires BCTextEngine to render the text, before knowing its size.
That makes sense considering the complex content that B4XCodeView s can have.
(https://www.b4x.com/android/forum/threads/b4x-bblistitem-bctextengine-inside-clv.131123/#content)

If the text is simple, like your images suggest, you can use this:
https://www.b4x.com/android/forum/threads/b4x-measuremultilinetextheight.147933/

 

[Mahares]

Could you tell me alternatives without using BBCodeView

Another option to look at judging from your snapshot to look at is xClv Nested. You can use the clv.AdTextItem. Each base item panel expands to accomodate all the text regardless of its length. You don't have to measure anything.

 

[ykucuk]

Another option to look at judging from your snapshot to look at is xClv Nested. You can use the clv.AdTextItem. Each base item panel expands to accomodate all the text regardless of its length. You don't have to measure anything.

Correct, but I want to put in the panel for better design.

 

[Mahares]

Correct, but I want to put in the panel for better design.

Even with clv.AddTextItem you can still change the item panels background color, corner radius, border. You can also fancy the text with csbuilder. Here is an example

But, do what pleases you and what is best for your.

 

[ykucuk]

Even with clv.AddTextItem you can still change the item panels background color, corner radius, border. You can also fancy the text with csbuilder. Here is an example

View attachment 145833
But, do what pleases you and what is best for your.

Could you give me sample code for doing such list with AddTextItem

 

[Mahares]

Could you give me sample code for doing such list with AddTextItem

Here is an example of a list populating an xClv using AddTextItem. The example does not address Clvnested, but you can use the principle if you choose to use Clvnested in your project. It is meant to show you that you can change panel and label properies even when you use clv1.AddTextItem:

Dim MyList As List
    MyList.Initialize   
    MyList = Array ("Agricultural Litigation", "Agricultural Tort Claims", "Food Labeling And Inspection",  _
    "Perishable, Agricultural Commodities Act Law", "Plant Variety Protection", "Seed Law", "Bank Collections")
    MyList.SortCaseInsensitive(True) 
    For i=0 To MyList.Size -1
        clv1.AddTextItem(MyList.Get(i), MyList.Get(i))
        Dim p As B4XView = clv1.GetPanel(i)  'the height of panel is automatically adjusted to text length
        Dim l As B4XView=p.GetView(0)
        l.SetTextAlignment("CENTER", "CENTER")
        l.TextColor=xui.Color_Red
'        l.SetColorAndBorder(xui.Color_Cyan,4dip,xui.Color_magenta,5dip)  'you can also use this line
        p.SetColorAndBorder(xui.Color_cyan, 4dip, xui.Color_Blue, 6dip)
    Next