Android Question Applying Lazy Loading to xCustomListView with Imageviews Bitmap Files

[Mahares]

I am not sure I am Applying Lazy Loading effectively in xCustomListView with Imageviews. The xCLV has 4 columns of imageviews. Below each imageview is a label showing the bitmap file as shown in screenshot. When I create the xCLV with 100 records, it is ok although scrolling is not smooth, but crashes if more records (of course crash occurs depending on number of records and memory of device). The bitmap files to load the imageviews range from 5 to 11 KB in size each. Here is the majority of the useful code:

Sub Activity_Create(FirstTime As Boolean)       
    MyList.Initialize
    MyList=Array ("p1.jpg","p2.jpg","p3.jpg","p4.jpg","p5.jpg","p6.jpg")
    Activity.LoadLayout("layMain")    'has CustomListView1 only
    For i = 1 To 100   'works no out of memory error. In one device it crashed with less than 100
'    For i = 1 To 150  'crashed OOM
'    For i = 1 To 120    'crashed OOM
        CustomListView1.Add(CreateMyPhotoList(MyList),i)
    Next
End Sub

Sub CreateMyPhotoList(l As List) As B4XView
    Dim p As B4XView = xui.CreatePanel("carthage")  'carthage is the event name
    p.SetLayoutAnimated(0, 0, 0, CustomListView1.AsView.Width, 130dip)
    p.LoadLayout("Item")    'has 4 imageviews and 4 Labels as shown in screenshot
    Dim iv(4) As B4XView = Array As B4XView(iv1,iv2,iv3,iv4)
    Dim lbl(4) As Label=Array As Label(lbl1,lbl2,lbl3, lbl4)
    For j=0 To iv.Length-1
        Dim f As String=l.Get(Rnd(0,6))  'random bitmap file
        iv(j).SetBitmap(xui.LoadBitmapResize(File.DirAssets, f, iv(j).Width, iv(j).Height, False))
        Dim cd As ColorDrawable
        cd.Initialize(Colors.RGB(255,255,200),10dip)
        lbl(j).Background=cd
        lbl(j).Text=f
        lbl(j).TextColor=Colors.Black
        lbl(j).TextSize=20
        lbl(j).Tag=j
    Next
    Return p
End Sub

Sub CustomListView1_VisibleRangeChanged (FirstIndex As Int, LastIndex As Int)
    Dim ExtraSize As Int = 20
    For i = 0 To CustomListView1.Size - 1
        Dim p As B4XView = CustomListView1.GetPanel(i)
        If i > FirstIndex - ExtraSize And i < LastIndex + ExtraSize Then
            'visible+
            If p.NumberOfViews = 0 Then
                p.LoadLayout("item")
                Dim iv(4) As B4XView = Array As B4XView(iv1,iv2,iv3,iv4)
                Dim lbl(4) As Label=Array As Label(lbl1,lbl2,lbl3, lbl4)
                For j=0 To iv.Length-1
                    Dim f As String=MyList.Get(Rnd(0,6))
                    iv(j).SetBitmap(xui.LoadBitmapResize(File.DirAssets, f, iv(j).Width, iv(j).Height, False))
                    Dim cd As ColorDrawable
                    cd.Initialize(Colors.White,10dip)
                    lbl(j).Background=cd
                    lbl(j).Text=f
                    lbl(j).TextColor=Colors.Black
                    lbl(j).TextSize=20
                Next
            End If
        Else
            If p.NumberOfViews > 0 Then
                p.RemoveAllViews
            End If
        End If
    Next
End Sub

 

[Erel]

he bitmap files to load the imageviews range from 5 to 11 KB in size each.

File size not important. Only the image dimensions are important.

Your code is not using lazy loading correctly. The bitmaps are the heavy resource. You need to only load the bitmaps when needed. I will prepare an example...

 

[Erel]

The attached example lazy loads 1000 items with 1000 images.
The bitmaps are added and removed as needed. It can be further optimized by reusing the items views. It will not add much as the items are very simple (ImageView and a Label).

If you comment the code that removes the invisible bitmaps the list will quickly become very slow.

Note that you should test it in release mode or after cleaning the project.

 

[Erel]

https://www.b4x.com/android/forum/t...r-columns-of-imageviews-and-many-rows.101431/