Android Question PreoptimizedCLV - not smooth for gallery pictures

[Alexander Stolte]

Hey,
i took the project from here:

Grid Class - PreoptimizedCLV

Grid using Erel sample code based on PreoptimizedCLV -> https://www.b4x.com/android/forum/threads/grid-class-preoptimizedclv.116309/#post-726808 Example applied on F1, Work very nice: The idea of this class is to be able to load in a 3 column Grid (customizable) a long list of url images...

www.b4x.com

i have edited it to get all the images of a folder back, but when i scroll now there is a lag, it does not feel smooth.

Got any tips on how I can fix this?
The Image folder has 1k images.
Thanks

Spoiler: Code

Type MyImageData (IndexOfFirstImage As Int,lst_image_path As List)

Dim path As String = File.DirRootExternal & "/Snapchat"
Wait For (File.ListFilesAsync(path)) Complete (Success As Boolean, Files As List)
   
    If Success And Files.IsInitialized Then
   
        For i = 1 To Files.Size Step 4
       
            Dim tmp_lst As List
            tmp_lst.Initialize
       
            For z = 0 To 3
                If i + z < Files.Size Then
                    tmp_lst.Add(File.Combine(path, Files.Get(i + z)))
                End If
            Next
       
            PCLV.AddItem(150dip, xui.Color_White, CreateMyImageData(i,tmp_lst))
        Next
   
        PCLV.ShowScrollBar = False 'no fast scrolling
        PCLV.ExtraItems = 5
        PCLV.Commit
    Else
        Log("error")
    End If

Sub CustomListView1_VisibleRangeChanged (FirstIndex As Int, LastIndex As Int)
    For Each i As Int In PCLV.VisibleRangeChanged(FirstIndex, LastIndex)
        Dim item As CLVItem = CustomListView1.GetRawListItem(i)
        Dim pnl As B4XView = xui.CreatePanel("")
        item.Panel.AddView(pnl, 0, 0, item.Panel.Width, item.Panel.Height)
        Dim data As MyImageData = item.Value
        'Create the item layout
        pnl.LoadLayout("Item")
        For i = 0 To 3
            pnl.GetView(0).GetView(i + 4).Text = data.IndexOfFirstImage + i
            SetImage(data.lst_image_path.Get(i), pnl.GetView(0).GetView(i))
        Next
    Next
End Sub

Sub SetImage(path As String, ImageView As B4XView)
        Try
            If ImageView.Parent.Parent.IsInitialized Then
                Dim bmp As B4XBitmap = xui.LoadBitmapResize(path,"",ImageView.Width,ImageView.Height,True)
                ImageView.SetBitmap(bmp)
            End If
        Catch
            Log(LastException)
        End Try
End Sub

Public Sub CreateMyImageData (IndexOfFirstImage As Int,lst_image_path As List) As MyImageData
    Dim t1 As MyImageData
    t1.Initialize
    t1.IndexOfFirstImage = IndexOfFirstImage
    t1.lst_image_path = lst_image_path
    Return t1
End Sub

 

[Erel]

Can you upload a zip file with some of the images?

 

[Alexander Stolte]

Can you upload a zip file with some of the images?

I send you a E-Mail, because, 4 files in the zip are 2MB big.

 

[Erel]

There are some issues in the code which causes it to fail when there are 4 images. Though it doesn't really matter. I'm pretty sure that the slow part is the loading of the large images, this is true even if you are using LoadBitmapResize.

Measure this time:

Dim n As Long = DateTime.Now
    For i = 0 To 3
            pnl.GetView(0).GetView(i + 4).Text = data.IndexOfFirstImage + i
            SetImage(data.lst_image_path.Get(i), pnl.GetView(0).GetView(i))
        Next
Next
Log(DateTime.Now - n)

In release mode.

Repeat it with smaller images:

Dim bmp As B4XBitmap = xui.LoadBitmapResize(path,"",ImageView.Width / 2,ImageView.Height / 2,True)

Does it change anything?

 

[Alexander Stolte]

Measure this time:

Same as before, the time is 25-133 the average is about 50-70.

Spoiler

45
39
74
65
55
81
43
41
80
67
59
133
64
81
56
68
65
23
67
75
58
76
63
53
85
42
61
83
65
71
85
59
40
40
36
66
69
60
66
53

Repeat it with smaller images:

maybe a little

Spoiler

47
55
66
64
71
75
55
72
50
86
54
37
38
52
37
55
96
38
30
95
36
47
66
48
56
79
13
44
42
103
28
48
43
37
57
87
31
96
39
45

 

[Erel]

The bottleneck is the image loading. Reducing the number of images, even if you increase each ImageView size, will make a big difference.

Another option is to prepare thumbnails. You can for example create a loop with Sleep and go over all the images and create thumbnails files (only when there aren't already thumbnails).

 

[Alexander Stolte]

The bottleneck is the image loading. Reducing the number of images, even if you increase each ImageView size, will make a big difference.

and loading the images async. is not possible?

 

[Erel]

Not so simple and might not help too much as you need to load many large images while the user scrolls.

If you don't want to reduce the number of visible images then you need to prepare thumbnails.

 

[Alexander Stolte]

I'll try it with thumbnails and load more on reached end. Thanks.

 

[Alexander Stolte]

Now it's smooth.
1k images = 21MB of thumbnails.
If no thumbnail is available yet, then it still jerks, but afterwards the list is smooth.
I create a "cache" folder in DirInternal and put the thumnails in it.