CustomListView (CLV): a collection of examples.

PaulMeuris

Active Member
Licensed User
In the last few years I have been using CustomListView views in most of the tutorials I wrote. In this tutorial you can find a few of those CustomListView (CLV) examples.
You can use a CLV with text items that don’t require an extra layout. Each text item is placed in an internal label. The text is wrapped in the label by default. The height of the item is automatically adjusted. The page1 example shows this in action.
1729242398636.png

In the page2 example the selected item is highlighted by using a piece of code in the clv1_ItemClick event subroutine like this:
B4X:
    For i = 0 To clv1.Size -1
        If i = Index Then
            clv1.GetPanel(i).Color = xui.Color_Magenta
        Else
            clv1.GetPanel(i).Color = xui.Color_White
        End If
    Next
1729242485287.png

From page3 onwards the CLV items require a layout for each item. A typical course of action is to fill the CLV in the fill_clv1 subroutine using a list. An additional map can also be used for some extra information.
In the loop going over the list a panel (or pane in B4J) is created that holds the views from the item layout. Here’s some code from page3 (B4J):
B4X:
Private Sub fill_clv1
    clv1.Clear
    Dim itemsmap As Map = get_labelitems
    Dim names As List = itemsmap.Get("names")
    Dim cities As List = itemsmap.Get("cities")
    Dim telephonenumbers As List = itemsmap.Get("telephonenumbers")
    For i = 0 To names.Size -1
        Dim pnl As Pane = set_clv1_item(i, names.Get(i), cities.Get(i), telephonenumbers.Get(i))
        clv1.Add(pnl,names.Get(i))
    Next
End Sub
1729242584994.png

In the set_clv1_item subroutine the item layout is used and the views get their values. The resulting pane (panel in B4A) is then added to the CLV with the clv1.Add method.
You can get the information from each item when you click or tap on an item in the list. The individual labels (in page3 example) can be obtained using this piece of code:
B4X:
Private Sub show_selection_info(index As Int, value As Object)
    Dim vwtext0 As String = clv1.GetPanel(index).GetView(0).Text
    Dim vwtext1 As String = clv1.GetPanel(index).GetView(1).Text
    Dim vwtext2 As String = clv1.GetPanel(index).GetView(2).Text
    Dim info As String = $"Item index: ${index}
Item value: ${value}
Views Text properties:
${vwtext0} - ${vwtext1} - ${vwtext2}"$
    xui.MsgboxAsync(info,"Selection info")
'    Log(info)
End Sub
When you click or tap on an individual label you can get the text of that label using the event subroutine name (“lbl”) that was set in the designer or in the initialization of the label in the code.
This is some code to get the label text (in B4A the name of the subroutine is lbl_Click):
B4X:
Private Sub lbl_MouseClicked(EventData As MouseEvent)
    Dim view As B4XView = Sender
    Dim tag As Int = view.Tag
    Dim vwtext As String = view.Text
    Dim info As String = $"Item index: ${tag}
Label value: ${vwtext}"$
    xui.MsgboxAsync(info,"Label info")
    EventData.Consume
End Sub
Making a selection using a radiobutton or a checkbox is quite easy. When you use a B4X custom view like for instance the B4XRadioButton then you should know that the view is available in the tag by default. An example from page4:
B4X:
Private Sub clv1_ItemClick (Index As Int, Value As Object)
    ' a XUI Views view has a type of CustomView - the view is available in the tag by default
    Dim vw As B4XRadioButton = clv1.GetPanel(Index).GetView(0).Tag
    If vw.Checked = False Then
        vw.Checked = True
        Dim descr As String = clv1.GetPanel(Index).GetView(1).Text
        clv1.GetPanel(Index).GetView(1).Text = descr & " DONE."
    End If
    show_selection_info(Index,Value)
End Sub
1729242794822.png

In page5 the checkbox only needs to be changed when the checked value is true:
B4X:
Private Sub checkbx1_CheckedChange(Checked As Boolean)
    If Checked = False Then Return            ' only change when a checkbox is checked
You can change the height of an item (expand or collapse). This can be done using an extra library (CLVExpandable) or by doing a resize of the item. Check out the expand_item subroutine in page8.
You can change the order of the items by dragging the item to a different location in the list. This is done in page9 vertically and in page16 in B4J or page15 in B4A horizontally. The classes CLVDragger and HCLVDragger are used to perform this action.
1729242887092.png

In page10 the B4XImageView is covered by a transparent panel (pane in B4J) to allow a click or tap on the image to reveil the filename.
In page12 in B4J the list contains all the font family names from Windows. This list is not available in the B4A version of this application.
In page12 in B4A (page13 in B4J) a JSON named color list is used. The list has a nice feature where the ContrastColor subroutine is used to show white text on dark colors.
In page13 in B4A (page14 in B4J) each item contains a horizontal oriented CLV. In B4A you can swipe from left to right and from right to left on an item to scroll. In B4J you can use the scrollbar or you can place the mouse on the scrollbar and move the scroll wheel.
In page 14 in B4A (page15 in B4J) you can see an example that uses a different layout for each item. The Defaults item even includes another CLV!
The last example (page15 in B4A and page16 in B4J) shows a CLV with a horizontal orientation and a horizontal dragging event.
The rest of the pages (named “test”) are there for you to do some testing. Copy and paste some code from the other pages and create your own list.
In B4A the following libraries are used:
1729242955138.png

