Scrolling panels and layouts

NJDude

Expert
Licensed User
Longtime User
I'm trying to write an app using scrolling panels, which you'll be able to move when touched, but, I'm having difficulties understanding the procedures; I've followed some samples posted here on the forums but to no avail.

Can someone post a simple code to slide 2 panels using 2 already made layouts with the designer?, I just need a clue.

Thanks
 

Erel

B4X founder
Staff member
Licensed User
Longtime User
Something like:
B4X:
Sub Globals
    'These global variables will be redeclared each time the activity is created.
    'These variables can only be accessed from this module.
    Dim sv1 As ScrollView
    Dim sv2 As ScrollView
    
End Sub

Sub Activity_Create(FirstTime As Boolean)
    sv1.Initialize(1000dip)
    sv2.Initialize(1000dip)
    activity.AddView(sv1, 0, 0, 100%x, 50%y)
    activity.AddView(sv2, 0, 50%y, 100%x, 50%y)
    sv1.Panel.LoadLayout("yourlayout1")
    sv2.Panel.LoadLayout("yourlayout2")
End Sub
 
Upvote 0

NJDude

Expert
Licensed User
Longtime User
Thank you for the example, is not what I needed but I'm sure I'll find a use for it.

What I need is something like THIS but instead of using buttons and programmatically made panels, use some already created.

Thanks
 
Upvote 0

mistermentality

Active Member
Licensed User
Longtime User
This should help, its the example you linked to but adapted to show two panels each with its own layout.

There are no buttons so it will only work if you touch the screen as you requested and the layouts occupy the full screen size.

Just load the example code from that thread (so make sure you have downloaded its files as it needs that examples SlidingPanels.bas file), create two layouts (I have called mine scr1 and scr2 in the amended example) and just replace all the code in the ide for that example with the following code:


B4X:
Sub Process_Globals

End Sub

Sub Globals
    Dim sd As SlidingData 'The object that holds the for SlidingPanels
    Dim btnLeft, btnRight As Boolean
    Dim startX, startY As Float '<-new global variables
End Sub

Sub Activity_Create(FirstTime As Boolean)
   'Create the panels.
   ' Here we create 2 panels with a different layout in each
   Dim panels(2) As Panel
   'First initialise each panel
      panels(0).Initialize("panels")
      panels(1).Initialize("panels")
   ' Now load a layout into each one
      panels(0).LoadLayout("scr1")
      panels(1).LoadLayout("scr2")
   ' Add the panels
      Activity.AddView(panels(0), 100%x, 0, 100%x, 100%y) 'add the panel to the layout
      Activity.AddView(panels(1), 100%x, 0, 100%x, 100%y) 'add the panel to the layout
   'Initialize the SlidingData object and set the array of panels.
   sd.Initialize
   sd.Panels = panels
   'Call SlidingPanels.Initialize to prepare the animation objects.
   SlidingPanels.Initialize(sd, 400) ' 400 is the duration of the slide
   'The last call to ChangePanel brings the first panel.
   ChangePanel(True) 'Current code expects the first call to be with Left = True.

End Sub

Sub Panels_Touch (Action As Int, X As Float, Y As Float)
    Select Action
        Case Activity.ACTION_DOWN
            startX = X
            startY = Y
        Case Activity.ACTION_UP
            If Abs(y - startY) > 20%y Then Return
            If X - startX > 30%x AND btnRight = True Then 
                ChangePanel(False)
            Else If startX - x > 30%x AND btnLeft = True Then
                ChangePanel(True)
            End If
    End Select
End Sub

Sub Left_Click
   ChangePanel(True)
End Sub

Sub Right_Click
   ChangePanel(False)
End Sub


'**** These two subs are requred for handling the sliding ***
Sub ChangePanel(Left As Boolean)
   'disable the buttons during the animation
   btnLeft = False
   btnRight = False
   'Call SlidingPanels.ChangePanel to actually change the panels.
   SlidingPanels.ChangePanel(sd, Left)
End Sub
Sub Animation1_AnimationEnd
   'This event is raised when the animation finishes. You should call SlidingPanels.AnimationEnd from this sub.
   SlidingPanels.AnimationEnd(sd)
   'Enable the Left and Right buttons (unless there are no more panels).
   If sd.currentPanel = sd.panels.Length - 1 Then btnLeft= False Else btnLeft = True
   If sd.currentPanel = 0 Then btnRight = False Else btnRight = True
End Sub

Sub Activity_Resume

End Sub

Hope it helps :)

Dave
 
Upvote 0

NJDude

Expert
Licensed User
Longtime User
Excellent!!, I was was close but somehow I couldn't make it work.

Thank you for your help.

NOTE: I see some flickering when changing panels, I wonder if this code can be improved.
 
Last edited:
Upvote 0

mistermentality

Active Member
Licensed User
Longtime User
Excellent!!, I was was close but somehow I couldn't make it work.

Thank you for your help.

NOTE: I see some flickering when changing panels, I wonder if this code can be improved.

No flickering on my phone nor on emulator, but you can change the duration from 400 to some thing else, that could help

Dave
 
Upvote 0

NJDude

Expert
Licensed User
Longtime User
Regardless of the duration, this is what I see:

1- Start the app
2- The first panel scrolls to the left
3- Flicks
4- I touch the screen and scroll to the second panel
5- The panel 1 scrolls to the left and panel 2 appears
6- PANEL 1 FLICKERS on top of panel 2 (appears for a split second and dissapears)

Same thing happens if I do the opposite.

I'm running the code on a HTC EVO 4G.
 
Last edited:
Upvote 0

mistermentality

Active Member
Licensed User
Longtime User
No idea what would be causing the flicker, all I did was make small changes to Erels example code but no changes that could introduce flickering and it is working fine on my GT540 running Android version 2.2 but maybe someone with the same device as yours will try the code and see how it works for them.

Maybe try it on a emulated device and see if you still have the same problem. It could be that the code flickers on some versions of Android (2.1 maybe) and not others (2.2) for some reason.

Dave
 
Upvote 0

mistermentality

Active Member
Licensed User
Longtime User
If you're using sliding panels in an app for the market you might like to try adding a mediaplayer command to the change panel sub and have a sound play there.

What it will then do is, whenever the user slides to another panel, the sliding motion will be accompanied by a suitable sound. In my case I have a gentle and brief swooshing noise.

It's a surprisingly effective addition when you get the right sound :)

Dave
 
Upvote 0
Top