Android Tutorial Android SlidingPanels - Simple way to create sliding layouts

Discussion in 'Tutorials & Examples' started by Erel, Mar 13, 2011.

  1. Erel

    Erel Administrator Staff Member Licensed User

    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.

    [​IMG]

    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.
     

    Attached Files:

    Last edited: Aug 15, 2016
  2. susu

    susu Well-Known Member Licensed User

    It will be great if we can slide by touching screen directly :D
     
  3. Erel

    Erel Administrator Staff Member Licensed User

    That's not hard at all.
    Just add the following code to the Main activity (replace the existing Sub Globals):
    Code:
    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
     
  4. susu

    susu Well-Known Member Licensed User

    It's really smooth! Thanks Erel :D
     
  5. metrick

    metrick Active Member Licensed User

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

    Erel Administrator Staff Member Licensed User

    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.
     
    mark_cayanan likes this.
  7. metrick

    metrick Active Member Licensed 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.
     
  8. Erel

    Erel Administrator Staff Member Licensed User

    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.
     
  9. gobblegob

    gobblegob Member Licensed User

    This is awesome! Fantastic work Erel!

    cheers Waz
     
  10. metrick

    metrick Active Member Licensed User

    Thanks, Erel. Its work great!
     
  11. hasanaydin52

    hasanaydin52 Member Licensed 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.
     
  12. Erel

    Erel Administrator Staff Member Licensed User

    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.
     
  13. hasanaydin52

    hasanaydin52 Member Licensed User

    Hello Erel,

    I think I found the error.

    Problem was Initialize sub name.

    I changed its name to Creating forexample.
     
    Last edited: Jun 24, 2011
  14. Smee

    Smee Well-Known Member Licensed 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: Aug 2, 2011
  15. Erel

    Erel Administrator Staff Member Licensed User

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

    Smee Well-Known Member Licensed 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
     
  17. Erel

    Erel Administrator Staff Member Licensed User

    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.
     
  18. Smee

    Smee Well-Known Member Licensed User

    Thanks Erel,

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

    Any ideas?

    Thanks

    Joe
     
  19. Erel

    Erel Administrator Staff Member Licensed User

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

    Smee Well-Known Member Licensed 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
     
Loading...
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice