Android Tutorial Android SlidingPanels - Simple way to create sliding layouts

Erel · Mar 13, 2011

This is an old tutorial. There are now simpler and better ways to achieve this effect.

For example: https://www.b4x.com/android/forum/threads/tabstripviewpager-better-viewpager.63975/

Sliding layouts are cool.

Using the Animation library it is not difficult to animate single views and panels that hold other views.
The following code module and example project makes it even simpler to create a layout that is made of a number of panels. Whenever the current visible panel is changed, the current panel slides out and the new panel slides in.
As Panels can load layout files, you can create complex layouts by loading a layout file to each panel.

The project is made of two components. The Main activity and the SlidingPanels code module.
You should add the SlidingPanels code module to your project and add a reference to the Animation library.

The main activity code is commented and explains the several integration points required.

Animations look much better on real devices than on the slow emulator.
Even if you are not interested in sliding layouts it is recommended to go over the code. It demonstrates the power of custom types which enable you to easily group many objects.
As code modules cannot hold references to Activity objects (like views), the calling activity passes the type with all the required data each time it calls a method (passing the data is done by passing a single pointer, there is no overhead here).

Questions and comments are always welcomed.

hdtvirl · Feb 27, 2012

NJDude thanks for the prompt response, I have already added the scrollview before adding the panel to the array of sd.panels.

I am getting Castclassexception error when I try it.

Cheers

hdtvirl

Erel · Feb 28, 2012

Which line causes this error? What is the full error message?

Smart Developer · Mar 26, 2012

Hi,

I am developing a new application to open the door may you please hlep me to design a screen to slide it up and down ?

afagcaoili · Apr 3, 2012

How to change pics to color after animation

First of all, great app and community!

Now my question.

How can I set background image of the new panel after animation? I am trying to set it up but my little peanut brain is bleeding already.

Thanks for your help.

Arnold

Erel · Apr 4, 2012

Why don't you set the background when the panel is created?

afagcaoili · Apr 4, 2012

I did that but then it does not work on pre-4.0 devices. It gives me this error, "the application has stopped unexpectedly".

'panels(i).Color = Colors.RGB(Rnd(10, 255), Rnd(10, 255), Rnd(10, 255))

panels(i).SetBackgroundImage(LoadBitmap(File.DirDefaultExternal, "1.jpg"))

I replaced the color definition with setting the background image as it loops through the panels but it gives an error as mentioned above. I wonder if the file size "1.jpg" is too big? It is 1 Mb and I tried to only set the first panel and it works but setting more than one will error out.

Thanks.

Arnold

afagcaoili · Apr 4, 2012

Here is just a simple addition to the sliding panel but it does not like it.

If there is only panel then it works fine but more than 1 will fail. With two panels it works initially but when it rotates it will give the same error, which is "... stopped unexpectedly". Three or more panels will not work at all.

Below is the code modification I did, just one line.
Thanks.

B4X:

Dim panels(3) As Panel 'Just three panels and it fails
   For i = 0 To panels.Length - 1
      panels(i).Initialize("panels")
      'panels(i).Color = Colors.RGB(Rnd(0, 255), Rnd(0, 255), Rnd(0, 255))
      panels(i).SetBackgroundImage(LoadBitmap(File.DirInternal, "1.jpg")) 'This is what I added but fails
      panels(i).Invalidate
      Dim lbl As Label
      lbl.Initialize("")
      lbl.Text = "I'm Panel: " & i
      lbl.TextSize = 20
      lbl.TextColor = Colors.White
      panels(i).AddView(lbl, 20%x, 40%y, 60%x, 30dip)
      Activity.AddView(panels(i), 100%x, 0, 100%x, 100%y - 60dip) 'add the panel to the layout
      Activity.AddMenuItem("Panel #" & i, "Menu")
   Next

Erel · Apr 5, 2012

You should check the logs and find the error message.

afagcaoili · Apr 5, 2012

