Android Tutorial BetterSlidingPanels - Nice sliding panels with page indicator

Based on Erels SlidingPanels example I created another version which is a bit more "touch friendly".

My changes:

  • Move panels while touching the screen and moving your finger around
  • Page indicator which shows the current page
  • Parameter for endless looping of panels
  • You can jump directly to a panel (try menu)
 

Attachments

  • BetterSlidingPanels.zip
    13.9 KB · Views: 4,324
  • screenshot-1319099154643.jpg
    screenshot-1319099154643.jpg
    4.9 KB · Views: 4,896

metrick

Active Member
Licensed User
Longtime User
Thanks, Markus.
I am trying to digest your codes and I want to be able to show the page# using the touch as well.
The page method is excellent.
 

AHilberink

Active Member
Licensed User
Longtime User
Hi Corwin

Thanks for sharing. It works great for me.

I do have a little question:
I open your Sliding Panels from a ScrollView_Click. How can I close? I tried to make everything Visible=False and that worked, but on doing that a lot of time it looks like there will be a memory problem (slower and than crash).

I am a newbie, so sorry if this question is caused by short knowledge.

Thanks,
André
 

AHilberink

Active Member
Licensed User
Longtime User
Hi,

Thanks for your reply.

Here is a part of the source:
B4X:
Sub Back_Click
   ChangePanel(0)
   Indicator.Visible = False
   Panels(0).Visible = False
   Panels(1).Visible = False
   Panels(2).Visible = False
   btnLeft.Visible = False
   btnRight.Visible = False
   Back.Visible = False
   BlankScreen.Visible = False
   Alfabet.Visible = True
   ListView1.RequestFocus   
End Sub

Sub ListView1_ItemClick(Position As Int, Value As Object)
   Dim sel As SevenLines      : sel = Value
   Dim Beschrijving1 As Label
   
   ImageFront.Initialize("")
   ImageBack.Initialize("")
   Beschrijving1.Initialize("")
   BlankScreen.Initialize("")
   BlankScreen.Color = Colors.Black
   Activity.AddView(BlankScreen, 0, 0, 100%x, 100%y)
   Beschrijving1.Color = Colors.Black
   Beschrijving1.TextColor = Colors.White
   sd.Initialize

   'add the Left and Right button
   btnLeft.Initialize("Left")
   btnLeft.Text = ">"
   Activity.AddView(btnLeft, 65%x, 100%y - 45dip, 100dip, 50dip)
   btnRight.Initialize("Right")
   btnRight.Text = "<"
   Activity.AddView(btnRight, 5%x, 100%y - 45dip, 100dip, 50dip)
   Back.Initialize("Back")
   Back.Text = "Back"
   Activity.AddView(Back, 35%x, 100%y - 45dip, 100dip, 50dip)
   
   'Load Bitmaps for indicator
   ActiveBitmap.Initialize(File.DirAssets, "indicator_active.png")
   InactiveBitmap.Initialize(File.DirAssets, "indicator_inactive.png")

   For i = 0 To Panels.Length - 1
      Panels(i).Initialize("Panels")
      Panels(i).Color = Colors.Black
      Activity.AddView(Panels(i), 100%x, 0, 100%x, 100%y - 60dip) 'add the panel to the layout
   Next
   
   If File.Exists(ImageBigPath, sel.Four & "f.jpg") = True Then
      Alfabet.Visible = False

      ImageFront.Bitmap = LoadBitmap(ImageBigPath, sel.Four & "f.jpg")
      ImageFront.Gravity = Gravity.Fill
      Panels(0).AddView(ImageFront,0,0,100%x,100%y - 60dip)

      ImageBack.Bitmap = LoadBitmap(ImageBigPath, sel.Four & "b.jpg")
      ImageBack.Gravity = Gravity.Fill
      Panels(1).AddView(ImageBack,0,0,100%x,100%y - 60dip)

      Beschrijving1.Text = sel.Seven
      Panels(2).AddView(Beschrijving1,20dip,20dip,100%x - 40dip,100%y - 80dip)

      SlidingPanels.Initialize(sd,Panels,True,150)
      sd.currentPanel = currentPanelBeforePaused - 1
   
      Indicator = SlidingPanels.CreatePageIndicator(panels.Length, InactiveBitmap, 120dip, 16dip)
      Activity.AddView(Indicator, (100%x - 120dip) / 2, 0, 120dip, 16dip)
      Indicator.BringToFront
      ChangePanel(0)
   Else
      If sel.Seven <>"" Then
         Beschrijving1.Text = sel.Seven
         Panels(0).AddView(Beschrijving1,20dip,20dip,100%x - 40dip,100%y - 80dip)
         SlidingPanels.Initialize(sd,Panels,True,150)
         sd.currentPanel = currentPanelBeforePaused - 1

         Indicator = SlidingPanels.CreatePageIndicator(panels.Length, InactiveBitmap, 120dip, 16dip)
         Activity.AddView(Indicator, (100%x - 120dip) / 2, 0, 120dip, 16dip)
         Indicator.BringToFront
         ChangePanel(0)
      Else
         btnLeft.Visible = False
         btnRight.Visible = False
         Back.Visible = False
         Msgbox("Image niet gevonden","")
         BlankScreen.Visible = False
         Alfabet.Visible = True
         ListView1.RequestFocus   
      End If
   End If
