Android Code Snippet Expanded CLV inside an Expanded CLV

wes58 · Aug 15, 2020

This is not really a code snippet, but a working example (work in progress) showing how to create and use expanded CLV inside an expanded CLV - see attached picture. Both CLVs are scroll-able.
I was looking for a solution like this, but only saw an example of CLVnested, which wasn't really what I wanted.
After seeing a thread of @tsteward in the Questions forum, I decided to try to help him and do even more what he wanted. And attached is an example.

This example shows how to (how I did it!)
- clicking on buttons on the first clv1 updates imageviews in all items of clv2 for this clv1 item.
- clicking on clv1, expands it, and fills the second clv2 - which can be scrolled.
- only one item can be expanded at the time
- clicking on clv2 or any other "clickable" items (there are two image views that can be clicked on in this example) expands clv2
- clicking on the buttons in the expanded clv2, updates imageviews on clv2 and collapses clv2 item

If anyone has any other ideas how to make it better/simpler please share it here.

wes58 · Aug 16, 2020

Here is the second example.
The difference from the post #1 are:
- clv2 is located in the cellitem.bal
- you can have more than one clv1 item expanded at the time
- all clv2 items are created when the clv1 is created. The advantage is that clv2 items retain value (like on/off, air con. fan lo/hi) after the clv1 item is collapsed and then expanded again.

All this created some problems with access to clv2 for a clicked item, so that's what has to be done:
- when creating clv1 item, clv1 value has to be set to clv2

B4X:

    For i = 0 To house.Size-1
        clv1.Add(CreateListItem(house.Get(i), i),[B] [/B]clv2) 'clv1 value is set to created clv2
    Next

- when creating clv2 items, clv2 value has to be set to clv1 item index

B4X:

    Select index
        Case 0
            For i = 0 To room1.Size-1
                clv2.Add(CreateRoomItem(room1.Get(i), index), index)    'index of clv1 is needed as a value in clv2
            Next

- if there are some clickable items on the clv2 - like in the example imageviews on the Air Con. item - you need to set the panel tag on which those items are to the clv1 item index.

B4X:

Sub CreateRoomItem(text As String, index As Int) As B4XView        'for clv2
    Dim clr, shade As Int
    Dim status As Int = houseStatus.Get(index)
    
    Dim p As B4XView = xui.CreatePanel("")
    clr = Colors.RGB(233,221,175)
    shade =  ShadeColor(clr)
    p.SetLayoutAnimated(0, 0, 0, clv1.AsView.Width, ExpandedHeight1)
    If text.Contains("Air") Then
        p.LoadLayout("catAC")
    Else
        p.LoadLayout("catAll")
    End If
    p.GetView(0).Tag = index

All this is required to get the clv2 for the clicked item.
For example if the button is clicked on clv1 we have:

B4X:

Sub btnEvent1_Click                    ' event from any other "clickable" items on clv1
    Dim j As Int
    Dim btn As Button    'Label
    Dim index As Int = clv1.GetItemFromView(Sender)
    clv2 = clv1.GetValue(index)                            'get clv2 from clv1 value

When we click on the imageviews in clv2 we have:

B4X:

Sub clv2Event_Click                'clv2 items click
    Dim i As Int
    Dim v As B4XView
    v = Sender
    Dim parentIndex As Int = v.Parent.Tag                'panel on which imageView is located. tag is set to the clv1 item index
    clv2 = clv1.GetValue(parentIndex)
    Dim index As Int = clv2.GetItemFromView(Sender)

I know it looks complicated, but it wasn't easy to figure it out how to get it working.

wes58 · Aug 17, 2020

And here is the last example.
This is what I wanted to achieve for my application.
- there can be 1 or more expanded clv1 items at the time
- number of clv2 items can vary and can be 1, 2 or more.
- I don't need to scroll clv2, if number of items is less than 3 (in this example). This is set with value of MinItemsToScroll. In this case we don't need to disable scrolling of clv1! And we set touch listener only if clv2 has 3 or more items,
Note: clv1 expanded height is set for 3 clv2 items. Scrolling for cvl1 is disabled, but, of course, they will scroll only if one of them is expanded.
- If we have less than 3 clv2 items, we have to adjust the height of expanded clv1 item to the height of clv2 items. If one of them is expanded, we have to change the height again - because there is no scrolling for those items!
- there can be only one expanded clv2 item at the time. Because of that, we have to search all clv1 expanded items, for an expanded clv2 item, and collapse it, before expanding clicked item.

There are probably many other things that you could do, but that's what I need at the moment.
Maybe someone will find those examples useful - for your application or to see what you can do with CustomListView.

Android Code Snippet Expanded CLV inside an Expanded CLV

Attachments

wes58

Active Member

Attachments

wes58

Active Member

Attachments

Android Code Snippet Expanded CLV inside an Expanded CLV

Attachments

wes58

Active Member

Attachments

wes58

Active Member

Attachments

Privacy & Transparency

Privacy & Transparency