Android Question how to get image on expandable clv

Sifu · Sep 3, 2021

Hello,

As a beginner I was playing with CLV expandable and I'm trying to use only 3 expandebles and put a different image to each.
I think I'm close as the image get downloaded but not placed. Search many example and tried. I must be doing something wrong.
How can to do this correct?

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

End Sub

Sub Globals
    Private clv1 As CustomListView
    Private lblTitle As B4XView
    Private pnlTitle As B4XView
    Private pnlExpanded As B4XView
    Private xui As XUI
    Private expandable As CLVExpandable
    Private TrkImage1 As ImageView
    Private TrkImage2 As ImageView
    Private TrkImage3 As ImageView
    Private ImageView2 As ImageView
    Public lnk1 As String
    Public lnk2 As String
    Public lnk3 As String
End Sub

Sub Activity_Create(FirstTime As Boolean)
    Activity.LoadLayout("1")
    expandable.Initialize(clv1)
    'For i = 1 To 20
        'Dim p As B4XView = CreateItem(Rnd(0xFF000000, 0xFFFFFFFF), "Item #" & i, 300dip + 60dip)
        'clv1.Add(p, expandable.CreateValue(p, "some value"))
    'Next
    TrkImage1.Initialize("")
    TrkImage2.Initialize("")
    TrkImage3.Initialize("")
    
    'lnk1 = "https://b4x-4c17.kxcdn.com/images3/android.png"
    'lnk2 = "https://b4x-4c17.kxcdn.com/images3/apple.png"
    'lnk3 = "https://b4x-4c17.kxcdn.com/images3/hp.png"
    DownloadImage("https://b4x-4c17.kxcdn.com/images3/android.png", TrkImage1)
    DownloadImage("https://b4x-4c17.kxcdn.com/images3/apple.png", TrkImage2)
    DownloadImage("https://b4x-4c17.kxcdn.com/images3/hp.png", TrkImage3)
    
    Dim p1 As B4XView = CreateItem((0xFFD00014), "First Image", TrkImage1, 360dip) ' TrkImage1,
    clv1.Add(p1, expandable.CreateValue(p1, "1"))
    Dim p2 As B4XView = CreateItem((0xFFFF7600), "Second Image", TrkImage2, 360dip) ' TrkImage2,
    clv1.Add(p2, expandable.CreateValue(p2, "2"))
    Dim p3 As B4XView = CreateItem((0xFFFFC600), "Third Image", TrkImage3, 360dip) ' TrkImage3,
    clv1.Add(p3, expandable.CreateValue(p3, "3"))
End Sub

Sub CreateItem(clr As Int, Title As String,  trkimg As ImageView, ExpandedHeight As Int) As B4XView 'trkimg As ImageView,
    Dim p As B4XView = xui.CreatePanel("")
    p.SetLayoutAnimated(0, 0, 0, clv1.AsView.Width, ExpandedHeight)
    p.LoadLayout("Item")
    p.SetLayoutAnimated(0, 0, 0, p.Width, p.GetView(0).Height) 'resize it to the collapsed height
    lblTitle.Text = Title
    pnlTitle.Color = clr
    pnlExpanded.Color = ShadeColor(clr)
    'ImageView2.Bitmap = trkimg
    'DownloadImage(TrkImage1, trkimg)
    Return p
End Sub

Sub DownloadImage(Link As String, TrkImage As ImageView )
    Dim j As HttpJob
    j.Initialize("", Me)
    j.Download(Link)
    Wait For (j) JobDone(j As HttpJob)
    If j.Success Then
        Log("Current link: " & Link)
        'Log(j.GetString)
        'TrkImage1.Bitmap = j.GetBitmap
        'TrkImage1.Tag = j.GetBitmap
        'j.GetBitmap = TrkImage
    End If
    j.Release
End Sub