I am not using the emulator, instead I got my device hookup via usb and use it for testing. Kindly point me to the place where I can read the logs?

I am sorry for not knowing this.

Thanks.

Arnold

Erel · Apr 5, 2012

There is a Logs tab in the right pane. You should press on Connect.

afagcaoili · Apr 5, 2012

Thanks Erel,

Here is the error:

java.lang.OutOfMemoryError: bitmap size exceeds VM budget

It looks like my bitmap size it taking all the resource. Can I increase the size of the VM budget?

Thanks.

Arnold

Erel · Apr 5, 2012

No. Try using LoadBitmapSample instead of LoadBitmap.

afagcaoili · Apr 5, 2012

Ohh... That worked like a charm! Finally, I can go to sleep. :sign0098:

Thank you very much Erel! GBU!

Arnold

eps · May 1, 2012

Erel

This is great, I've started to adjust the code, to allow for vertical scrolling....

A code snippet :

B4X:

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 
            If Y - startY > 30%y AND btnRight.Enabled = True Then 
            ToastMessageShow ("down",True)
            Return
            Else If startY - Y > 30%x AND btnLeft.Enabled = True Then
            ToastMessageShow ("up",True)
            Return
            End If
         End If
         If X - startX > 30%x AND btnRight.Enabled = True Then 
            ChangePanel(False)
         Else If startX - X > 30%x AND btnLeft.Enabled = True Then
            ChangePanel(True)
         End If
   End Select
End Sub

Someone else might be able to make use of it as well...

sterlingy · May 7, 2012

Great example, but tough to decipher.

I made an animated panel (sort of like a message box), that I want to slide up from off the bottom of the screen, but when it gets to the center of the screen and the animation is complete, the panel goes back to its starting point (off screen)

I've studied your code for sliding panels, but can't figure out why you don't have a similar problem.

Thoughts?

Cheers,

Sterling

Erel · May 7, 2012

You should use AnimationEnd event to set the panel position.

eps · May 10, 2012

Okay, I've been trying and trying, happy to post some code if it helps, but the issue I have is this...

I have two sets of Sliding Panels and a "main menu".

If the user selects option 1, they get sliding panel set 1 displayed. No problem.

If they hit the back button they go back to the main menu and then select option 2. They get sliding panel set 2 displayed. No problem.

But.. if they hit the back button and then select option 1 again, the panels displayed are option 2. If they hit the back button and select option 2, then it all works fine.

So I guess my zorder is out of sorts, but I can't seem to work out how to re-set the zorder so that sliding panel set 1 comes "after" or on top of panel set 2, once panel set 2 has been displayed.

I've tried using the help search but don't seem to find an answer.

:sign0163:

many thanks in advance

edit :

Actually have found a solution, cycle through all elements of the Panels :

B4X:

For i = 0 To panels1.Length - 1
      panels1(i).BringToFront
Next

For i = 0 To panels2.Length - 1
      panels2(i).SendToBack
Next

CapReed · Aug 17, 2012

Hello!

I designed a panel with the designer rather longer than the screen. How I can do for this example to allow me to make my design ScrollView can see full moving down?

Thank you very much! :BangHead:

klaus · Aug 18, 2012

You need to have one layout file with the ScrollView for the sliding panel and a second layout file for the ScrollView.Panel.
You could also add the ScrollView for the sliding panel by code instead of having a layout file with only the ScrollView.

Best regards.

Best regards.

isr · Sep 20, 2012

I'm trying to modify the SlidingPanels to my app, but get a compiling error.

Here's the background:
I want two simple sliding panel actions: slide left when the button is "continue" or "next" and slight right when the button is "back". My buttons are on the panels being slid. Indexing the panels completely would make development difficult because the content on each layout and the order of layouts may change significantly as development continues.

