Android Tutorial Expandable list based on CustomListView

Erel

Administrator
Staff member
Licensed User
A cross platform version is available here: https://www.b4x.com/android/forum/threads/b4x-xui-expandable-list-based-on-xcustomlistview.86449/#post-547401

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.
 

Attachments

Last edited:

tucano2000

Active Member
Licensed 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

Administrator
Staff member
Licensed 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.
 

sseaand

Member
Licensed 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
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?
 

Syd Wright

Active Member
Licensed User
Nice expandable listview! Is there a simple way to only allow one row to open at a time (i.e. to automatically close all other rows if a particular row is selected)?

PS: How and where are both buttons added? I can't find them anywhere.
 
Last edited:

rboeck

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

Erel

Administrator
Staff member
Licensed 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
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

Well-Known Member
Licensed 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