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.

slidingpanels_1.png


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.
 

Attachments

  • SlidingPanels.zip
    6.9 KB · Views: 9,816
Last edited:

susu

Well-Known Member
Licensed User
Longtime User
It will be great if we can slide by touching screen directly :D
 

Erel

B4X founder
Staff member
Licensed User
Longtime User
That's not hard at all.
Just add the following code to the Main activity (replace the existing Sub Globals):
B4X:
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

Well-Known Member
Licensed User
Longtime User
It's really smooth! Thanks Erel :D
 

metrick

Active Member
Licensed User
Longtime User
Thanks Erel..Nice.
Can the panel contains very long text and scrollable?
 

metrick

Active Member
Licensed User
Longtime User
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.
 

gobblegob

Member
Licensed User
Longtime User
This is awesome! Fantastic work Erel!

cheers Waz
 

hasanaydin52

Member
Licensed User
Longtime User
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.
 

hasanaydin52

Member
Licensed User
Longtime User
Hello Erel,

I think I found the error.

Problem was Initialize sub name.

I changed its name to Creating forexample.
 
Last edited:

Smee

Well-Known Member
Licensed User
Longtime User
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.
 
Last edited:

Smee

Well-Known Member
Licensed User
Longtime User
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
 

Smee

Well-Known Member
Licensed User
Longtime User
Thanks Erel,

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

Any ideas?

Thanks

Joe
 

Smee

Well-Known Member
Licensed User
Longtime User
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
 
Top