Android Question Customlistview with 2 columns and different heights

asales

Expert
Licensed User
Longtime User
I saw this post:
but I want to create a customlistview with 2 columns and different heights.
The cell will adjust according to content.
Is like the image below.

Any tips to make this?
Thanks in advance.

clv_2columns3.jpg
 

rleiman

Well-Known Member
Licensed User
Longtime User
Here's something to try. It doesn't have two columns but it does have several type of views for each row in the custom list view such as images, labels etc. I made two layouts. The first one contains the custom list view.

Screenshot 2021-01-18 at 20.16.12.png

The second layout is for each row of the custom list view.

Screenshot 2021-01-18 at 20.23.19.png

Here's how I populated the custom list view with coding.

B4X:
Sub BuildTheSongListCustomListView
   
    clvSongList.Clear

    ButtonSongDetails.Visible = False
    ButtonClearSong.Visible = False
   
    intCurrentSongSelected = kvs.Get("CurrentSongSelected")

    ' Add 10 items to the list view.
    '-------------------------------
    For intIndex = 0 To 9
       
        ' typValues holds values from a custom type object that can be accessed from the values
        ' parameter of the ItemClick handler of this xCLV.
        '--------------------------------------------------------------------------------------
        Dim typValues As typSongsListItemValues

        ' Adding items to the list view requires a Panel created in code.
        '----------------------------------------------------------------
        Dim p As B4XView = xui.CreatePanel("")

        ' This is the size for the panel and it will be animated.
        '--------------------------------------------------------
        p.SetLayoutAnimated(0, 0, 0, PanelSongList.Width, 200dip)
       
        p.LoadLayout("SongListCard")

        ' Populate the views with values from the database.
        ' Doing the replace here will make sure unchecked days will not be displayed in the list.
        '----------------------------------------------------------------------------------------
        LabelSongTitle.Text = kvs.Get("Song" & (intIndex + 1) & "Title")

        LabelSchedule.Text = LTrim(kvs.Get("Song" & (intIndex + 1) & "Schedule"))
        LabelSchedule.Text = LabelSchedule.Text.Replace("100 ", "")
        LabelSchedule.Text = LabelSchedule.Text.Replace("200 ", "")
        LabelSchedule.Text = LabelSchedule.Text.Replace("300 ", "")
        LabelSchedule.Text = LabelSchedule.Text.Replace("400 ", "")
        LabelSchedule.Text = LabelSchedule.Text.Replace("500 ", "")
        LabelSchedule.Text = LabelSchedule.Text.Replace("600 ", "")
        LabelSchedule.Text = LabelSchedule.Text.Replace("700 ", "")
        LabelSchedule.Text = LTrim(LabelSchedule.Text)

        LabelScheduleFromUntil.Text = _
            kvs.Get("Song" & (intIndex + 1) & "ScheduleEnabledFrom") & " To " & _
            kvs.Get("Song" & (intIndex + 1) & "ScheduleEnabledUntil")

        If intIndex + 1 = _
            kvs.Get("CurrentSongSelected") Then

            If kvs.Get("Song" & (intIndex + 1) & "ScheduleIsEnabled") Then
                ImageViewSongScheduleIsEnabled.Bitmap = _
                        LoadBitmap(File.DirAssets, "light-on-icon.png")
            Else
                ImageViewSongScheduleIsEnabled.Bitmap = _
                        LoadBitmap(File.DirAssets, "light-off-icon.png")
            End If

            ImageViewSongScheduleIsEnabled.Visible = True
            ImageViewPlayPauseSong.Visible = True
        Else

            ' These are not displayed when the list is built because they will only be displayed
            ' when the user selects a song later.
            '-----------------------------------------------------------------------------------
            ImageViewSongScheduleIsEnabled.Visible = False
            ImageViewPlayPauseSong.Visible = False
        End If

        ' This is where the item row is added to the list view.
        ' Each list item has a set of Type structure elements associated with it.
        '------------------------------------------------------------------------
        clvSongList.Add(p,typValues)
    Next

    ' Force the last selected or schedulded song to be selected.
    '-----------------------------------------------------------
    If ServiceModule.blnScheduleIsPlayingSong Then
        intCurrentSongSelected = ServiceModule.intSongNumberSelected
    End If

    Sleep(100)
    clvSongList_ItemClick (intCurrentSongSelected - 1, "")
    clvSongList.ScrollToItem(intCurrentSongSelected - 1)
End Sub

These are all of the object declarations used in my app so you can match them up with the coding segments shown above.

B4X:
Sub Class_Globals
    Private Root As B4XView
    Private xui As XUI

    ' These custom types are used for the xCLV click handlers.
    '---------------------------------------------------------
    Type typSongsListItemValues (LabelSongTitle As String, strSomeMoreText As String)
    Type typCreaturesListItemValues (placeholder As String)

    ' Libraries.
    '-----------
    Public kvs As KeyValueStore
    Private Root As B4XView
    Private xui As XUI
    Private rp As RuntimePermissions
    Private cLvSelSongList As CLVSelections
    Private cLvSelCreaturesList As CLVSelections
    Private td As TimeDialog
    Private sf As Object