End Sub

As you can see I add a BACK button. This button should close all things openend by the SlidingPanels.

I tried using .Visible = False, but I need to empty the panels to refill them the next time.

I hope I descripe my problem/question correctly.

Thanks,
André
 
Last edited by a moderator:

petr4ppc

Well-Known Member
Licensed User
Longtime User
Open pages as SrollView

Dear Cowin42 and friends,

please, it is possible to open each scrolling page as SCROLLVIEW and not empty panel?

Or do you know, in which tutorial I can this learn? How to add on empty panel srollview?

Thank you very much
p4ppc
 
Last edited:

bsnqt

Active Member
Licensed User
Longtime User
Hi Erel and Sir corwin42,

Thanks a lot for very nice sample of sliding panel :)

My question is:

I have a listview per each panel in order to display information, each listview is filling the whole panel's area (1 listview per each panel). As the panels_touch cannot work here, actually user can touch only listview not panel, I don't know how to still have the sliding effect with this case (listview covering on full panel page). Can you please advise or give a tip how to do?

Thank you very much.

Best

bsnqt
 

corwin42

Expert
Licensed User
Longtime User
I think you will get problems using a listview on a panel. I would suggest to use the AHViewPager Library for the slidings panels. This works with listviews without problems.
 

bsnqt

Active Member
Licensed User
Longtime User
I think you will get problems using a listview on a panel. I would suggest to use the AHViewPager Library for the slidings panels. This works with listviews without problems.

Dear corwin42,

Thank you very much, I shall try that alternative... :)
 

enrico

Active Member
Licensed User
Longtime User
I have several panels and I don't want to load them all in memory.
Is it possible to load only 3 panels and recreate the hidden ones (left and right) after the scroll ?
 

corwin42

Expert
Licensed User
Longtime User
You will have to handle it yourself. AHViewPager Library would be much better for this since it has _PageCreated and _PageDestroyed events.
 

carchek

Member
Licensed User
Longtime User
hi!
Is it possible, to detect which on which panel is user currently on? Because, I have code like this:
If sd.currentPanel = 0 Then
IP.Text = "IDDQD"
numberz.Text ="1"
new.Text="Great"
zel.Text="31. 5. 2016"
picture.Initialize(File.DirAssets,"1.jpg")
ImageView1.Bitmap = LoadBitmap(File.DirAssets,"1.jpg")
ImageView1.SetBackgroundImage(picture)
End If
And on panel 0 this code is working, but when I slide to panel next to panel 0 (panel 1), the information displayed is the same on every panel (I have currently 23 panels). So on panel1 label text is different and so on..
How can I get this working?
 

alexwekell

Member
Licensed User
Longtime User
hi!
Is it possible, to detect which on which panel is user currently on? Because, I have code like this:

And on panel 0 this code is working, but when I slide to panel next to panel 0 (panel 1), the information displayed is the same on every panel (I have currently 23 panels). So on panel1 label text is different and so on..
How can I get this working?
I would also like to know this.
 

RUNO

Active Member
Licensed User
Longtime User
I want change "sliding panels" example works and modify it to go vertically. can you help me ?
 
Top