B4A Library [B4X] [XUI] xCustomListView - cross platform CustomListView

Update: As several other libraries depend on xCustomListView library, it is no longer recommended to use the code module. Use the library instead. There are several extension classes that add more features to xCLV. They are listed at the end of this post.

Video tutorial:


xCustomListView is an implementation of CustomListView based on XUI library. It provides all the features of the original CustomListView and it is compatible with B4A, B4J and B4i.

This class replaces the platform specific CustomListView classes. It is recommended to use this one for new projects.

Change log:

- V1.74 - Fixes a bug with JumpToItem (B4i).
- V1.72 (B4A only) - Fixes an issue where the designer typeface is not set when calling AddTextItem.
- V1.71 (B4i only) - Fixes an issue related to iOS 9- devices.
- V1.70 - ItemLongClick event (right click in B4J).
- V1.68 - Fixes a bug with ResizeItem / ReplaceAt and lists with single item.
- PressedColor is now a public field.
- Setting the PressedColor to a transparent color disables the item click color animation. This is useful if you want to replace it with your own implementation.
- V1.66 - Improves the text measurement of text items in B4J.
- V1.65 - Fixes an issue in B4i only where the CSBuilder colors were ignored.
- V1.64 - Fixes an issue with ScrollToItem / JumpToItem in B4i.
- V1.63 - Bug fixes, Refresh method to force VisibleRangeChanged to be raised, several private subs are now public, designer property to hide the scroll bar.
- V1.54 - Allows using CSBuilder with AddTextItem in B4i (it is also supported in B4A).
- V1.53 - Fixes an issue with VisibleRangeChanged event and CLV.Clear
- V1.52 - Fixes an issue with CLV.RemoveAt
- V1.51 - Fixes an issue which caused the LastVisibleIndex and FirstVisibleIndex properties to be hidden.

- V1.50 - Large update.

• VisibleRangeChanged event. With this event it is possible to show longer lists with complex items: https://www.b4x.com/android/forum/threads/b4x-xui-customlistview-lazy-loading-virtualization.87930/
• FindIndexFromOffset - quickly finds the index of the item in the specified index.
• ScrollChanged event.
• Support for CSBuilder in AddTextItem (B4A only).
• Performance improvements.

- V1.20 - Adds support for horizontal orientation.
Set it in the designer.
Add items like this:

clv2.Add(CreateListItem($"Item #${i}"$, 160dip, clv2.AsView.Height), $"Item #${i}"$)
'Instead of
'clv2.Add(CreateListItem($"Item #${i}"$, clv2.AsView.Width, 160dip), $"Item #${i}"$)

Don't use the source code. Use the preinstalled xCustomListView library instead.
Libraries such as XUI Views depend on the library and will not work properly with the module.

Extension classes:

CLVExpandable (B4X) - Allows expanding and collapsing items: https://www.b4x.com/android/forum/t...g-or-collapsing-xcustomlistview-items.106148/
CLVSwipe (B4A and B4i) - Adds swipe actions and swipe to refresh feature: https://www.b4x.com/android/forum/threads/98252/#content
CLVHeader - (B4X) - Adds a nice animated header to the list: https://www.b4x.com/android/forum/t...ted-header-to-xcustomlistview.105343/#content
CLVSelections (B4X) - Adds more selection modes: https://www.b4x.com/android/forum/t...d-selection-modes-for-xcustomlistview.114364/
CLVNested (B4A) - Allows nesting a CLV inside a CLV item: https://www.b4x.com/android/forum/threads/clvnested-allows-nesting-clvs.107742/#content
PreoptimizedCLV (B4X) - Lazy loading + fast scroll extension: https://www.b4x.com/android/forum/t...loading-extension-for-xcustomlistview.115289/

 

[Sandman]

It is recommended to use this one for new projects.

Does this mean it will be provided as a built-in class for new versions of B4X?

 

[swChef]

Update: Erel extended the original (top post) to support Horizontal as of v1.20.

I extended the CustomListView.bas to allow Horizontal scrolling (B4A, but not B4I,J as of yet). Adding here in case others need it. Attached.

Erel, the sample includes nested CLV's. But the nested ones do not scroll. Is there a way to solve that? (I posted this question to the Q forum).

Edit: V1.1 added. Cleaned up and fixed to allow horizontal scrolling of items for the horizontal control that is inside the vertical list
Edit2: Tried to add v1.1 to this post but the forum isn't allowing it (More Options... causes a site error). It's in post#12.
Edit3: Removed the old attachment, superceded by #12.

 

[Mahares]

I am getting this error when I run Erel's above example with B4A 7.3. XUI lib is installed in additional lib folder. and the line that gets hilighted in the xCustomListView v1.01 Class is: DefaultTextBackgroundColor = mBase.Color

