B4A Library [B4X] B4XDrawer - sliding drawer

Status
Not open for further replies.

Erel

Administrator
Staff member
Licensed User
This class is compatible with B4A and B4i (currently not B4J).





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. Add the class to your project.
2. Depends on:
B4A: ViewsEx v1.30+ and XUI.
B4i: iXUI

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

4. Load the "Activity layout" to the drawer:
B4X:
Drawer.CenterPanel.LoadLayout("1")
5. Load the menu layout:
B4X:
Drawer.LeftPanel.LoadLayout("Left")
5. 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
6. 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.52 - Clicks on the drawer panel are not passed to the underlying panel.
- 1.51 - GestureEnabled property.
- B4ADrawer is now named B4XDrawer and it is compatible with B4i and B4A.

The latest version is attached separately.
 

Attachments

Last edited:

Sandman

Well-Known Member
Licensed 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
 

Erel

Administrator
Staff member
Licensed 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.

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

Sandman

Well-Known Member
Licensed 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.)
 

Erel

Administrator
Staff member
Licensed User
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

Expert
Licensed 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
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:

Erel

Administrator
Staff member
Licensed User
Doesn't seem to happen here. Make sure to test it in release mode.
 

Peter Simpson

Expert
Licensed User
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

Expert
Licensed 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

Well-Known Member
Licensed 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
 

Rusty

Well-Known Member
Licensed 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