Android Tutorial Expandable list based on CustomListView

A cross platform version is available here: https://www.b4x.com/android/forum/t...g-or-collapsing-xcustomlistview-items.106148/

expander.gif



This example uses a slightly modified version of CustomListView to create an expandable list.

Each item in the list is made of two panels. One for the title with the arrow and the other is the expanded panel.
Note that the expanded items height can be different for different items.

The example depends on AnimationPlus and StringUtils libraries.
 
Last edited:

tucano2000

Active Member
Licensed User
Longtime User
Excellent. Very useful.

I found the library to work with the example here => https://www.b4x.com/android/forum/threads/lib-animationplus.21313/


I have a project with intent to use this for the 2 Android and iOS platforms. It might be possible to port to iOS as well.
It seems like the difficulty will be that library that does the animation and especially the customview in design that does not exist for b4i.
 
Last edited:

Erel

B4X founder
Staff member
Licensed User
Longtime User

sseaand

Member
Licensed User
Longtime User
Please tell me why when hide the panel buttons seen in the background? How to fix it?
QYGI.gif
 

sseaand

Member
Licensed User
Longtime User
It happens because there are gaps between the items. Decreasing the dividers height will make it less prominent.

Another option which can work with the layout you posted is to set the divider height to 0 and add a thin panel as the divider to the items layout. Set the panel's background color to grey.
where the divider size is set?
 

Noelkman

Member
Licensed User
Longtime User
Hi there,
a while ago I had started something like this but now there it is. Great!
Situation: I have added a listview in the item container but it instead of scrolling that listview the expanable list is scrolling.
Question: Is this not possible?
 

rboeck

Well-Known Member
Licensed User
Longtime User
Look with the designer; you have here two layouts, the buttons are part of one of them.
 

Erel

B4X founder
Staff member
Licensed User
Longtime User
This code will collapse open items before a new one is expanded:
B4X:
Sub ExpandItem (index As Int)
   For i = 0 To clv1.GetSize - 1
     Dim p As Panel = clv1.GetPanel(i)
     If p.Tag = True Then CollapseItem(i)
   Next
   clv1.ResizeItem(index, ExpandedHeight)
   clv1.GetPanel(index).Tag = True
   AnimatedArrow(index, 0, 180)
End Sub
 

JLS

Member
Licensed User
Longtime User
It happens because there are gaps between the items. Decreasing the dividers height will make it less prominent.

Another option which can work with the layout you posted is to set the divider height to 0 and add a thin panel as the divider to the items layout. Set the panel's background color to grey.

A better way to fix this maybe making the expandable panel no visible before collapsing it:

B4X:
clv1.GetPanel(Index).GetView(1).SetVisibleAnimated(300,False)
clv1.ResizeItem(Index, 110dip)
clv1.GetPanel(Index).Tag = False

Of course make it visible when expanding it.

B4X:
clv1.ResizeItem(Index, 330dip)
clv1..GetPanel(Index).Tag = True
clv1.GetPanel(Index).GetView(1).SetVisibleAnimated(300,True)

The panel visibility must be set to False on the designer.
 

walterf25

Expert
Licensed User
Longtime User
View attachment 57508


This example uses a slightly modified version of CustomListView to create an expandable list.

Each item in the list is made of two panels. One for the title with the arrow and the other is the expanded panel.
Note that the expanded items height can be different for different items.

The example depends on AnimationPlus and StringUtils libraries.
:D:D:D

Very nice!
 
Top