Sub ShadeColor(clr As Int) As Int
    Dim argb() As Int = GetARGB(clr)
    Dim factor As Float = 0.75
    Return xui.Color_RGB(argb(1) * factor, argb(2) * factor, argb(3) * factor)
End Sub

Sub GetARGB(Color As Int) As Int()
    Private res(4) As Int
    res(0) = Bit.UnsignedShiftRight(Bit.And(Color, 0xff000000), 24)
    res(1) = Bit.UnsignedShiftRight(Bit.And(Color, 0xff0000), 16)
    res(2) = Bit.UnsignedShiftRight(Bit.And(Color, 0xff00), 8)
    res(3) = Bit.And(Color, 0xff)
    Return res
End Sub


Sub clv1_ItemClick (Index As Int, Value As Object)
    expandable.ToggleItem(Index)
End Sub


Sub Activity_Resume

End Sub

Sub Activity_Pause (UserClosed As Boolean)

End Sub

Erel · Sep 5, 2021

1. Use B4XPages. Don't waste your time with activities (your code doesn't handle the activity lifecycle correctly).

2. You aren't doing anything with trkimg in CreateItem. You should add it to the panel (p). Make sure that there is no ImageView named trkimg in the Item layout file.

3. You should set the image in DownloadImage:

B4X:

TrkImage1.Bitmap = j.GetBitmap

Sifu · Sep 5, 2021

Thank you, I will try it.

Sifu · Sep 5, 2021

I changed it to B4XPages.
Trying to add it to p in several ways, but get lot of errors, trkimg is not used.

If I'm correct the TrkImage1

B4X:

Dim p1 As B4XView = CreateItem((0xFFD00014), "First Image", TrkImage1, 360dip) ' TrkImage1,
    clv1.Add(p1, expandable.CreateValue(p1, "1"))

requests from trkimg As ImageView

B4X:

Sub CreateItem(clr As Int, Title As String,  trkimg As ImageView, ExpandedHeight As Int) As B4XView

which then requests from TrkImage As ImageView

B4X:

Sub DownloadImage(Link As String, TrkImage As ImageView)

which uses one of the download request? Please correct me if I'm wrong.

Not undersanding how this add to p should be written correct.
------------------------------------------------------
I did another test with script from snippet Image downloader where another module is used, then i get 3 same images on each.
But I want 3 different images.
-----------------------------------------------------------------------
Simplest way is best.
How to write p correct for download image?
Thank you

XorAndOr · Sep 5, 2021

B4X:

Sub Globals
    Private clv1 As CustomListView
    Private lblTitle As B4XView
    Private pnlTitle As B4XView
    Private pnlExpanded As B4XView
    Private xui As XUI
    Private expandable As CLVExpandable
    Private ImageView2 As ImageView
    Private img1 As ImageView   
    Dim p1 As B4XView
    Dim p2 As B4XView
    Dim p3 As B4XView
    
End Sub

Sub Activity_Create(FirstTime As Boolean)
    
    Activity.LoadLayout("1")
    
    expandable.Initialize(clv1)

    img1.Initialize("")
    
    p1 = CreateItem(0xFFFF7600, "First Image", img1, 360dip)
    clv1.Add(p1, expandable.CreateValue(p1, "1"))
    DownloadImage("https://b4x-4c17.kxcdn.com/images3/android.png", ImageView2)
        
    p2 = CreateItem(0xFFFF7600, "Second Image", img1, 360dip)
    clv1.Add(p2, expandable.CreateValue(p2, "2"))
    DownloadImage("https://b4x-4c17.kxcdn.com/images3/apple.png", ImageView2)
    
    p3 = CreateItem(0xFFFF7600, "Third Image", img1, 360dip)
    clv1.Add(p3, expandable.CreateValue(p3, "3"))   
    DownloadImage("https://b4x-4c17.kxcdn.com/images3/hp.png", ImageView2)
    
End Sub

