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/

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.

 

[LucaMs]

Very useful, thank you.

OT: what is that player?

 

[Erel]

I'm using AZ recorder to record the screen: https://play.google.com/store/apps/details?id=com.hecorat.screenrecorder.free&hl=en
And then LICEcap to convert it to GIF.

 

[LucaMs]

I'm using AZ recorder to record the screen: https://play.google.com/store/apps/details?id=com.hecorat.screenrecorder.free&hl=en
And then LICEcap to convert it to GIF.

Thank you.

 

[tucano2000]

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.

 

[Erel]

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.

B4i CustomListView is very similar and it is also implemented as a custom view.

You can use this code to create a rotation animation: https://www.b4x.com/android/forum/threads/animations.46156/#post-338075

 

[Erel]

An updated version was uploaded. The collapsing animation was improved.

 

[sseaand]

Please tell me why when hide the panel buttons seen in the background? How to fix it?

 

[Erel]

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]

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?

 

[Erel]

 

[Noelkman]

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?

 

[Noelkman]

Looks like it's already answered here
Thanks.

 

[rboeck]

Look with the designer; you have here two layouts, the buttons are part of one of them.

 

[Erel]

This code will collapse open items before a new one is expanded:

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

 

[josejad]

Will be there an example based on xCustomListView?.

Thanks¡

 

[JLS]

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:

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.

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]

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.

Very nice!

 

[Erel]

Will be there an example based on xCustomListView?

Yes, such an example is planned. Will take some time though.

 

[Alberto Iglesias]

Someone create this same expandable customlistview for B4i?

Thanks