'    Private cdBackgroundColour As ColorDrawable

    ' Variables.
    '-----------
    Private strShared As String
    Public strCurrentLayout As String
    Private intLastClickedIndex As Int
    Private intCurrentSongSelected As Int
    Private intCurrentCreatureSelected As Int
    Private blnComingBackFromCreatureDetails As Boolean = False
    Private cdBackgroundColour As ColorDrawable
       
    ' On the screen.
    '---------------
    Private dialog As B4XDialog
    Private clvSongList As CustomListView
    Private clvCreatures As CustomListView
    Private ImageViewNaturesSong As ImageView
    Private ImageViewExit As ImageView
    Private ImageViewSongList As ImageView
    Private ImageViewPlayCurrentSong As ImageView
    Private ImageViewPlayPauseSong As ImageView
    Public ImageViewSongDetailsPlayPauseSong As ImageView
    Public ImageViewCreatureDetailsPlayPauseSong As ImageView
    Private ImageViewSongScheduleIsEnabled As ImageView
    Private ImageViewSongDetailsScheduleIsEnabled As ImageView
    Private ImageViewOvernight As ImageView
    Private ImageViewCallFrequencyLower As ImageView
    Private ImageViewCallFrequencyHigher As ImageView
    Private ImageViewCreature As ImageView
    Private ImageViewCreatureDetailsTitle As ImageView
    Private ImageViewSound As ImageView
    Private PanelMenu As Panel
    Private PanelSongList As Panel
    Private PanelSongDetails As Panel
    Private PanelCreatureDetails As Panel
    Private PanelPlayCurrentSong As Panel
    Private PanelSleepTimerSettings As Panel
    Private PanelSleepTimer As Panel
    Private pnlBlackCover As Panel
    Private pnlWhiteSleepTimerSettingsDialog As Panel
    Private ButtonBackToMenu As Button
    Private ButtonClearSong As Button
    Private ButtonSongDetails As Button
    Private ButtonBackToSongList As Button
    Private ButtonSongCreatureDetails As Button
    Private ButtonSongDetailsClearSong As Button
    Private ButtonBackToSongDetails As Button
    Private ButtonCloseSleepTimerSettings As Button
    Private LabelSongTitle As B4XView
    Private LabelSchedule As Label
    Private LabelScheduleFromUntil As Label
    Private LabelSongCreatureName As Label
    Private LabelSongDetailsScheduleFrom As Label
    Private LabelSongDetailsScheduleUntil As Label
    Private LabelCreatureTitle As Label
    Private LabelCreature As Label
    Private LabelCallFrequency As Label
    Private LabelScheduleFrom As Label
    Private LabelScheduleUntil As Label
    Private LabelNotification As Label
    Private LabelSleepTimerSettingsScreenTitle As Label
    Private B4XFloatTextFieldSongTitle As B4XFloatTextField
    Private B4XSeekBarVolume As B4XSeekBar
    Private B4XSeekBarCallFrequency As B4XSeekBar
    Private B4XSeekBarSleepTimerValue As B4XSeekBar
    Private CheckBoxSongDetailsTuesday As CheckBox
    Private CheckBoxSongDetailsWednesday As CheckBox
    Private CheckBoxSongDetailsFriday As CheckBox
    Private CheckBoxSongDetailsMonday As CheckBox
    Private CheckBoxSongDetailsSaturday As CheckBox
    Private CheckBoxSongDetailsSunday As CheckBox
    Private CheckBoxSongDetailsThursday As CheckBox
    Private GaugeSleepTimer As Gauge
End Sub

I hope this can get you started.
 
Last edited:
Upvote 0

Mahares

Expert
Licensed User
Longtime User
Last night I found Erel's example in my archives that features the thread request by @asales But when I wanted to put a link to its thread for @asales, I put down this search text in the forum search: scrolling multiple customlistview. After 5 pages, I could not find it, so I gave up. What is Erel's secret in finding the correct thread link so much faster than many of us.
 
Upvote 0

Erel

B4X founder
Staff member
Licensed User
Longtime User
There is a secret. There are many scoring features that affect the search results. The thread type (question, tutorial, etc.) is considered and in many cases it is too powerful.
When you know that you are looking for a question then help the search engine and set the prefix:

You will quickly find this one: "Scrool 2 Customlistview together" and my answer will lead you to the "double column customlistview" (you can also see it directly in the search results).
 
Upvote 0

Marvel

Active Member
Licensed User
Last night I found Erel's example in my archives that features the thread request by @asales But when I wanted to put a link to its thread for @asales, I put down this search text in the forum search: scrolling multiple customlistview. After 5 pages, I could not find it, so I gave up. What is Erel's secret in finding the correct thread link so much faster than many of us.
I just enter my search query in Google and add b4a to the end. It works like magic
 
Upvote 0
Top