Android Question How can i implement an FAQ, using text that expand and collapse?

[ema01]

I have tried the Custom Expandable listview discussed here
https://www.b4x.com/android/forum/threads/custom-expandable-listview.15986
And it's more or less what i'm looking for.

collapsed element is the question, click on it and it expands with the answer.

However there are a couple of bugs and nuances with this library:

-I was able to collapse to the desired height because i can get the title panel height, however i cannot find how to expand just enought to show the answer because i can't get the label height, only the height of the panel that contains the label that contains the text.
-the various UI elements in the listview have a transparent/semitransparent background. when expanding/collapsing the content to be expanded is immediately rendered and so the text overlaps during transition.. it is "fixed" if the backgrounds are solid colors, but i'd like to avoid that
-if i am closing an element and i am seeing the bottom of the view, or before closing the list is longer than phone screen height, after closing is less than phone screen height, the list will be rendered with the height it would have if it was closed, so it is "cut"

is there another way i can implement this?

 

[Erel]

This is your best option for an expandable list: https://www.b4x.com/android/forum/threads/b4x-xui-expandable-list-based-on-xcustomlistview.86449/

 

[ema01]

Hi erel... i made i mistake in my previous post.
That's the one i used.

Meanwhile, i found a way around most of the issues

this is the layout of the item

Now i can set to the correct height while opening and closing. I also got rid of the issue of text appearing behind while opening and closing. Downside is that the text is stretched while opening, closes immediately. At this point it's this or i get rid of the animation. Good enough.

The only real issue left is that the last elements are cut while collapsing, because the size of the expandable list changes immediately, while the content takes some time to move to that position.. i don't know if i you understand what i mean?

lblFaqItemText is view(0) of panel(1)

Sub ExpandItem (index As Int)
   pnlItemExpanded = clvFAQ.GetPanel(index).GetView(1)

   Dim lbl As B4XView = pnlItemExpanded.GetView(0)
   Dim str As StringUtils
   Dim h As Float

   h = clvFAQ.GetPanel(index).GetView(0).Height
   h = h + str.MeasureMultilineTextHeight(lbl,lbl.Text) + 20
   clvFAQ.ResizeItem(index, h)
   clvFAQ.GetPanel(index).Tag = True
   AnimatedArrow(index, 0, 180)
End Sub


Sub CollapseItem(index As Int)
   pnlItemExpanded = clvFAQ.GetPanel(index).GetView(1)
  
   clvFAQ.ResizeItem(index, clvFAQ.GetPanel(0).GetView(0).Height)
   pnlItemExpanded.SetLayoutAnimated(300,pnlItemExpanded.Left,pnlItemExpanded.Top,pnlItemExpanded.Width,0)
   clvFAQ.GetPanel(index).Tag = False
   AnimatedArrow(index, 180, 0)
End Sub

 

[Erel]

The only real issue left is that the last elements are cut while collapsing, because the size of the expandable list changes immediately, while the content takes some time to move to that position.. i don't know if i you understand what i mean?

A possible solution for this is to add a "dummy" item as the last item. It can be transparent.

 

[Erel]

h = h + str.MeasureMultilineTextHeight(lbl,lbl.Text) + 20

This line is wrong. It must be 20dip.