B4A Library [B4X] B4XDrawer - sliding drawer

Status
Not open for further replies.
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 www.b4x.com

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:
Code: 
Drawer.Initialize(Me, "Drawer", Activity, 300dip) 'Page1.RootPanel in B4i
300dip = left menu width

2. Load the "Activity layout" to the drawer:
Code: 
Drawer.CenterPanel.LoadLayout("1")
3. Load the menu layout:
Code: 
Drawer.LeftPanel.LoadLayout("Left")
4. Handle back key (B4A):
Code: 
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):
Code: 
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

Last edited:
Click to expand...
Erel said:
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.
Click to expand...

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:
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
Code: 
mDarkPanel = xui.CreatePanel("")

...to...

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

...and add this:

Code: 
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 said:
This is not a good solution. The dark panel covers the content so it will consume touch events that should go to other views.
Click to expand...

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.)
 
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:
Erel said:
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.
Click to expand...

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 said:
Doesn't seem to happen here. Make sure to test it in release mode.
Click to expand...
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.
 
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:
Erel said:
B4ADrawer renamed to B4XDrawer. It is now compatible with B4i and B4A.
Click to expand...

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

Similar Threads

f0raster0
  • Question Question
Android Question [B4X] B4XPages + B4XDrawer - Title Hide-show
Replies
10
Views
8K
f0raster0
f0raster0
J
  • Question Question
Android Question [B4X] B4XDrawer - sliding drawer
Replies
1
Views
3K
Erel
Erel
Alexander Stolte
  • Article Article
B4A Library [B4X] B4XDrawerAdvanced - Sliding Drawer - Left and Right Panel
Replies
13
Views
14K
Olaan
Olaan
Erel
  • Article Article
Share My Creation [B4X] B4X Pleroma - open source client for Mastodon / Pleroma social networks
Replies
13
Views
24K
Erel
Erel
Erel
  • Locked
  • Article Article
Android Tutorial [B4X] B4XPages + B4XDrawer
Replies
4
Views
23K
Erel
Erel
Back
Top