Android Question PreoptimizedCLV items scroll issue

[Kasun Kanchana]

Hello everyone. Recently I have developed an Android app where users can post their food recipes and see others' recipes. All the data such as recipe name, recipe images, ingredients, preparation steps, etc are stored in a MySQL database of my shared hosting service. To show recipes as a list, I'm making a remote MySQL connection through jdbcsql library.

To show recipes as a list, I have used Lazyloding with PreOptimizedCLV. The recipe image is downloaded after loading the data from the MySQL database including the image URL.

Loading around a few recipes is okay but when it comes to loading more recipes, the scrolling list is a bit laggy. I hope you can see it in below gif,

YouTube

Share your videos with friends, family, and the world

youtube.com

You can check the app from bellow link,
https://play.google.com/store/apps/details?id=com.foodiesdiary

Sub Class_Globals
    Private Root As B4XView 'ignore
    Private xui As XUI 'ignore
    Private CustomListView1 As CustomListView
    Dim pclv As PreoptimizedCLV
End Sub

Private Sub B4XPage_Created (Root1 As B4XView)
    Root = Root1
    Root.LoadLayout("Filter")
    pclv.Initialize(Me,"pclv",CustomListView1)
End Sub

Sub latest As ResumableSub
    CustomListView1.Clear
    Dim latestQuarry As String="SELECT r.recipe_id, r.user_id, r.category_id, r.title, r.description, r.cooking_time, r.creation_date, r.recipe_image_url, r.servings, c.category_name, u.user_name, u.user_image_url, COALESCE(rc.comment_count, 0) As comment_count, COALESCE(rr.avg_rating, 0) As avg_rating FROM tbl_recipes r JOIN tbl_users u ON r.user_id = u.user_id JOIN tbl_categories c ON r.category_id = c.category_id LEFT JOIN (Select recipe_id, COUNT(*) As comment_count FROM tbl_comments GROUP BY recipe_id) rc ON r.recipe_id = rc.recipe_id    LEFT JOIN (Select recipe_id, AVG(rating_value) As avg_rating FROM tbl_ratings GROUP BY recipe_id) rr ON r.recipe_id = rr.recipe_id ORDER BY r.creation_date DESC;"
    Dim SenderFilter As Object = Starter.mysql.ExecQueryAsync("SQL", latestQuarry, Null)
    Wait For (SenderFilter) SQL_QueryComplete (Success As Boolean, rs As JdbcResultSet)
    If Success Then
        Do While rs.NextRow
            Dim r As recipes
            r.Initialize
            r.category_id= rs.GetInt("category_id")
            r.cooking_time=rs.GetString("cooking_time")
            r.creation_date=rs.GetString("creation_date")
            r.description=rs.GetString("description")
            r.recipe_id=rs.GetInt("recipe_id")
            r.recipe_image_url=rs.GetString("recipe_image_url")
            r.servings=rs.GetInt("servings")
            r.title=rs.GetString("title")
            r.user_id=rs.GetString("user_id")

            Dim categoryName As String = rs.GetString("category_name")
            Dim username As String = rs.GetString("user_name")
            Dim commentCount As Int = rs.GetInt("comment_count")
            Dim avgRating As Float = rs.GetString("avg_rating")
            Dim userImageUrl As String = rs.GetString("user_image_url")

            Dim data As List
            data.Initialize
            data.Add(r)
            data.Add(categoryName)
            data.Add(username)
            data.Add(commentCount)
            data.Add(avgRating)
            data.Add(userImageUrl)
            
            pclv.AddItem(200dip,Colors.White,data)
        Loop
        rs.Close
        
        pclv.Commit
        pclv.B4XSeekBar1.mBase.Visible=False
        Return True
    Else
        Log(LastException)
        Return False
    End If
End Sub

Private 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 data As List
        data.Initialize
        data= CustomListView1.GetValue(i)
        item.Panel.AddView(B4XPages.MainPage.recipe_item2(CustomListView1,CustomListView1.AsView.Width,200dip,data.Get(0),data.Get(2),data.Get(5),data.Get(4),data.Get(3),data.Get(1)), 0, 0, item.Panel.Width, item.Panel.Height)
    Next
End Sub

 

[Erel]

1. Don't use PreoptimizedCLV unless you are showing many items (~5K+).
2. I don't see the code that handles the images. This is the most important code.
3. Use SimpleMediaManager.
4. See point #3

 

[Kasun Kanchana]

I forgot to add that part.