For my initial test of the sliding panels, I am trying to get the first panel to slide left, to be replaced by the second panel. I am planning to have a separate subroutine for each "back" button click and each "next" button click on each panel. I created the panels and layouts in the Designer, so the details don't appear in my code. My app worked fine before I added the code for SlidingPanels, so I show below just the code I've added/modified for SlidingPanels and the key parts of the app they interact with.

B4X:

Sub Process_Globals
   'sliding panels variables
   Dim tmrAnimation As Timer
   Dim currentPanelBeforePaused As Int
End Sub

Sub Globals
   Dim sd As SlidingData 'The object that holds the data for SlidingPanels
   Dim startX, startY As Float
   Dim SlidingDuration As Int
   SlidingDuration = 300
      
   Dim btnContinueConsent As Button
   Dim pnlConsent1 As Panel
   Dim pnlConsent2 As Panel
End Sub

Sub Activity_Create(FirstTime As Boolean)
   Dim panels(2) As Panel
   panels(0).LoadLayout("Consent1")
   panels(1).LoadLayout("Consent2")
   sd.Initialize
   sd.panels = panels
   SlidingPanels.Initialize(sd, SlidingDuration)
   sd.targetPanel = -1
   sd.currentPanel = currentPanelBeforePaused - 1
   ChangePanel(True) 'Current code expects the first call to be with Left = True.
End Sub   

Sub Activity_Resume
End Sub

Sub Activity_Pause (UserClosed As Boolean)
   If UserClosed = False Then
      currentPanelBeforePaused = sd.currentPanel
   Else 
      currentPanelBeforePaused = 0
   End If
End Sub

Sub Consent1
   Activity.LoadLayout("Consent1")
   pnlConsent1.LoadLayout("Consent1")
   pnlConsent1.Visible=True
End Sub

Sub btnContinueConsent_Click
   Dim panels(2) As Panel
   panels(0).LoadLayout("Consent1")
   Activity.LoadLayout("Consent2")
   panels(1).LoadLayout("Consent2")
   ChangePanel(True)
   Consent2
End Sub

Sub ChangePanel(Left As Boolean)
   SlidingPanels.ChangePanel(sd, Left)
End Sub

Sub Consent2
   RemoveViews
   Activity.LoadLayout("Consent2")
   pnlConsent2.LoadLayout("Consent2")
   pnlConsent2.Visible=True
End Sub

Sub RemoveViews
   Dim i As Int
   For i = Activity.NumberOfViews-1 To 0 Step -1
      Activity.RemoveViewAt(i)
   Next
End Sub   

Sub Animation1_AnimationEnd
   'This event is raised when the animation finishes. You should call SlidingPanels.AnimationEnd from this sub.
   SlidingPanels.AnimationEnd(sd)
   If sd.targetPanel >= 0 Then 
      tmrAnimation.Enabled = True
      Return 'we are still animating...
   End If
End Sub

The error I get is "Value cannot be null. Paremeter name: dictionary". I've looked at the threads that mention this error (http://www.b4x.com/forum/basic4android-updates-questions/14176-compile-error-under-v1-8-dictionary-cannot-null.html#post80277 and http://www.b4x.com/forum/basic4android-updates-questions/19078-another-wierd-v2-00-compile-error.html#post109742) and tried the methods they discuss for resolving it. That is, I have made sure that I've referred to the necessary library (Animation) and none of the code seems to be highlighted in the wrong color.

I've run Erel's SlidingPanels.b4a without any compiling errors and it works great.

I'm sure that I'm missing something pretty simple, but I'm still a :sign0104: with B4A.

Thank you for any advice you can give!

Edit: I forgot to mention that I included the SlidingPanels module in my app and didn't modify it all.

Android Tutorial Android SlidingPanels - Simple way to create sliding layouts

Attachments

Active Member

B4X founder

New Member

Member

B4X founder

Member

Member

B4X founder

Member

B4X founder

Member

B4X founder

Member

Expert

Active Member

B4X founder

Expert

Member

Expert

Member

Similar Threads

Privacy & Transparency

Privacy & Transparency