B4A Library [B4X] B4XDrawer - sliding drawer

Status
Not open for further replies.
Edit: Cross platform example based on B4XPages
b4adrawer.gif


SS-2018-10-03_17.51.11.png


A class that implements a sliding menu. Unlike the nice jfeinstein SlidingMenu library the drawer covers the activity instead of pushing it. It is similar to the various design support navigation drawer libraries.

Instructions:
1. Initialize the drawer object:
B4X:
Drawer.Initialize(Me, "Drawer", Activity, 300dip) 'Page1.RootPanel in B4i
300dip = left menu width

2. Load the "Activity layout" to the drawer:
B4X:
Drawer.CenterPanel.LoadLayout("1")
3. Load the menu layout:
B4X:
Drawer.LeftPanel.LoadLayout("Left")
4. Handle back key (B4A):
B4X:
Sub Activity_KeyPress (KeyCode As Int) As Boolean
   If KeyCode = KeyCodes.KEYCODE_BACK And Drawer.LeftOpen Then
       Drawer.LeftOpen = False
       Return True
   End If
   Return False
End Sub

5. Handle resize (B4i):
B4X:
Private Sub Page1_Resize(Width As Int, Height As Int)
   Drawer.Resize(Width, Height)
End Sub

The attached example is based on AppCompat. However you can use it in any project you like. You can also customize its behavior. The code is not too complicated.

Updates:

- 1.55 - New StateChanged (Open As Boolean) event.
- 1.53 - Adds support for B4J (without gestures). No need to update if using with B4A or B4i.
- 1.52 - Clicks on the drawer panel are not passed to the underlying panel.
- 1.51 - GestureEnabled property.

B4XDrawer is distributed as a b4xlib. It is an internal library.
 

Attachments

  • B4A_B4XDrawer.zip
    11.4 KB · Views: 3,871
  • B4i_B4XDrawer.zip
    33.5 KB · Views: 1,486
  • B4XDrawer.b4xlib
    2.5 KB · Views: 1,666
Last edited:

Peter Simpson

Expert
Licensed User
Longtime User
The attached example is based on AppCompat. However you can use it in any project you like. You can also customize its behavior. The code is not too complicated.

You just do not believe in wasting any time do you @Erel?
A question appears, and booooooom you've created a drawer for all your valued customers.

Nice one...
 
Last edited:

Sandman

Expert
Licensed User
Longtime User
If a Material drawer is open and one touches the dark area, the drawer closes. If one wants to mimic that behaviour, do this:

Change this line
B4X:
mDarkPanel = xui.CreatePanel("")

...to...

B4X:
mDarkPanel = xui.CreatePanel("mDarkPanel")

...and add this:

B4X:
Public Sub mDarkPanel_Touch (Action As Int, X As Float, Y As Float)
    If Action = mDarkPanel.TOUCH_ACTION_DOWN Then
        setLeftOpen(False)
    End If
End Sub
 

Sandman

Expert
Licensed User
Longtime User
This is not a good solution. The dark panel covers the content so it will consume touch events that should go to other views.

But that's how the dark panel is supposed to work, Erel. At least if we're to believe Gmail. Try it, open the menu and press a star on a mail. The only thing that happens is the drawer closing.

(I've also verified this behaviour in Solid Explorer, Google Drive and DoggCatcher.)
 

Peter Simpson

Expert
Licensed User
Longtime User
Hello @Erel,
Do you remember THIS POST from me last month?
Well I created myself a new sliding menu library that works a bit like your menu above. I actually set aside Friday this week to rewrite my menu as I really was not happy with it (too much code and to complicated for no reason whatsoever), I used the gesture detector library for detecting touches events though I don't need to use that library. Anyway your new sliding drawer fixes the issues that I had with the sliding menu in the link posted above.

I've just implemented your sliding drawer solution, I didn't have to change much as I too used a ListView to populate the drawer. Your drawer works perfect, even with an animated burger.
The animated burger works with the sliding action, burger clicks, item clicks and tapping panel to close, it runs really smoothly too.

This is the sliding drawer implemented into my spare app.

Sliding drawer with animated burger
ezgif-4-34c8e9942.gif


Sliding drawer with MaterialIcons burger
Screenshot_20181002-160340.png


Thank you...
 
Last edited:

Peter Simpson

Expert
Licensed User
Longtime User
v1.04 released. Small changes to the behavior of touch events on the dark area. The behavior is now similar to Google material drawer behavior.

Hello Erel,
This update isn't running smoothly for me and I'm using your example code in V1.04 with no changes as yet for the animated burger.

With the drawer open as my finger moves from right to left along the scrim, when my finger finally meets the right hand side of the menu (sliding drawer) the drawer skips a bit, well a lot in fact. If I use my finger to open and then close the drawer, at the point where my finger meets the drawer it sometimes skip. Actually you need to open and close the drawer a number of times with your finger before the issue starts to happen, I would say about 10 times in a row making sure that you take you finger off the screen after each open and close.

I hope that you can replicate the issue, if not I'll make a video for you.

Thank you...
 
Last edited:

Peter Simpson

Expert
Licensed User
Longtime User
Here you go @Erel,
As you can see from just the first 20 seconds, whilst closing the drawer it skips on my N6P, it does the same on my PXL as well. I then use the burger button to open the drawer.

Oddly enough the sliding drawer closes without skipping when I use the burger button to open the sliding drawer. When I open the sliding drawer with my finger it usually skips at some point when closing again and then it just continues skipping whilst closing.

Edited: VIDEO DELETED

Sorry for the delay, I've been waiting for YouTube to upscale the video to 1080p50HD. Once you have watched the video, let me know as I'll edit this post because I'll be deleting the video on YouTube.

I don't keep videos that are not really needed.

Thank you...
 
Last edited:

AnandGupta

Expert
Licensed User
Longtime User
So much has happened in just few hours !!
Thanks a lot to Erel and Peter Simpson.
We members are always the gainer :)

Regards,

Anand
 

Peter Simpson

Expert
Licensed User
Longtime User
B4ADrawer renamed to B4XDrawer. It is now compatible with B4i and B4A.

Hey what, you keep making me download and put 2 extra lines in for the burger.

Please @Erel, go out for a nice long walk with the wife and kids, I can't keep up :)

Anyway I've implemented V1.50 and it's working great

Thank you...
 
Last edited:

Rusty

Well-Known Member
Licensed User
Longtime User
I have ViewX in my libraries and am getting an unknown type TouchPanelCreator.
I've also updated UIX library. What am I missing?
Thanks,
Rusty
 
Status
Not open for further replies.
Top