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.
In the page2 example the selected item is highlighted by using a piece of code in the clv1_ItemClick event subroutine like this:
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):
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:
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):
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:
In page5 the checkbox only needs to be changed when the checked value is true:
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.
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:
In B4J the following libraries are used:
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)
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.
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
NextFrom 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 SubIn 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 SubThis 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
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 SubIn 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 checkedYou 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.
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:
In B4J the following libraries are used:
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)
