Android Tutorial Cards list with CustomListView

This example uses xCustomListView to implement a list of cards.

As the items layout is created with the designer, it is simple to implement any layout you like. You can also combine different types of items in the same list.

The divider color and pressed color are set to transparent.
The items layout is made of a base panel. This panel is elevated and it has round corners.
Labels are used instead of buttons for the two actions.

The following code (based on: https://www.b4x.com/android/forum/threads/colorstatelist.40788/#content) sets the labels text color to a ColorStateList:

Sub SetColorStateList(Btn As Label,Pressed As Int,Enabled As Int)
   Dim States(2,1) As Int
   States(0,0) = 16842919    'Pressed
   States(1,0) = 16842910    'Enabled
   Dim CSL As JavaObject
   CSL.InitializeNewInstance("android.content.res.ColorStateList",Array(States,Array As Int(Pressed, Enabled)))
   Dim B1 As JavaObject = Btn
   B1.RunMethod("setTextColor",Array As Object(CSL))
End Sub

This way the color is changed when the labels are clicked.

The action bar color is set in the manifest editor: https://www.b4x.com/android/forum/threads/theme-colors.87716/#content

 

[Peter Simpson]

Looks really good @Erel, cheers...

 

[malaz]

Amazing @Erel, thanks for your efforts.

 

[tekh2999]

Tried installing this and looks like your missing some perimeters in your code:

CLV1.Add(CreateItem(CLV1.AsView.Width, $"This is item #${i}"$, bitmaps.Get(i - 1), content), ""

Won't compile.

Sub Activity_Create(FirstTime As Boolean)
    'Do not forget to load the layout file created with the visual designer. For example:
    Activity.LoadLayout("1")
    Activity.AddMenuItem3("", "refresh", xui.LoadBitmapResize(File.DirAssets, "ic_cached_white_24dp.png", 32dip, 32dip, True), True)
    Activity.AddMenuItem3("", "done", xui.LoadBitmapResize(File.DirAssets, "ic_done_white_24dp.png", 32dip, 32dip, True), True)
    Dim bitmaps As List = Array("pexels-photo-446811.jpeg", "pexels-photo-571195.jpeg", _
        "pexels-photo-736212.jpeg", "pexels-photo-592798.jpeg")
    For i = 1 To 4
        Dim content As String = $"Lorem ipsum dolor sit amet,
consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."$
        CLV1.Add(CreateItem(CLV1.AsView.Width, $"This is item #${i}"$, bitmaps.Get(i - 1), content), "")
    Next
End Sub

 

[DonManfred]

Tried installing this and looks like your missing some perimeters in your code:

No.
It does work without any change here.

Make sure to have the newest XUI Library installed.

 

[Erel]

As @DonManfred the example works as-is. My guess is that you are trying to use it with the older CustomListView class instead of xCustomListView which is based on XUI library.

 

[LucaMs]

480 x 800 - 1.5

[Also, a strange thing: on first click on Take Screenshot... I got an old screen shot, taken yestarday from a different device: adb?]

 

[Erel]

This is just an example of how to create a list of cards with CLV. The actual cards layout depends on your app requirements. You will need to do some work to support smaller screens.

The elevation shadow will appear on Android 5+ devices.

 

[Erel]

I've uploaded a new version that better handles smaller screens.

 

[PABLO2013]

tks

 

[naifnas]

Very good
Thanks Erel

 

[killiak]

Thanks Erel It's awesome, i take your example and get the info from my Website with PHP and works ok, but i think i making some mess I attach my sample.

Below that Round White square i see when it's loaded that the title is in there and the image is get it directly from Website

Private Sub CreateItem(Width As Int, titulo As String, resumen As String,Image As String) As Panel
    Dim p As B4XView = xui.CreatePanel("")
    Dim height As Int = 280dip
    If GetDeviceLayoutValues.ApproximateScreenSize < 4.5 Then height = 310dip
    p.SetLayoutAnimated(0, 0, 0, Width, height)
    p.LoadLayout("tarjeta")
    
    LblTitulo.Text = titulo
    LblResumen.Text = resumen
    
    SetColorStateList(LblAccion, xui.Color_LightGray, LblAccion.TextColor)

    
    DownloadImage(Image,Imagen)
    'Imagen.SetBitmap(xui.LoadBitmapResize(File.DirAssets, Imagen, Imagen.Width, Imagen.Height, True))
    Return p
End Sub

Instead of using your SetBitmap, i usea your DownloadImage from another example, that's the only difference....

But I have a lot of troubles with layout. Maybe you can help me out. Thanks!

 

[killiak]

Thanks Erel It's awesome, i take your example and get the info from my Website with PHP and works ok, but i think i making some mess I attach my sample.

Below that Round White square i see when it's loaded that the title is in there and the image is get it directly from Website

Private Sub CreateItem(Width As Int, titulo As String, resumen As String,Image As String) As Panel
    Dim p As B4XView = xui.CreatePanel("")
    Dim height As Int = 280dip
    If GetDeviceLayoutValues.ApproximateScreenSize < 4.5 Then height = 310dip
    p.SetLayoutAnimated(0, 0, 0, Width, height)
    p.LoadLayout("tarjeta")
  
    LblTitulo.Text = titulo
    LblResumen.Text = resumen
  
    SetColorStateList(LblAccion, xui.Color_LightGray, LblAccion.TextColor)

  
    DownloadImage(Image,Imagen)
    'Imagen.SetBitmap(xui.LoadBitmapResize(File.DirAssets, Imagen, Imagen.Width, Imagen.Height, True))
    Return p
End Sub

Instead of using your SetBitmap, i usea your DownloadImage from another example, that's the only difference....

But I have a lot of troubles with layout. Maybe you can help me out. Thanks!

Nevermind, simple parenting mess up!

 

[Carlos marin]

Hi, you can make cards in grid type market free or olx app

 

[cliv]

I use this for for load item:

Private Sub CreateItem (Width As Int,PubDate As String, Title As String, Content As String) As Panel
    Dim p As B4XView = xui.CreatePanel("")
    Dim height As Int = 280dip
 
    If GetDeviceLayoutValues.ApproximateScreenSize < 4.5 Then height = 310dip
    p.SetLayoutAnimated(0, 0, 0, Width, height)
    p.LoadLayout("Card1")

    lblPubDate.Text = PubDate
    lblTitle.Text = Title
    lblContent.Text = Content
 
    Dim newHeight As Int
    newHeight=su.MeasureMultilineTextHeight(lblContent, lblContent.Text)
    '???? Resize Panel height and lblContent height
 
    Return p
End Sub

... How can i resize PANEL and lblContent to fit text added when this is very long...?
... su is StringUtils

 

[Erel]

Thread locked. Please start a new thread for any question you have.

 

[Erel]

Example updated. It references xCustomListView library instead of the class module.