B4A Library [Class] Expandable Panels

thedesolatesoul · Mar 16, 2013

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 · Jun 12, 2015

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 · Jun 12, 2015

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 · Jun 12, 2015

for panel search froum

kozbot · Jun 14, 2015

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 · Jun 14, 2015

kozbot said:
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 · Jun 14, 2015

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.

thedesolatesoul said:
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 · Jun 14, 2015

After you initialize the expandable panels just load the layout.

kozbot · Jun 14, 2015

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

B4X:

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 · Jun 14, 2015

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 · Apr 17, 2016

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 · Apr 18, 2016

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 · Apr 19, 2016

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

B4X:

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.

B4A Library [Class] Expandable Panels

Attachments

kozbot

Member

stanks

Active Member

stanks

Active Member

kozbot

Member

thedesolatesoul

Expert

kozbot

Member

thedesolatesoul

Expert

kozbot

Member

thedesolatesoul

Expert

tomky

Active Member

tomky

Active Member

tomky

Active Member

B4A Library [Class] Expandable Panels

Attachments

Member

Active Member

Active Member

Member

Expert

Member

Expert

Member

Expert

Active Member

Active Member

Active Member

Privacy & Transparency

Privacy & Transparency