Sub CreateItem(clr As Int, Title As String, myimg As ImageView,ExpandedHeight As Int) As B4XView
    Dim p As B4XView = xui.CreatePanel("")
    p.SetLayoutAnimated(0, 0, 0, clv1.AsView.Width, ExpandedHeight)
    p.LoadLayout("Item")
    p.SetLayoutAnimated(0, 0, 0, p.Width, p.GetView(0).Height) 'resize it to the collapsed height
    lblTitle.Text = Title
    pnlTitle.Color = clr
    pnlExpanded.Color = ShadeColor(clr)
    ImageView2.Bitmap = myimg.Bitmap' <----------from designer
    Return p
End Sub


Sub DownloadImage(Link As String, iv As ImageView )   
    Dim j As HttpJob
    j.Initialize("", Me)
    j.Download(Link)
    Wait For (j) JobDone(j As HttpJob)
    If j.Success Then       
        iv.Bitmap = j.GetBitmap       
    End If   
    j.Release   
End Sub

Sifu · Sep 5, 2021

@XorAndOr this is working very good. I would not have figured that out. Now I have to study how this is working and search the guides, as i was reading but it was not clear for me. Thak you very much!!
Did not know that image could be put under the clv1.add line, I thought was put into variable.

Mahares · Sep 6, 2021

Sifu said:
this is working very good

The code may look neater if you use a loop like this:

B4X:

    Dim MyList As List    
    MyList.Initialize
    MyList=Array("android.png", "apple.png", "hp.png" )
    For i= 0 To MyList.Size -1
        Dim p As B4XView =CreateItem(0xFFFF7600, MyList.Get(i), img1, 360dip)
        clv1.Add(p , expandable.CreateValue(p, i))
        DownloadImage("https://b4x-4c17.kxcdn.com/images3/" & MyList.Get(i), ImageView2)
    Next

Instead of repeating the same code like you have here:

B4X:

    Dim p1 As B4XView
    Dim p2 As B4XView
    Dim p3 As B4XView
    p1 = CreateItem(0xFFFF7600, "First Image", img1, 360dip)
    clv1.Add(p1, expandable.CreateValue(p1, "1"))
    DownloadImage("https://b4x-4c17.kxcdn.com/images3/android.png", ImageView2)
        
    p2 = CreateItem(0xFFFF7600, "Second Image", img1, 360dip)
    clv1.Add(p2, expandable.CreateValue(p2, "2"))
    DownloadImage("https://b4x-4c17.kxcdn.com/images3/apple.png", ImageView2)
    
    p3 = CreateItem(0xFFFF7600, "Third Image", img1, 360dip)
    clv1.Add(p3, expandable.CreateValue(p3, "3"))
    DownloadImage("https://b4x-4c17.kxcdn.com/images3/hp.png", ImageView2)

Sifu · Sep 6, 2021

Thank you Mahares!
A bit like in the original.
But I wanted specific color for each, I took it out of the for loop. It's not in the example from XorAndOr, but it is in the zip.
I will try to make that with the example you give.

Mahares · Sep 7, 2021

Sifu said:
I wanted specific color for each

You take the same approach as for the links:

B4X:

Dim MyColors As List
    MyColors.Initialize
    MyColors = Array(0xFFD00014, 0xFFFF7600, 0xFFFFC600)

Then, you extract the corresponding color with: MyColors.Get(i) inside the loop

Sifu · Sep 7, 2021

Thanks Mahares, I'm going to test this.

**edit** works great!
How the for loop works I understand, but did not know how to use it in this script.
Starting to understand a bit now how getting the image and put there via the variables. Can not do it without examples. Thanks you and XorandOr

Android Question how to get image on expandable clv

Sifu

Active Member

Attachments

Erel

B4X founder

Sifu

Active Member

Sifu

Active Member

Attachments

XorAndOr

Active Member

Sifu

Active Member

Mahares

Expert

Sifu

Active Member

Mahares

Expert

Sifu

Active Member

Similar Threads