B4A Library GUISlidingSidebar

GUISlidingSidebar makes it easy to add a sliding sidebar to an Activity.

It's a wrapper around the gui-sliding-sidebar class by Julian Chu that can be found here: https://github.com/walkingice/gui-sliding-sidebar.
gui-sliding-sidebar is licensed under the Apache License, Version 2.0, more details can be found here: https://github.com/walkingice/gui-sliding-sidebar/blob/master/LICENSE

GUISlidingSidebar is quite a simple library to use, it has just a few methods and a single property:

• GUISlidingSidebar
  Properties:
  • SidebarIsOpen As Boolean
  Methods:
  • CloseSidebar
  • Initialize
  • OpenSidebar
  • SetViews (ContentView As View, SidebarView As View)
    Set the Content and Sidebar Views.
    The maximum width of the Sidebar is 90% of it's parent.
    These Views must NOT already be added to the Activity, otherwise an exception will occur.
  • ToggleSidebar

All pretty self-explanatory!
It's important to note that the Views you pass to the SetViews method must not be currently added to the Activity.

Here's an example project:

'Activity module
Sub Process_Globals
   Dim ContentStrings As Map
   Dim CurrentContent As Int
   Dim SidebarIsOpen As Boolean
End Sub

Sub Globals
   Dim ContentButton As Button
   Dim ContentLabel As Label
   Dim ContentPanel As Panel
   Dim GUISlidingSidebar1 As GUISlidingSidebar
   Dim Sidebar As ListView
End Sub

Sub Activity_Create(FirstTime As Boolean)
   If FirstTime Then
      ContentStrings.Initialize
      ContentStrings.Put("What is Lorem Ipsum?", "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.")
      ContentStrings.Put("Why do we use it?", "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.")
      ContentStrings.Put("Where does it come from?", "Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.")
      ContentStrings.Put("Where can I get some?", "There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.")
      ContentStrings.Put("Example Lopsum Ipsum", "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a ante dui, eget egestas augue. Sed porttitor ultricies ante, eu viverra enim cursus sed. Morbi tempor dolor in metus sodales vitae tristique leo dignissim. Vivamus mi tortor, aliquet sit amet aliquet quis, lobortis ut massa. Cras fermentum ligula sit amet risus scelerisque fermentum. Nam nec ipsum nisl, et sollicitudin arcu. Nam non felis neque, eu auctor ipsum.")
      CurrentContent=0
      SidebarIsOpen=False
   End If
   
   ContentButton.Initialize("ContentButton")
   ContentButton.Text="Sidebar"
   
   ContentLabel.Initialize("")
   ContentLabel.TextColor=Colors.Black
   ContentLabel.TextSize=14dip
   
   ContentPanel.Initialize("ContentPanel")
   ContentPanel.Color=Colors.LightGray
   ContentPanel.AddView(ContentLabel, 0, 0, 100%x, 100%y)
   ContentPanel.AddView(ContentButton, 10dip, 100%y-60dip, 50dip, 50dip)
   
   Sidebar.Initialize("Sidebar")
   Dim i As Int
   For i=0 To ContentStrings.Size-1
      Sidebar.AddSingleLine(ContentStrings.GetKeyAt(i))
   Next
   Sidebar.Visible=SidebarIsOpen
   
   GUISlidingSidebar1.Initialize
   GUISlidingSidebar1.SetViews(ContentPanel, Sidebar)
   
   Activity.AddView(GUISlidingSidebar1, 0, 0, 100%x, 100%y)
   
   '   Sidebar width can only be set AFTER it has been added to the Activity
   Sidebar.Width=75%x
   
   '   set default state / restore last state
   Activity.Title=ContentStrings.GetKeyAt(CurrentContent)
   ContentLabel.Text=ContentStrings.GetValueAt(CurrentContent)
End Sub

Sub Activity_Resume

End Sub

Sub Activity_Pause (UserClosed As Boolean)
   SidebarIsOpen=GUISlidingSidebar1.SidebarIsOpen
End Sub

Sub ContentButton_Click
   GUISlidingSidebar1.ToggleSidebar
End Sub

Sub ContentPanel_Click
   GUISlidingSidebar1.CloseSidebar
End Sub

Sub Sidebar_ItemClick (Position As Int, Value As Object)
   Activity.Title=ContentStrings.GetKeyAt(Position)
   ContentLabel.Text=ContentStrings.GetValueAt(Position)
   CurrentContent=Position
   GUISlidingSidebar1.CloseSidebar
End Sub

I've created a ListView for the sidebar View and a Panel containing a Label and Button for the content View.
The sidebar is hidden when the Activity is first started, you could instead start your Activity with the sidebar View visible - the library will handle either state.
A click on the Button that i added to the content View will toggle the visibility of the sidebar, and a click on the content View will close the sidebar if it is currently visible.
The example project maintains the state of the Activity on orientation change by using a couple of Process_Global variables to save whether the sidebar is visible or not and the last selected ListView item index.

Fans of Lopsum Ipsum can find more here: Lorem Ipsum - All the facts - Lipsum generator!

Martin.

 

[Informatix]

Did I miss something or the swipe gesture is not handled ? I don't have Facebook, so I cannot compare, but in the apps on my phone implementing a side bar, you can open/close it with a swipe gesture.

 

[warwound]

Hi there.

No there's no use of gestures in this library, it's pretty basic buts does the job.

Martin.

 

[Informatix]

Hi there.

No there's no use of gestures in this library, it's pretty basic buts does the job.

Martin.

I hope that you won't be angry at me if I publish next week a little more complete class (with the swipe gesture). I was working on it (to illustrate my fifth tutorial about UI).

 

[warwound]

I hope that you won't be angry at me if I publish next week a little more complete class (with the swipe gesture). I was working on it (to illustrate my fifth tutorial about UI).

LOL course not - i'll make sure i have a read of it once it's published.

Martin.

 

[vb1992]

Can this appear from all directions, top, bottom, right, left

(I didn't read it just yet...)

 

[warwound]

Can this appear from all directions, top, bottom, right, left

(I didn't read it just yet...)

Not currently - it supports just a left hand sidebar View and main content View.

The source looks pretty easy to update to support other transitions but i won't have time to look at that for a while - busy with work.
I'll wait and see what Informatix's class does before making any updates to this library.

(If anyone wants a copy of the Eclipse source project just let me know).

Martin.

 

[Informatix]

I'll wait and see what Informatix's class does before making any updates to this library.

Currently, my class is able to simulate a sliding sidebar, a sliding menu and a sliding drawer. It can be on the four sides. It is open/closed by a button, a handle or a swipe gesture. I'll try to post a draft of my work today.

 

[Informatix]

Here's the beta version of my new class.

 

[robife]

Here's the beta version of my new class.

Hi Informatix I get error in compiling the code

Compiling code.                         Error
Error parsing program.
Error description: Unknown type: animationplus
Are you missing a library reference?
Occurred on line: 9
Private Anim1, Anim2, Anim3 As AnimationPlus

Can you help me please

 

[robife]

BTW warwound thank you for nice script, It works well.
:sign0142:

 

[Informatix]

Hi Informatix I get error in compiling the code
Can you help me please

The final version is here.