Android Tutorial Cards list with CustomListView

Discussion in 'Tutorials & Examples' started by Erel, Dec 28, 2017.

Thread Status:
Not open for further replies.
  1. Erel

    Erel Administrator Staff Member Licensed User


    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: sets the labels text color to a ColorStateList:
    Sub SetColorStateList(Btn As Label,Pressed As Int,Enabled As Int)
    Dim States(2,1As Int
    0,0) = 16842919    'Pressed
       States(1,0) = 16842910    'Enabled
       Dim CSL As JavaObject
    "android.content.res.ColorStateList",Array(States,Array As Int(Pressed, Enabled)))
    Dim B1 As JavaObject = Btn
    "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:

    Attached Files:

    Last edited: Dec 31, 2017
  2. Peter Simpson

    Peter Simpson Expert Licensed User

    Looks really good @Erel, cheers...
  3. malaz

    malaz New Member Licensed User

    Amazing @Erel, thanks for your efforts.
  4. tekh2999

    tekh2999 Member Licensed 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.

    Sub Activity_Create(FirstTime As Boolean)
    'Do not forget to load the layout file created with the visual designer. For example:
    Activity.AddMenuItem3("""refresh", xui.LoadBitmapResize(File.DirAssets, "ic_cached_white_24dp.png"32dip32dipTrue), True)
    Activity.AddMenuItem3("""done", xui.LoadBitmapResize(File.DirAssets, "ic_done_white_24dp.png"32dip32dipTrue), True)
    Dim bitmaps As List = Array("pexels-photo-446811.jpeg""pexels-photo-571195.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."$

    $"This is item #${i}"$, bitmaps.Get(i - 1), content), "")
    End Sub
  5. DonManfred

    DonManfred Expert Licensed User

    It does work without any change here.

    Make sure to have the newest XUI Library installed.
  6. Erel

    Erel Administrator Staff Member Licensed User

    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.
  7. LucaMs

    LucaMs Expert Licensed User

    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?]
  8. Erel

    Erel Administrator Staff Member Licensed User

    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.
  9. Erel

    Erel Administrator Staff Member Licensed User

    I've uploaded a new version that better handles smaller screens.
    asales likes this.
  10. PABLO2013

    PABLO2013 Active Member Licensed User

  11. naifnas

    naifnas Active Member Licensed User

    Very good
    Thanks Erel
  12. killiak

    killiak Member Licensed 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

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

    '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!

    Attached Files:

  13. killiak

    killiak Member Licensed User

    Nevermind, simple parenting mess up!
  14. Carlos marin

    Carlos marin Active Member Licensed User

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

    cliv Member Licensed User

    I use this for for load item:

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

        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: Mar 5, 2018
  16. Erel

    Erel Administrator Staff Member Licensed User

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

    Erel Administrator Staff Member Licensed User

    Example updated. It references xCustomListView library instead of the class module.
    Peter Simpson and naifnas like this.
Thread Status:
Not open for further replies.
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice