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

E

ema01

Active Member
Licensed User
Longtime User
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?
 
Sort by date Sort by votes
E

ema01

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

Erel

B4X founder
Staff member
Licensed User
Longtime User
ema01 said:
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?
Click to expand...
A possible solution for this is to add a "dummy" item as the last item. It can be transparent.
 
Upvote 0
You must log in or register to reply here.

Similar Threads

N
  • Question
Android Question Smooth collapse/expand of ULV Tree parent
Replies
0
Views
500
noeleon
N
  • Article
B4A Library [B4X] Expander v2 : Expandable CustomListView
Replies
3
Views
4K
epiCode
I
Wish Expand/Collapse Regions
Replies
3
Views
1K
iCAB
I
  • Article
B4A Library [B4X] CLVExpandable - Allows expanding or collapsing xCustomListView items
Replies
11
Views
18K
LucaMs
  • Locked
  • Article
Android Tutorial [B4X] [XUI] Expandable list based on xCustomListView
Replies
9
Views
22K
Erel
Menu
Log in
Register
Cookies are required to use this site. You must accept them to continue using the site. Learn more…