In B4J the following libraries are used:
1729242995148.png

The app has been tested on a Samsung Galaxy A05s with the One UI version 6.1 and the Android version 14.
The application in B4J runs on Windows 10+.
You can find the source code in the attachments (CLV_examples_B4A.zip and CLV_examples_B4J.zip)
 

Attachments

  • CLV_examples_B4A.zip
    482.7 KB · Views: 84
  • CLV_examples_B4J.zip
    482.1 KB · Views: 67

PaulMeuris

Active Member
Licensed User
A CLV can also be used to display chat messages.
I have added page17 in B4J and page16 in B4A to the list.
1729586063697.png
1729586110116.png

The list is scrolled to the last item. In B4A you have to put a sleep(0) call before calling the ScrollToItem method of the CLV.
This example uses 2 item layouts: one for the left position and one for the right position of the panel (pane).
You can find the source code in the attachments (CLV_examples_B4A_with_page16.zip) and (CLV_examples_B4J_with_page17.zip)
 

Attachments

  • CLV_examples_B4A_with_page16.zip
    486.2 KB · Views: 53
  • CLV_examples_B4J_with_page17.zip
    487.1 KB · Views: 52

PaulMeuris

Active Member
Licensed User
Let's add another example...
1730277003086.png
1730277074328.png

1730277122193.png
1730277166489.png

You can find the source code to study in the attachments: CLV_examples_B4A_with_page17_nodata.zip and CLV_examples_B4J_with_page18_nodata.zip
The data file tambon.zip needs to be downloaded and unzipped separately and tambon.csv needs to be added in the project in the Files Manager panel!
 

Attachments

  • CLV_examples_B4A_with_page17_nodata.zip
    488.5 KB · Views: 54
  • CLV_examples_B4J_with_page18_nodata.zip
    489.5 KB · Views: 53
  • tambon.zip
    230.8 KB · Views: 44
Last edited:

Theera

Well-Known Member
Licensed User
Longtime User
Let's add another example...
View attachment 158116 View attachment 158117
View attachment 158118 View attachment 158119
You can find the source code to study in the attachments: CLV_examples_B4A_with_page17_nodata.zip and CLV_examples_B4J_with_page18_nodata.zip
The data file tambon.zip needs to be downloaded and unzipped separately and tambon.csv needs to be added in the project in the Files Manager panel!
Why your tambon example show is correctin B4J, but mine is not in B4A.
 

Attachments

  • 1000038288.png
    1000038288.png
    124.5 KB · Views: 45
Last edited:

Theera

Well-Known Member
Licensed User
Longtime User
I have just study your code. your code is different than mine. You have used CLV directly while mine is used BBTextEngine library.
However,your strategy can solved about display Thai language correct and Latittude ,Longtitude Values are correct,too. Therefore, I think BBTextEngine library has bug about display value besides of Thai language. Thank you your soucecodes for learning.
 

Theera

Well-Known Member
Licensed User
Longtime User
Let's add another example...
View attachment 158116 View attachment 158117
View attachment 158118 View attachment 158119
You can find the source code to study in the attachments: CLV_examples_B4A_with_page17_nodata.zip and CLV_examples_B4J_with_page18_nodata.zip
The data file tambon.zip needs to be downloaded and unzipped separately and tambon.csv needs to be added in the project in the Files Manager panel
if I need to have button for filtering tambon_t field ,how do I do? Today,I have study this ,but I think that I have data which are likely.( data are similar)
It can be passed compiled ,but it doesn't work.
 

PaulMeuris

Active Member
Licensed User
If I need to have button for filtering tambon_t field ,how do I do?
Please make a new thread for this question.
You could show in a testproject what it is you want to do (which views do you want to use).
Add a layout to the project and use some of the code from these CLV examples (for instance page17 for B4A and page18 for B4J).
 

PaulMeuris

Active Member
Licensed User
To answer the question from @Theera in message #7 i have added an example CLV with a filter and lazy loading.
It is always a good idea to have a filter on a very long list (more than 7000 items).
If you want to scroll down to the bottom of the (not filtered) list it will take a long time to get there in B4A (without an extra scroll feature).
In B4J you can use the scroll bar.
The filter subroutine checks if the uppercase value of the search floating text field exists in the uppercase item field value of each item in the CLV.
The B4XComboBox value is used to determine which field of the item to use for the testing.
You can use English or Thai characters to search for.
1731034574856.png
1731034628588.png

1731034861570.png
1731034985558.png

1731035331727.png
1731035975461.png

The source codes are in the attachments. Make sure to follow the instructions to download the tambon.zip file from message #3.
 

Attachments

  • CLV_examples_B4A_with_page18.zip
    491.8 KB · Views: 52
  • CLV_examples_B4J_with_page19.zip
    492.8 KB · Views: 44
Top