Android Tutorial Expandable list based on CustomListView

Discussion in 'Tutorials & Examples' started by Erel, Jul 9, 2017.

  1. Erel

    Erel Administrator Staff Member Licensed User

    A cross platform version is available here: https://www.b4x.com/android/forum/t...t-based-on-xcustomlistview.86449/#post-547401

    expander.gif


    This example uses a slightly modified version of CustomListView to create an expandable list.

    Each item in the list is made of two panels. One for the title with the arrow and the other is the expanded panel.
    Note that the expanded items height can be different for different items.

    The example depends on AnimationPlus and StringUtils libraries.
     

    Attached Files:

    Last edited: Nov 23, 2017
    koaunglay, calsdn, walterf25 and 24 others like this.
  2. LucaMs

    LucaMs Expert Licensed User

    Very useful, thank you.

    OT: what is that player?
     
  3. Erel

    Erel Administrator Staff Member Licensed User

    ocalle, Beja, asales and 2 others like this.
  4. LucaMs

    LucaMs Expert Licensed User

  5. tucano2000

    tucano2000 Active Member Licensed User

    Excellent. Very useful.

    I found the library to work with the example here => https://www.b4x.com/android/forum/threads/lib-animationplus.21313/


    I have a project with intent to use this for the 2 Android and iOS platforms. It might be possible to port to iOS as well.
    It seems like the difficulty will be that library that does the animation and especially the customview in design that does not exist for b4i.
     
    Last edited: Jul 9, 2017
  6. Erel

    Erel Administrator Staff Member Licensed User

    B4i CustomListView is very similar and it is also implemented as a custom view.

    You can use this code to create a rotation animation: https://www.b4x.com/android/forum/threads/animations.46156/#post-338075
     
  7. Erel

    Erel Administrator Staff Member Licensed User

    An updated version was uploaded. The collapsing animation was improved.
     
    BillMeyer and DonManfred like this.
  8. sseaand

    sseaand Member Licensed User

    Please tell me why when hide the panel buttons seen in the background? How to fix it?
    [​IMG]
     
  9. Erel

    Erel Administrator Staff Member Licensed User

    It happens because there are gaps between the items. Decreasing the dividers height will make it less prominent.

    Another option which can work with the layout you posted is to set the divider height to 0 and add a thin panel as the divider to the items layout. Set the panel's background color to grey.
     
  10. sseaand

    sseaand Member Licensed User

    where the divider size is set?
     
  11. Erel

    Erel Administrator Staff Member Licensed User

  12. Noelkman

    Noelkman Member Licensed User

    Hi there,
    a while ago I had started something like this but now there it is. Great!
    Situation: I have added a listview in the item container but it instead of scrolling that listview the expanable list is scrolling.
    Question: Is this not possible?
     
  13. Noelkman

    Noelkman Member Licensed User

    Looks like it's already answered here
    Thanks.
     
  14. Syd Wright

    Syd Wright Active Member Licensed User

    Nice expandable listview! Is there a simple way to only allow one row to open at a time (i.e. to automatically close all other rows if a particular row is selected)?

    PS: How and where are both buttons added? I can't find them anywhere.
     
    Last edited: Oct 3, 2017
  15. rboeck

    rboeck Well-Known Member Licensed User

    Look with the designer; you have here two layouts, the buttons are part of one of them.
     
  16. Syd Wright

    Syd Wright Active Member Licensed User

    Silly me. I opened 1.bal but overlooked item.bal. Thanks.
     
  17. Erel

    Erel Administrator Staff Member Licensed User

    This code will collapse open items before a new one is expanded:
    Code:
    Sub ExpandItem (index As Int)
       
    For i = 0 To clv1.GetSize - 1
         
    Dim p As Panel = clv1.GetPanel(i)
         
    If p.Tag = True Then CollapseItem(i)
       
    Next
       clv1.ResizeItem(index, ExpandedHeight)
       clv1.GetPanel(index).Tag = 
    True
       AnimatedArrow(index, 
    0180)
    End Sub
     
    Syd Wright likes this.
  18. José J. Aguilar

    José J. Aguilar Active Member Licensed User

    Will be there an example based on xCustomListView?.

    Thanks¡
     
  19. JLS

    JLS Member Licensed User

    A better way to fix this maybe making the expandable panel no visible before collapsing it:

    Code:
    clv1.GetPanel(Index).GetView(1).SetVisibleAnimated(300,False)
    clv1.ResizeItem(Index, 
    110dip)
    clv1.GetPanel(Index).Tag = 
    False
    Of course make it visible when expanding it.

    Code:
    clv1.ResizeItem(Index, 330dip)
    clv1..GetPanel(Index).Tag = 
    True
    clv1.GetPanel(Index).GetView(
    1).SetVisibleAnimated(300,True)
    The panel visibility must be set to False on the designer.
     
  20. walterf25

    walterf25 Well-Known Member Licensed User

    :D:D:D

    Very nice!
     
Loading...
  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