B4A Library [B4X] B4XDrawer - sliding drawer

Edit: Cross platform example based on B4XPages

[B4X] B4XPages + B4XDrawer

B4XDrawer v1.53 adds support for B4J. This is a good opportunity to create a B4XPages example using B4XDrawer. It does require some configuration so pay attention. The example is based on the three pages example...

www.b4x.com

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:

Drawer.Initialize(Me, "Drawer", Activity, 300dip) 'Page1.RootPanel in B4i

300dip = left menu width

2. Load the "Activity layout" to the drawer:

Drawer.CenterPanel.LoadLayout("1")

3. Load the menu layout:

Drawer.LeftPanel.LoadLayout("Left")

4. Handle back key (B4A):

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):

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.

 

[Peter Simpson]

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

 

[Erel]

Example with transparent status bar:

 

[Johan Hormaza]

Thank you very much EREL!!!

 

[Sandman]

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

mDarkPanel = xui.CreatePanel("")

...to...

mDarkPanel = xui.CreatePanel("mDarkPanel")

...and add this:

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

 

[Erel]

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

v1.02 uploaded to the first post. It adds the behavior you described.

 

[Sandman]

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.)

 

[Erel]

It will not work in this implementation as the dark panel is there all the time.
It will also make it more difficult to start the swipe gesture.
Start a new thread if you want to further discuss it.

V1.03 uploaded to first post. Any touch outside of the open menu will close the menu.

 

[Peter Simpson]

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

Sliding drawer with MaterialIcons burger

Thank you...

 

[Erel]

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.

 

[Peter Simpson]

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

 

[Erel]

Doesn't seem to happen here. Make sure to test it in release mode.

 

[Peter Simpson]

Doesn't seem to happen here. Make sure to test it in release mode.

Cough cough cough, I've read you response to other users hundreds of times Erel, I always do my final tests in release mode

Give me 10 minutes and I'll upload a video on YouTube for you to watch.

 

[Peter Simpson]

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

 

[Erel]

Confirmed and fixed in v1.05.

Enjoy...

 

[Peter Simpson]

Confirmed and fixed in v1.05.

Enjoy...

It is now working 100% as expected.

I will...

 

[AnandGupta]

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

Regards,

Anand

 

[Erel]

B4ADrawer renamed to B4XDrawer. It is now compatible with B4i and B4A.

 

[Peter Simpson]

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

 

[Rusty]

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