B4A Library [Class] Expandable Panels

Intro:
These are simple panels that can be easily expanded and collapsed with a small animation.

Future Improvements:
There can be many improvements to this class, and I would love to learn what the best coding style for classes is.
- Coding style (what is exposed and what is not, comments, handling views)

License:
Free to use. But post any modifications, and improvements back here so the community version becomes better.

Better Demo apk: See here

EDIT:
Class improved with better animations with Informatix's NOA library. Sample available in this post: http://www.b4x.com/android/forum/threads/class-expandable-panels.27366/page-2#post-275751

 

[kozbot]

Quick question: How do you make the corner radius rounded in this scenario? I've managed to change everything else that I wanted, but not the radius.

Thanks!

 

[stanks]

for labels in this example change label color, set corner radius to for example 10 and change alpha value to for example 127 and you will have rounded corners. for panel idk

 

[stanks]

for panel search froum

 

[kozbot]

ok, I'm sorry for the stupid question, but I've tried for 3 days, and I'm lost... so I'm trying to get the expanding panels to have a layout on it that I've created in the designer. I've got 5 panels that on panel click needs to show a different layout on each panel. Can you please give me an idea of how to do this. I've basically got the example coding to set up the 5 panels, but I can't figure out how to put the layout on each panel. Please help?

 

[thedesolatesoul]

ok, I'm sorry for the stupid question, but I've tried for 3 days, and I'm lost... so I'm trying to get the expanding panels to have a layout on it that I've created in the designer. I've got 5 panels that on panel click needs to show a different layout on each panel. Can you please give me an idea of how to do this. I've basically got the example coding to set up the 5 panels, but I can't figure out how to put the layout on each panel. Please help?

I dont think I understand what you need.
Have a look at the posts in the beginning of the thread:
http://b4x.com/android/forum/threads/class-expandable-panels.27366/#post-246946
http://b4x.com/android/forum/threads/class-expandable-panels.27366/#post-254568

 

[kozbot]

The example is in code, but I can't figure out how to add layouts that I've created in the designer to the panels that have been created by the code in the example.

I have 5 different layouts that I want to go on the 5 panels created in the example code. I've seen this code earlier:
expPnls(i).AsPanel.LoadLayout("my_layout")
But I don't know where to put it in the example code.

I dont think I understand what you need.
Have a look at the posts in the beginning of the thread:
http://b4x.com/android/forum/threads/class-expandable-panels.27366/#post-246946
http://b4x.com/android/forum/threads/class-expandable-panels.27366/#post-254568

 

[thedesolatesoul]

After you initialize the expandable panels just load the layout.

 

[kozbot]

Does this make sense? cos as much as I'd like to make this work, it doesn't. The panels no longer move now. This is my Activity_Create

Sub Activity_Create(FirstTime As Boolean)
    'Do not forget to load the layout file created with the visual designer. For example:
    'Activity.LoadLayout("Simple")
    clrs(0) = Colors.RGB(0,0,0)
    clrs(1) = Colors.RGB(2,25,92)
    Gradient1.Initialize("TOP_BOTTOM", clrs)
    Activity.Background = Gradient1
    sv.Initialize(100%y)
    Activity.AddView(sv,0,0,100%x,100%y)
    sv.Color = Colors.Transparent
    Dim Top As Int = 0
    For i = 0 To 4
        ' Initialize with the event name (not sure how to combine the events in to one)
        expPnls(i).Initialize("expPnls" , "Main" )
        ' Get a reference to the panel
        pnls(i) = expPnls(i).AsPanel
        sv.Panel.AddView(pnls(i),10dip,Top,100%x-20dip,100dip)
        Top = Top + 61dip
        ' Set up parameters for the expandable panels
        expPnls(i).setSpeed(5,100)
        expPnls(i).maxHeight = 400dip
        expPnls(i).minHeight = 60dip
        If i = 0 Then
        Activity.LoadLayout("EssentialsStep1")
        Else If i = 1 Then
        Activity.LoadLayout("EssentialsStep2")
        Else If i = 2 Then
        Activity.LoadLayout("EssentialsStep3")
        Else If i = 3 Then
        Activity.LoadLayout("EssentialsStep4")
        Else If i = 4 Then
        Activity.LoadLayout("EssentialsStep5")
        End If
        ' Collapse the panel
        expPnls(i).Collapse
    Next
 
End Sub

 

[thedesolatesoul]

Question for you:
If you want to load the layout in the expPnl why are you loading it in the activity?
Why do you do Activity.LoadLayout(...), you should do exPnls(i).AsPanel.LoadLayout(...)

 

[tomky]

Hi.
This class works with two arrays:
Dim expPnls (3) As expandablePanel
Dim pnls (3) As Panel
and it draws 3 panels.

How I can show a variable number of panels depending on a list, which is not fixed as the arrays?
I suppose a list is like an ArrayList .

Thank you.

 

[tomky]

Hi.
I've already solved using these arrays first, and then redrawing the views contained in the panels after removing them, to adapt to the new number of panels received from the list:
For 0 to list.size -1...
I also made those views first invisible , then visible during the second load from the layout.


But now I want to know how to move to the position 0x , 0y of the screen, or be entirely visible the selected and expanded panel, at least down. With autoscroll effect.

And how to collapse automatically a panel when you click on another.

Thanks.

 

[tomky]

Hi.
I have already answered the second question, how a panel collapse automatically when you click on another :

Sub expPnls_Click(MyExpPnl As expandablePanel)

    If listP.Size > 0 Then

        For i = 0 To listP.Size -1
             If expPnls(i).IsExpanded Then
                 expPnls(i).Collapse
             End If   
        Next

        MyExpPnl.ToggleHeight
    End If

End Sub

I do not know yet the answer to my question of the scroll.