Android Tutorial Android SlidingPanels - Simple way to create sliding layouts

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.

 

[susu]

It will be great if we can slide by touching screen directly

 

[Erel]

That's not hard at all.
Just add the following code to the Main activity (replace the existing Sub Globals):

Sub Globals
    Dim sd As SlidingData 'The object that holds the for SlidingPanels
    Dim btnLeft, btnRight As Button
    Dim startX, startY As Float '<-new global variables
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.Enabled = True Then 
                ChangePanel(False)
            Else If startX - x > 30%x AND btnLeft.Enabled = True Then
                ChangePanel(True)
            End If
    End Select
End Sub

 

[susu]

It's really smooth! Thanks Erel

 

[metrick]

Thanks Erel..Nice.
Can the panel contains very long text and scrollable?

 

[Erel]

Can the panel contains very long text and scrollable?

Not sure how it is related to the sliding panels framework. However you can put an EditText on the panel. Set it to be a multiline EditText and set WordWrap to true.

 

[metrick]

Erel:
I have created a menu of all panels in ListView, how can I link from ListView directly to panels number based on position of the ListView. eg. If I click on ListView position seven I want panel number seven to show. Thanks in advance.

 

[Erel]

I've updated the first post with a new version of SlidingPanels. It includes a JumpToPanel method that allows you to navigate to any panel. Press on the menu button to see an example.

 

[gobblegob]

This is awesome! Fantastic work Erel!

cheers Waz

 

[metrick]

Thanks, Erel. Its work great!

 

[hasanaydin52]

Hello Erel,

An error occured when sample compiling.
Animation 1.02 is checked in Libs.

Compiling code. Error
Error parsing program.
Error description: Index was outside the bounds of the array.

 

[Erel]

I believe that it is related to a bug which happens when there is an error in a hidden module. This is fixed for the next update. Make all the modules visible and see where is the error.

 

[hasanaydin52]

Hello Erel,

I think I found the error.

Problem was Initialize sub name.

I changed its name to Creating forexample.

 

[Smee]

Erel,

I have slightly modified your code to allow for what i thought would be 2 panels side by side to accomplish horizontal scrolling but it does not seem to have made any difference to the way your original code works.

I eventualy want to put a series of 4 panels above and 4 panels below with an imageview on them containing jpg's.


Could you have a look at the simple adaptations i have made and tell me why it does not work?

Many Thanks

Joe


Dim panels(8) As Panel
For i = 0 To panels.Length - 1 Step 2
panels(i).Initialize("panels")
panels(i).Color = Colors.RGB(Rnd(0, 255), Rnd(0, 255), Rnd(0, 255))
panels(i+1).Initialize("panels")
panels(i+1).Color = Colors.RGB(Rnd(0, 255), Rnd(0, 255), Rnd(0, 255))
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), 0, 0, 50%x, 100%y) 'add the panel to the layout
Activity.AddMenuItem("Panel #" & i, "Menu")

Dim lbl As Label
Pos2=panels(i).Width
lbl.Initialize("")
lbl.Text = "I'm Panel: " & (i+1)
lbl.TextSize = 20
lbl.TextColor = Colors.White
Activity.AddView(panels(i+1), Pos2, 0, 50%x, 100%y) 'add the 2nd panel to the layout
Activity.AddMenuItem("Panel #" & (i+1), "Menu")
Next
'add the Left and Right button
btnLeft.Initialize("Left")
btnLeft.Text = "Left"
activity.AddView(btnLeft, 10%x, 100%y - 55dip, 100dip, 50dip)
btnRight.Initialize("Right")
btnRight.Text = "Right"
activity.AddView(btnRight, 60%x, 100%y - 55dip, 100dip, 50dip)

'*****************************
'Initialize the SlidingData object and set the array of panels.
'Then we call SlidingPanels.Initialize to prepare the animation objects.
'The last call to ChangePanel brings the first panel.
sd.Initialize
sd.Panels = panels
SlidingPanels.Initialize(sd, SlidingDuration)
ChangePanel(True) 'Current code expects the first call to be with Left = True.

 

[Erel]

Do you want to show two panels together on the screen?

 

[Smee]

Actualy i am trying to create the impresion of several panels on the screen and sliding along as the user swipes them. similar to the way windows shows a slideshow of pictures.
I thought i could put a picture on each panel and gradually reduce the size to fit 4 to 8 pictures on the screen at once.

The database will contain links to thousands of jpg's which will be divided into categories.

Many Thanks

Joe

 

[Erel]

It will not be simple to change SlidingPanels to show several panels at once. However you can put several images on each panel without any change to the original code.

 

[Smee]

Thanks Erel,

The problem here then is how would i identify which image has been selected?

Any ideas?

Thanks

Joe

 

[Erel]

Maybe I'm missing something. Why not use ImageView_Click event for that?

 

[Smee]

No you are probably not mIssing anything. I am not seeing the forest for the trees.
I will go back and make some layouts with imageviews and give it a try