Android Tutorial Cards list with CustomListView

Status
Not open for further replies.
Screenshot_20171228-125445.png


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:
B4X:
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
 

Attachments

  • CardsList.zip
    114.4 KB · Views: 3,966
Last edited:

tekh2999

Member
Licensed User
Longtime User
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.


B4X:
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
 

killiak

Member
Licensed User
Longtime User
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

B4X:
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!
 

Attachments

  • Screenshot_2018-01-02-11-36-51.png
    Screenshot_2018-01-02-11-36-51.png
    95.2 KB · Views: 1,540

killiak

Member
Licensed User
Longtime User
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

B4X:
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!
 

cliv

Member
Licensed User
Longtime User
I use this for for load item:

B4X:
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
 
Last edited:
Status
Not open for further replies.
Top