Android Question Loading Images customListView

gregorio_adrian_gimenez

Active Member
Licensed User
Hi Everyone! This code is a chat, where each message loads in a customlistview the image of the user. When I start the activity, I load the conversations saved in a SQLITE previously, (more than 50 conversations with images) and in this case it takes too long.

I suppose it is to load the image of each message .. but I could not solve it. I share the code if someone can help me with any idea how to improve it Thank you very much!


this code iterates more than 100 times, it gets very slow

I tried this code with VisibleRangeChanged, but it turned out worse.
The images are always saved in file.dirinternal previous.

B4X:
Sub Nuevo_mensaje_privado ( mapa_mensaje As Map)
    
    
    If mapa.Get("usuario_Uid") = mapa_mensaje.Get("usuario_Uid") Or mapa.Get("usuario_Uid") = mapa_mensaje.Get("token")Or mapa.Get("usuario_Uid") = mapa_mensaje.Get("my_usuario_Uid")  Then
        
        Private p As Panel
        p.Initialize("p")
        p.Visible = False
        p.SetLayoutAnimated(0, 0, 0, clv_chats_privado.AsView.Width, 15%y)
        
    'Activity.AddView(p,2%X,0,96%x,5%Y)
    clv_chats_privado.Add(p,mapa_mensaje)
    Sleep(0)
    clv_chats_privado.Base_Resize(clv_chats_privado.AsView.Width,55%y)
    If clv_chats_privado.Size > 0 Then clv_chats_privado.JumpToItem(clv_chats_privado.Size - 1)

    End If
End Sub


Sub clv_chats_privado_VisibleRangeChanged (FirstIndex As Int, LastIndex As Int)
    
    
    Dim ExtraSize As Int = 20
    'For i = Max(0, FirstIndex - ExtraSize) To Min(LastIndex + ExtraSize, clv_chats_privado.Size - 1)
    
For i = 0 To clv_chats_privado.Size - 1
    Dim p As Panel = clv_chats_privado.GetPanel(i)
    If i > FirstIndex - ExtraSize And i < LastIndex + ExtraSize Then
        If p.NumberOfViews = 0 Then
                
                Dim mapa_mensaje As Map= clv_chats_privado.GetValue(i)
                
        
               
                            
            
                p.LoadLayout("insertar_mensaje")
                'p.RemoveView
                'p.Visible = True
    
                Dim imagen_perfil As String
        
                Dim foto_url As String = mapa_mensaje.Get("foto_url")
                Dim mensaje As String = mapa_mensaje.Get("mensaje")
                Dim usuario_Uid As String = mapa_mensaje.Get("usuario_Uid")

                label_texto.Text =mensaje
                imagen_perfil= foto_url
    
                'The images are always saved in file.dirinternal

    
                Try
                    If Starter.auth.CurrentUser.IsInitialized Then
    
                        If File.Exists(File.DirInternal,mapa_mensaje.Get("usuario_Uid")) Then
                    
                            