Sub recipe_item2 (clv As CustomListView,width As Int,height As Int, r As recipes, user_name As String, user_image As String, rating As Double, comments As Int, category As String) As Panel
    Dim pnl As B4XView=xui.CreatePanel("")
    pnl.SetLayoutAnimated(0,0,0,width,height)
    pnl.LoadLayout("main_recipe_item")
    
    img_recipe_item_recipe_image.SetBitmap(CreateRoundRectBitmap(LoadBitmapResize(File.DirAssets,"photo-1546069901-ba9599a7e63c.jpg",img_recipe_item_recipe_image.Width,img_recipe_item_recipe_image.Height,False),10dip))
    
    lbl_recipe_item_fav.Tag=r.recipe_id
    
    lbl_recipe_item_category.Text=$"${Chr(0xF02B)} ${category}"$
    Dim caa As Canvas
    caa.Initialize(Root)
    If lbl_recipe_item_category.Width<caa.MeasureStringWidth(lbl_recipe_item_category.Text,lbl_recipe_item_category.Typeface,lbl_recipe_item_category.TextSize) Then
        lbl_recipe_item_category.Width=caa.MeasureStringWidth(lbl_recipe_item_category.Text,lbl_recipe_item_category.Typeface,lbl_recipe_item_category.TextSize)+10dip
    End If

    Dim NumberOfMatches As Int=0
    NumberOfMatches = Starter.SQL1.ExecQuerySingleResult2("SELECT count(*) FROM tbl_fav WHERE recipe_id=?", Array As String(r.recipe_id))
    If NumberOfMatches=0 Then
        lbl_recipe_item_fav.Text=Chr(0xF08A)
    Else
        lbl_recipe_item_fav.Text=Chr(0xF004)
    End If

    lbl_recipe_item_ratings.Text = $"${Chr(0xF005)} ${rating} | ${Chr(0xF27A)} ${comments}"$
    Dim ca As Canvas
    ca.Initialize(Root)
    If lbl_recipe_item_ratings.Width<ca.MeasureStringWidth(lbl_recipe_item_ratings.Text,lbl_recipe_item_ratings.Typeface,lbl_recipe_item_ratings.TextSize) Then
        lbl_recipe_item_ratings.Width = ca.MeasureStringWidth(lbl_recipe_item_ratings.Text,lbl_recipe_item_ratings.Typeface,lbl_recipe_item_ratings.TextSize) +5dip
    End If
        
    Dim cs As CSBuilder
    cs.Initialize.Append(r.title).Append(CRLF).Size(10).Typeface(Typeface.FONTAWESOME).Append($"${Chr(0xF017)} ${r.cooking_time} | "$).Append(Chr(0xF007)).Append($" ${r.servings} Persons"$).PopAll
    lbl_recipe_item_recipe_details.Text=cs
    
    
    Downloadimage_Recipe_image(r.recipe_image_url,img_recipe_item_recipe_image)

    Downloadimage_user_image(user_image,lbl_recipe_item_user_image)

    Dim cs2 As CSBuilder
    cs2.Initialize.Clickable("cs",r.user_id).Underline.Append(user_name).PopAll
    cs2.EnableClickEvents(lbl_recipe_item_user_name)
    lbl_recipe_item_user_name.Text=cs2
    
    Dim rr As Reflector
    For Each v As B4XView In pnl.GetAllViewsRecursive
        rr.Target = v
        rr.SetOnTouchListener("clv_categories2_Touch")
    Next
    
    Return pnl
End Sub

Sub Downloadimage_Recipe_image (url As String, img As B4XView)
    Try
        Dim j As HttpJob
        j.Initialize("",Me)
        j.Download(url)
        Wait For (j) JobDone(j As HttpJob)
        If j.Success Then
            img.SetBitmap(CreateRoundRectBitmap(j.GetBitmap.Resize(img.Width,img.Height,False),10dip))
        End If
        j.Release
    Catch
        Log(LastException)
    End Try
End Sub

I have gone through the [B4X] SimpleMediaManager (SMM) and I think this can solve most of the problems that I have faced. Thank you Erel

 

[Kasun Kanchana]

1. Don't use PreoptimizedCLV unless you are showing many items (~5K+).
2. I don't see the code that handles the images. This is the most important code.
3. Use SimpleMediaManager.
4. See point #3

Hello, I know this is not relevant to this thread, but I have changed my code and used [B4X] SimpleMediaManager (SMM) to download and show recipe images. I have tested the app on real devices - Samsung A04S and Samsung M02 and It's working smoothly. But when I run the app on Emulator even as a release mode, the app runs lagging, the scrolling is not smooth and sometime it's stuck. It's worse than using PCLV as mentioned above.

Is this normal on an emulator? Will it have poor performance on older devices?

 

[Erel]

You cannot test performance on the emulator. The results are meaningless.