*** Service (starter) Create ***
** Service (starter) Start **
** Activity (main) Create, isFirst = true **
Class not found: anywheresoftware.b4a.samples.customlistview.customlistview, trying: b4a.example.customlistview
Class not found: anywheresoftware.b4a.samples.customlistview.customlistview, trying: b4a.example.customlistview
customlistview_designercreateview (B4A line: 51)
DefaultTextBackgroundColor = mBase.Color
java.lang.NoSuchFieldException: mSolidColors
at java.lang.Class.getDeclaredField(Class.java:939)
at anywheresoftware.b4a.objects.B4XViewWrapper.getColor(B4XViewWrapper.java:263)
at b4a.example.customlistview._designercreateview(customlistview.java:494)
at java.lang.reflect.Method.invoke(Native Method)
at java.lang.reflect.Method.invoke(Method.java:372)
at anywheresoftware.b4a.BA.raiseEvent2(BA.java:186)
at anywheresoftware.b4a.objects.CustomViewWrapper.AfterDesignerScript(CustomViewWrapper.java:67)
at anywheresoftware.b4a.keywords.LayoutBuilder.loadLayout(LayoutBuilder.java:162)
at anywheresoftware.b4a.objects.ActivityWrapper.LoadLayout(ActivityWrapper.java:209)
at b4a.example.main._activity_create(main.java:370)
at java.lang.reflect.Method.invoke(Native Method)
at java.lang.reflect.Method.invoke(Method.java:372)
at anywheresoftware.b4a.BA.raiseEvent2(BA.java:186)
at b4a.example.main.afterFirstLayout(main.java:102)
at b4a.example.main.access$000(main.java:17)
at b4a.example.main$WaitForLayout.run(main.java:80)
at android.os.Handler.handleCallback(Handler.java:739)
at android.os.Handler.dispatchMessage(Handler.java:95)
at android.os.Looper.loop(Looper.java:145)
at android.app.ActivityThread.main(ActivityThread.java:6939)
at java.lang.reflect.Method.invoke(Native Method)
at java.lang.reflect.Method.invoke(Method.java:372)
at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:1404)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1199)

 

[Erel]

What is the device OS version?

 

[Mahares]

What is the device OS version?

1. It does not work on OS 5.1.1, but works on OS 4.2.2 and 7.0.

2. When it works, the log shows:
Class not found: anywheresoftware.b4a.samples.customlistview.customlistview, trying: b4a.example.customlistview
How do you get rid of this log

3. Also, I am not getting the top right screenshot look in the above example, only the top left screenshot.
Thank you

 

[DonManfred]

3. Also, I am not getting the top right screenshot look in the above example, only the top left screenshot.

The top right is a Screen from the B4i Version
Top left is Android. And the Bottom one is B4J

 

[DonManfred]

2. When it works, the log shows:
Class not found: anywheresoftware.b4a.samples.customlistview.customlistview, trying: b4a.example.customlistview
How do you get rid of this log

Try to remove the CLV from your layout and place a new one giving the same name. Dont forget to save the Layout ;-)

 

[Erel]

You can ignore the class not found message. I've uploaded XUI v1.11: https://www.b4x.com/android/forum/t...platform-native-ui-library.84359/#post-534432

Please try it.

 

[Mahares]

Please try it.

After the XUI update to 1.1, it now works on OS 5.1.1.
But, if you can find a way to completely eliminate the the annoying below message, without having to ignore it or without having to resort to @DonManfred 's trick, that will make the code a lot cleaner.
Class not found: anywheresoftware.b4a.samples.customlistview.customlistview, trying: b4a.example3.customlistview

 

[Misterbates]

But, if you can find a way to completely eliminate the the annoying below message, without having to ignore it or without having to resort to @DonManfred 's trick, that will make the code a lot cleaner.
Class not found: anywheresoftware.b4a.samples.customlistview.customlistview, trying: b4a.example3.customlistview

It's not "a trick".

The issue may be coming from a class reference inside your designer layout, which in turn comes from adding a previous version of CLV to your layout then upgrading the CLV custom view. To remove the message, remove CLV from your designer layout, re-add (and update designer properties to be what they were previously) then save the layout. The layout will then reference the new version of the class and the message will be gone.

 

[swChef]

Edit: V1.1 added. Cleaned up and fixed to allow horizontal scrolling of items for the horizontal control that is inside the vertical list
Tried to add to original post but the forum isn't allowing it

V1.2 Added. Incorporated Erel's CustomListView 1.02 updates.

 

[Erel]

CustomListView v1.02 is released. It fixes an issue with AsView not returning the top most control.

It depends on XUI v1.3+.

 

[Rusty]

Can you add EditTexts, and other views to this control?
If so, how would one do this? (example?)
Thanks,
Rusty

 

[Misterbates]

Can you add EditTexts, and other views to this control?
If so, how would one do this?

Create a panel, add the controls you want (with callbacks as needed) then add the panel to the custom list view

 

[Erel]

Can you add EditTexts, and other views to this control?

Yes. See the example. The items layout is created from a layout file. You can add whichever views you like.

 

[JLS]

Hi everybody,

For some reason, it is not possible to set the "Divider Color" to Transparent. It always appears with a solid color.

Is this a bug?

 

[Reviewnow]

This uses the desigerproperty in side the customlistview class

'Change the following and it should work
#DesignerProperty: Key: DividerColor, DisplayName: Divider Color, FieldType: Color, DefaultValue: 0xFFD9D7DE

'TO
#DesignerProperty: Key: DividerColor, DisplayName: Divider Color, FieldType: Color, DefaultValue: 0x00FFFF00

 

[JLS]

I tried this, but it still appears solid white.

 

[Erel]

1. Make sure that the background color is set to Default in the designer.
2. Set the divider color to Transparent.
3. Add this line after the layout is loaded:

clv1.DefaultTextBackgroundColor = Colors.Black