'always run here
                            ImageView_foto_url.SetBitmap(CreateRoundBitmap(LoadBitmapSample(File.DirInternal,mapa_mensaje.Get("usuario_Uid"),40dip,40dip), 15%x))
                           
        
                        Else
                
                            Starter.storage.DownloadFile($"/public/${mapa_mensaje.Get("usuario_Uid")}/foto"$ , File.DirInternal,mapa_mensaje.Get("usuario_Uid"))
                            
                    
                            wait for Storage_DownloadCompleted (ServerPath As String, Success As Boolean)
                  
                            If Success Then
                                
                                

                                ImageView_foto_url.SetBitmap(CreateRoundBitmap(LoadBitmapSample(File.DirInternal,mapa_mensaje.Get("usuario_Uid"),40dip,40dip), 15%x))
        
                            Else
        
                                Log(LastException)
        
                                If Starter.auth.CurrentUser.PhotoUrl = "" Then
            
                                Else
                            
                                    DownloadImage(mapa_mensaje.Get("foto_url"),ImageView_foto_url, mapa_mensaje.Get("usuario_Uid"))
                                
                                   
                                End If
                            
                            End If
                        End If
                    End If
                Catch
                    Log("no pudo descargar imagen")
        
                End Try
        
                'Seteo el tamaño
                Private su As StringUtils
    
                Label_fecha.SetLayoutAnimated(100,1%x,1%y,100%x,2%y)
                label_texto.TextSize = label_texto.TextSize/access.GetUserFontScale
    
                ' orienta el mensaje de un lado al otro
                
                If Starter.auth.CurrentUser.Uid = usuario_Uid Then
                    label_texto.SetLayoutAnimated(100,20%x,3%y,50%x,3%y)
                    ImageView_foto_url.SetLayoutAnimated(100,6%x,-1%y,14%x,14%y)
                    Label_hora.SetLayoutAnimated(100,80%x,1%y,10%x,2%y)
    
                    label_texto.TextColor = Colors.White
                    label_texto.Typeface = Typeface.SANS_SERIF
                    label_texto.Color = Colors.ARGB(255,41,19,65)
                    label_texto.Padding=Array As Int (10dip, 2dip, 20dip, 5dip)

                Else
                    label_texto.SetLayoutAnimated(100,30%x,3%y,50%x,3%y)
                    ImageView_foto_url.SetLayoutAnimated(100,82%x,-1%y,14%x,14%y)
                    Label_hora.SetLayoutAnimated(100,6%x,1%y,10%x,2%y)
    
                    label_texto.Typeface = Typeface.SANS_SERIF
                    label_texto.Color = Colors.ARGB(100,136,136,136)
                    label_texto.Padding=Array As Int (10dip, 2dip, 20dip, 5dip)
        
                End If
        
        
                Label_fecha.Height =su.MeasureMultilineTextHeight(Label_fecha,Label_fecha.Text)
                label_texto.Height=su.MeasureMultilineTextHeight(label_texto,label_texto.Text) +2.5%y
    
                Label_hora.Top = Label_fecha.Height + Label_nombre.Height- 3%y
                DateTime.DateFormat = "HH:mm"
                Label_hora.Text =  DateTime.Time(mapa_mensaje.Get("date"))

                Label_hora.TextSize = 9
                Label_hora.TextSize = Label_hora.TextSize/access.GetUserFontScale
        
                p.Height =label_texto.Height  +5%y
    
    
                p.Color = Colors.Transparent
    
                p.Visible = True
    
                clv_chats_privado.ResizeItem(i,p.Height)
    
            
    
                Sleep(0)
                
    
            End If

    Else
        If p.NumberOfViews > 0 Then
            p.RemoveAllViews
            End If
        End If
    Next

End Sub

Sub CreateRoundBitmap (Input As B4XBitmap, Size As Int) As B4XBitmap
    
    If Input.Width <> Input.Height Then
        'if the image is not square then we crop it to be a square.
        Dim l As Int = Min(Input.Width, Input.Height)
        Input = Input.Crop(Input.Width / 2 - l / 2, Input.Height / 2 - l / 2, l, l)
    End If
    Dim c As B4XCanvas
    Dim xview As B4XView = xui.CreatePanel("")
    xview.SetLayoutAnimated(0, 0, 0, Size, Size)
    c.Initialize(xview)
    Dim path As B4XPath
    path.InitializeOval(c.TargetRect)
    c.ClipPath(path)
    c.DrawBitmap(Input.Resize(Size, Size, False), c.TargetRect)
    c.RemoveClip
    
    c.DrawCircle(c.TargetRect.CenterX, c.TargetRect.CenterY, c.TargetRect.Width / 2 - 2dip, xui.Color_White, False, 5dip)
    c.Invalidate
    Dim res As B4XBitmap = c.CreateBitmap
    c.Release
    Return res
    
End Sub
 

gregorio_adrian_gimenez

Active Member
Licensed User
Hi all!
attached file!
When preparing this example, I could see that the size of the original image makes the scrolling very slow, for example, with a 2 MB photo.
If you wish, you can change the image "erel.jpg" for a heavier one and you can try how it affects the load and scrolling, you cannot put an image of that size because you cannot share the project with you.

I am loading the image into an imagview object with this code, is it the right way?
B4X:
ImageView_foto_url.SetBitmap(CreateRoundBitmap(LoadBitmapSample(File.DirInternal,mapa_mensaje.Get("usuario_Uid"),40dip,40dip), 15%x))


In this example, I placed a 72 kb photo and it worked much better, although I do a very fast scrolling, it has a certain delay in loading and shows the blank image view, or nothing

greetings to all
 

Attachments

  • custom_test.zip
    97.5 KB · Views: 124
Upvote 0
Top