Android Question Customlistview-lazy-loading doesn't work

Roger C

Active Member
Licensed User
Hi all,

Maybe I'm stupid, it start to feel like that since I need to Google every piece of code. It's impossible to write something out of my own mind from my knowledge of B4A.
I've been programming in VB6 for many many years but today it's too complicated to do anything... I feel like giving up basic and programming...

I tried this update (https://www.b4x.com/android/forum/threads/b4x-xui-customlistview-lazy-loading-virtualization.87930/) to CustomListView but nothing works.
The refered topic (inside the link above) with basic CustomListView works like a charm.
But this 'update' with FillList and FillList2... does nothing.
No errors, no crashes, no views, no pictures, no nothing... just a white screen

I added the subs (FillList2, CLV1_ItemClick, CLV1_VisibleRangeChanged and the new Type).
I have changed nothing in the code, apart from in Activity_Create to be able to run FillLIst.
There I commented the original lines that created the 4 views and replaced them with FillList (and FillList2).

I suppose that's not the way to do it since nothing happens.

How should I do it???

Below is the changes to the sub.

B4X:
Sub Activity_Create(FirstTime As Boolean)
    'Do not forget to load the layout file created with the visual designer. For example:
    Activity.LoadLayout("1")
    Activity.AddMenuItem3("", "refresh", xui.LoadBitmapResize(File.DirAssets, "ic_cached_white_24dp.png", 32dip, 32dip, True), True)
    Activity.AddMenuItem3("", "done", xui.LoadBitmapResize(File.DirAssets, "ic_done_white_24dp.png", 32dip, 32dip, True), True)
    Dim bitmaps As List = Array("pexels-photo-446811.jpeg", "pexels-photo-571195.jpeg", _
        "pexels-photo-736212.jpeg", "pexels-photo-592798.jpeg")
       
'    FillList2
   
'    For i = 1 To 4
'        Dim content As String = $"Lorem ipsum dolor sit amet,
'consectetur adipiscing elit,
'sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."$
'        CLV1.Add(CreateItem(CLV1.AsView.Width, $"This is item #${i}"$, bitmaps.Get(i - 1), content), "")
'    Next
   
    FillList
End Sub
 

Erel

Administrator
Staff member
Licensed User
But this 'update' with FillList and FillList2... does nothing.
No errors, no crashes, no views, no pictures, no nothing... just a white screen

I added the subs (FillList2, CLV1_ItemClick, CLV1_VisibleRangeChanged and the new Type).
I have changed nothing in the code, apart from in Activity_Create to be able to run FillLIst.
There I commented the original lines that created the 4 views and replaced them with FillList (and FillList2).
Please update your project with the attempt to apply the code from the tutorial.
 

Roger C

Active Member
Licensed User
Hi,

I was tired yesterday so I started all over but still no success.

If I start the sample from https://www.b4x.com/android/forum/threads/cards-list-with-customlistview.87720/#content it all works fine.
Only library XUI (version 1.90) are checked, not xCustomListView (version 1.68).

Then I add the Type [Type CardData (Title As String, Content As String, BitmapFile As String)] and subs FillList2 and CLV1_VisibleRangeChanged as in the tutorial.
I also comment out the rows in ActivityCreate that makes the first 4 views and replace them with a call to sub FillLine2. (See below)

Still only XUI are checked, not xCustomListView.

Program compiles, no errors.
It starts on the phone but with only white screen (See supplid picture)
The Log says: Loading cards took: 200ms
so something happen in FillList2-sub.

Ok, maybe it needs xCustomListView-library so I check the box and activate it.

I run the program and get following error:
B4X:
Compiling debugger engine code.    (1.95s)
Compiling generated Java code.    Error
B4A line: 99
p.SetLayoutAnimated(0, 0, 0, CLV1.AsView.Width,
javac 1.8.0_202
src\b4a\example3\main.java:473: error: method _asview in class customlistview cannot be applied to given types;
_p.SetLayoutAnimated((int) (0),(int) (0),(int) (0),mostCurrent._clv1._asview().getWidth(),anywheresoftware.b4a.keywords.Common.DipToCurrent((int) (280)));
                                                                    ^
  required: customlistview
  found: no arguments
  reason: actual and formal argument lists differ in length
Line 99 in the code is
p.SetLayoutAnimated(0, 0, 0, CLV1.AsView.Width, 280dip)

-----------------------------------------
If I restore everything to original code AND use library xCustomListView I get errors on line 44 instead.
The same as above.
If I de-activate the library xCustomListView everything works fine with the 4 views I started with.

B4X:
Compiling debugger engine code.    (1.89s)
Compiling generated Java code.    Error
B4A line: 44
CLV1.Add(CreateItem(CLV1.AsView.Width, $\
javac 1.8.0_202
src\b4a\example3\main.java:430: error: method _asview in class customlistview cannot be applied to given types;
mostCurrent._clv1._add((anywheresoftware.b4a.objects.B4XViewWrapper) anywheresoftware.b4a.AbsObjectWrapper.ConvertToWrapper(new anywheresoftware.b4a.objects.B4XViewWrapper(), (java.lang.Object)(_createitem(mostCurrent._clv1._asview().getWidth(),("This is item #"+anywheresoftware.b4a.keywords.Common.SmartStringFormatter("",(Object)(_i))+""),BA.ObjectToString(_bitmaps.Get((int) (_i-1))),_content).getObject())),(Object)(""));
                                                                                                                                                                                                                               ^
  required: customlistview
  found: no arguments
  reason: actual and formal argument lists differ in length
What am I doing wrong?????

Below is the full code with changes that works without xCustomListView but then gives a white screen.
Same code with xCustomListView active gives the errors above.

B4X:
#Region  Project Attributes
    #ApplicationLabel: B4A Example
    #VersionCode: 1
    #VersionName:
    'SupportedOrientations possible values: unspecified, landscape or portrait.
    #SupportedOrientations: unspecified
    #CanInstallToExternalStorage: False
#End Region

#Region  Activity Attributes
    #FullScreen: False
    #IncludeTitle: True
#End Region

Sub Process_Globals
    Private xui As XUI
    Type CardData (Title As String, Content As String, BitmapFile As String)
End Sub

Sub Globals
    'These global variables will be redeclared each time the activity is created.
    'These variables can only be accessed from this module.

    Private CLV1 As CustomListView
    Private ImageView1 As B4XView
    Private lblTitle As B4XView
    Private lblContent As B4XView
    Private lblAction1 As Label
    Private lblAction2 As Label
End Sub

Sub Activity_Create(FirstTime As Boolean)
    'Do not forget to load the layout file created with the visual designer. For example:
    Activity.LoadLayout("1")
    Activity.AddMenuItem3("", "refresh", xui.LoadBitmapResize(File.DirAssets, "ic_cached_white_24dp.png", 32dip, 32dip, True), True)
    Activity.AddMenuItem3("", "done", xui.LoadBitmapResize(File.DirAssets, "ic_done_white_24dp.png", 32dip, 32dip, True), True)
    Dim bitmaps As List = Array("pexels-photo-446811.jpeg", "pexels-photo-571195.jpeg", _
        "pexels-photo-736212.jpeg", "pexels-photo-592798.jpeg")
'    For i = 1 To 4
'        Dim content As String = $"Lorem ipsum dolor sit amet,
'consectetur adipiscing elit,
'sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."$
'        CLV1.Add(CreateItem(CLV1.AsView.Width, $"This is item #${i}"$, bitmaps.Get(i - 1), content), "")
'    Next
    FillList2
End Sub

Private Sub CreateItem(Width As Int, Title As String, Image As String, Content As String) As Panel
    Dim p As B4XView = xui.CreatePanel("")
    Dim height As Int = 280dip
    If GetDeviceLayoutValues.ApproximateScreenSize < 4.5 Then height = 310dip
    p.SetLayoutAnimated(0, 0, 0, Width, height)
    p.LoadLayout("Card1")
  
    lblTitle.Text = Title
    lblContent.Text = Content
    SetColorStateList(lblAction1, xui.Color_LightGray, lblAction1.TextColor)
    SetColorStateList(lblAction2, xui.Color_LightGray, lblAction2.TextColor)
    ImageView1.SetBitmap(xui.LoadBitmapResize(File.DirAssets, Image, ImageView1.Width, ImageView1.Height, True))
    Return p
End Sub

Sub lblAction1_Click
    Dim index As Int = CLV1.GetItemFromView(Sender)
    Log($"Action 1 clicked. Index: ${index}"$)
End Sub

Sub lblAction2_Click
    Dim index As Int = CLV1.GetItemFromView(Sender)
    Log($"Action 2 clicked. Index: ${index}"$)
End Sub

Sub SetColorStateList(Btn As Label,Pressed As Int,Enabled As Int)
    Dim States(2,1) As Int
    States(0,0) = 16842919    'Pressed
    States(1,0) = 16842910    'Enabled
    Dim CSL As JavaObject
    CSL.InitializeNewInstance("android.content.res.ColorStateList",Array(States,Array As Int(Pressed, Enabled)))
    Dim B1 As JavaObject = Btn
    B1.RunMethod("setTextColor",Array As Object(CSL))
End Sub

Sub FillList2
    Dim bitmaps As List = Array("pexels-photo-446811.jpeg", "pexels-photo-571195.jpeg", _
       "pexels-photo-736212.jpeg", "pexels-photo-592798.jpeg")
    Dim n As Long = DateTime.Now
    For i = 1 To 1000
        Dim content As String = $"Lorem ipsum dolor sit amet,
consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."$
        Dim cd As CardData
        cd.Initialize
        cd.Title = $"This is item #${i}"$
        cd.Content = content
        cd.BitmapFile = bitmaps.Get((i - 1) Mod bitmaps.Size)
        Dim p As B4XView = xui.CreatePanel("")
        p.SetLayoutAnimated(0, 0, 0, CLV1.AsView.Width, 280dip)
        CLV1.Add(p, cd)
    Next
    Log("Loading cards took: " & (DateTime.Now - n) & "ms")
End Sub

Sub CLV1_VisibleRangeChanged (FirstIndex As Int, LastIndex As Int)
    Dim ExtraSize As Int = 20
    For i = Max(0, FirstIndex - ExtraSize) To Min(LastIndex + ExtraSize, CLV1.Size - 1)
        Dim p As B4XView = CLV1.GetPanel(i)
        If p.NumberOfViews = 0 Then
            Dim cd As CardData = CLV1.GetValue(i)
            '**************** this code is similar to the code in CreateItem from the original example
            p.LoadLayout("Card1")
            lblTitle.Text = cd.Title
            lblContent.Text = cd.Content
            SetColorStateList(lblAction1, xui.Color_LightGray, lblAction1.TextColor)
            SetColorStateList(lblAction2, xui.Color_LightGray, lblAction2.TextColor)
            ImageView1.SetBitmap(xui.LoadBitmapResize(File.DirAssets, cd.BitmapFile, ImageView1.Width, ImageView1.Height, True))
        End If
    Next
End Sub

Sub Activity_Resume

End Sub

Sub Activity_Pause (UserClosed As Boolean)

End Sub
 

Attachments

Roger C

Active Member
Licensed User
Hi.

Supplied are the project in the zip.

But it isn't any project, just me testing. So the base of the code is exactly the same as in topic
https://www.b4x.com/android/forum/threads/cards-list-with-customlistview.87720/#content

With addons from topic
https://www.b4x.com/android/forum/threads/b4x-xui-customlistview-lazy-loading-virtualization.87930/

Added sub FillList and FillList2 and CLV1_VisibleRangeChanged.

If I use the codemodule "CustomListView", version: 'xCustomListView v1.20' (instead of the library) with original code, the program works.

The only changes I've made is in below sub.
Three choices; Version1; FillList2 - Version2; the original code - Version3; FillList

B4X:
Sub Activity_Create(FirstTime As Boolean)
    'Do not forget to load the layout file created with the visual designer. For example:
    Activity.LoadLayout("1")
    Activity.AddMenuItem3("", "refresh", xui.LoadBitmapResize(File.DirAssets, "ic_cached_white_24dp.png", 32dip, 32dip, True), True)
    Activity.AddMenuItem3("", "done", xui.LoadBitmapResize(File.DirAssets, "ic_done_white_24dp.png", 32dip, 32dip, True), True)
    Dim bitmaps As List = Array("pexels-photo-446811.jpeg", "pexels-photo-571195.jpeg", _
        "pexels-photo-736212.jpeg", "pexels-photo-592798.jpeg")
      
    FillList2 '                                                                                                                Version 1
  
'    For i = 1 To 4 '                                                                                                        Version 2
'        Dim content As String = $"Lorem ipsum dolor sit amet,
'consectetur adipiscing elit,
'sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."$
'        CLV1.Add(CreateItem(CLV1.AsView.Width, $"This is item #${i}"$, bitmaps.Get(i - 1), content), "")
'    Next '                                                                                                                    End version 2
  
'    FillList '                                                                                                                Version 3
End Sub
Version 2 above is the original code and works fine.

If I comment those lines and activate the call to Sub FillList2 (as above code) it works but displays only a white screen.
 

Attachments

OliverA

Expert
Licensed User
FillList sort of works. As is, it bombs out with
java.lang.OutOfMemoryError: Failed to allocate a 240012 byte allocation with 38808 free bytes and 37KB until OOM
on my tester phone (Galaxy S7 Active). If you reduce the max iteration count from 1000 to 100 it works fine.

FillList2 is a mess, sort off. You are adding empty panels to the list view. This is your code:
B4X:
       Dim p As B4XView = xui.CreatePanel("")
       p.SetLayoutAnimated(0, 0, 0, CLV1.AsView.Width, 280dip)
       CLV1.Add(p, cd)
See, you are adding a plain, empty panel to CLV1. Look at CLV1.Add in FillList and in the original code. Both use CreateItem to pass a populated panel to your list view, but FillList2 just passes empty panels to the list view

My question is, what are you trying to track with your custom type? When you write
B4X:
CLV1.Add(p, cd)
CLV1.Add does not use the content of cd to fill out p. You have to do that on your own. What you can use the second parameter of Add for is to track values that pertain to that item that you may need access to later on. Watch @Erel's video for a better explanation. It can be found among many other videos here: https://www.b4x.com/etp.html. The one you are looking for is titled "CustomListView - Cross Platform & Powerful List".
 

Roger C

Active Member
Licensed User
Thanks OliverA for the explanation.

I'd thought I'd learn how to use this so I'm using the original code from the tutorial. Haven't changed a bit.

I also thought that the code was missing CreateItem sub, but since I've only copy/pasted it from the links above I thought it would work but obviously it doesn't...
 

OliverA

Expert
Licensed User
Should have read your first post and link more carefully. Remove the customlistview module and just check the xCustomListView library in in the Libraries Manager. The VisibilityRangeChanged event was added in xCustomListviews 1.5 and the latest B4A has 1.67 included. Note: there is a 1.68 version update that you may need, depending on the issue it solves: https://www.b4x.com/android/forum/threads/updates-to-internal-libraries.59340/#post-643308
 

Roger C

Active Member
Licensed User
I have tried that too.
Removed the module and only used the library (which is version1.68).
Then the code crashes in a java-error shown below. That's when I gave up...

B4X:
B4A Version: 8.80
Parsing code.    (0.06s)
Building folders structure.    (0.19s)
Compiling code.    (0.55s)
Compiling layouts code.    (0.06s)
Organizing libraries.    (0.01s)
Generating R file.    (2.63s)
Compiling generated Java code.    (3.44s)
Convert byte code - optimized dex.    Error
Uncaught translation error: java.lang.IllegalArgumentException: already added: Lb4a/example3/customlistview;
Uncaught translation error: java.lang.IllegalArgumentException: already added: Lb4a/example3/customlistview$ResumableSub_PanelClickHandler;
Uncaught translation error: java.lang.IllegalArgumentException: already added: Lb4a/example3/customlistview$_clvitem;
3 errors; aborting
 

Erel

Administrator
Staff member
Licensed User
I've downloaded your project, removed CustomListView module and added a reference to xCustomListView library. Everything seems to work fine.

In some cases you might need to remove the CustomListView view in the designer and create it again after you switch from the module to the library. However this is not the case here.
 

Roger C

Active Member
Licensed User
Ok.
Then I don't get it...

But never mind. We drop this and I will find another way to do it.

Thanks for your patiens with me Erel.
 

Erel

Administrator
Staff member
Licensed User
Then I don't get it...
But never mind. We drop this and I will find another way to do it.
This is not the correct way to ask for help.
You should follow the exact steps I did. If it doesn't work for you then post the full error message and upload the updated project. It shouldn't take you more than 1 minute to do. It took me 15 seconds.
 

Roger C

Active Member
Licensed User
I'm sorry Erel but I'm frustrated. Didn't mean to take it out on you or this forum.

The only errors I get are the one above about Java.

That is before it loads the app to the phone so there are no logs.
 

Roger C

Active Member
Licensed User
I'm sorry but I cannot help you here as you seem to ignore my requests...
No I don't ignore them. I'm at work and can't upload it.

But it is the same code as the last uploaded zip and the Java error is posted a few posts up.
 

OliverA

Expert
Licensed User
Uncaught translation error: java.lang.IllegalArgumentException: already added: Lb4a/example3/customlistview;
Uncaught translation error: java.lang.IllegalArgumentException: already added: Lb4a/example3/customlistview$ResumableSub_PanelClickHandler;
Uncaught translation error: java.lang.IllegalArgumentException: already added: Lb4a/example3/customlistview$_clvitem;
Looks like you did not remove the CustomListView class module. The project you uploaded in post #3 works by following these steps:

1) Remove the CustomListView module by selecting the module in the IDE and then selecting Project->Remove Module from the menu. At that time, you should see a lot of errors in the error log. These errors will go away after you
2) Select the xCustomListView library in the Libraries Manager. Now you should be left with two warnings that can be ignored for the time being.

Note: that these are the same steps I mentioned in my post, post #8, and they are the same steps that @Erel mentioned in his post, post #10.

I used Debug, Release, and Release (obfuscated) mode and in all cases the app compiled fine, installed fine and ran fine on my target phone (Galaxy S7 Active).

Note: Both @Erel and I used the project you uploaded in post #3. Maybe you need to download that project yourself, follow the steps above and see what you get.

I feel like giving up basic and programming...
Don't. If you think this is bad (it's not), just try using Android Studio to perform something similar in Java and lots of crazy XML files *. Or if you really want to pull out your hair, look at Objective C (at least my brain can't handle the SmallTalk + C mashup) if you happen to target iOS**. Or you could try to target phones with progressive web apps and then just deal with JavaScript and the library flavor of the day (and HTML, and CSS and CSS pre processors and JavaScript pre processors and whatever workflow is currently in fad, which seems to change every 6 month).***

* Some of the difficulties with Android programming are supposed to be solved with Kotlin - yeah, another language to learn
** Some of the difficulties with iOS programming are supposed to be solved with Swift - yeah, another language to learn

Update: *** This may be solved by @alwaysbusy's BANano framework (https://www.b4x.com/android/forum/t...with-abstract-designer-support.99740/#content). Now you can use B4J's designer and Basic to create progressive web apps. Please note, some HTML/CSS skills are still required for optimal outcome.
 
Last edited:

Roger C

Active Member
Licensed User
Note: Both @Erel and I used the project you uploaded in post #3. Maybe you need to download that project yourself, follow the steps above and see what you get.
I stand corrected.
Downloaded my own project and it works. o_O

I must have done something wrong before. I was frustrated due to stupid phone that disconnected the bridge every two minutes. So a lot of restarts of both phone, program and computer. Still don't know what was going on then, might have been the WiFi that had hickups.

I thank you both for all your help and time spent on my non-existing problem.

Don't. If you think this is bad (it's not), just try using Android Studio to perform something similar in Java and lots of crazy XML files *. Or if you really want to pull out your hair, look at Objective C (at least my brain can't handle the SmallTalk + C mashup) if you happen to target iOS**. Or you could try to target phones with progressive web apps and then just deal with JavaScript and the library flavor of the day (and HTML, and CSS and CSS pre processors and JavaScript pre processors and whatever workflow is currently in fad, which seems to change every 6 month).***
And thank you OliverA for your pep-talk. Won't ever go near any of the words you've written above. Thats a promise. :)

Erel, thank you again for your patiens.
 
Top