B4A Library [B4X] B4XDrawer - sliding drawer

Discussion in 'Additional libraries, classes and official updates' started by Erel, Oct 2, 2018.

  1. Erel

    Erel Administrator Staff Member Licensed User

    This class is compatible with B4A and B4i (currently not B4J).

    [​IMG]

    [​IMG]

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

    4. Load the "Activity layout" to the drawer:
    Code:
    Drawer.CenterPanel.LoadLayout("1")
    5. Load the menu layout:
    Code:
    Drawer.LeftPanel.LoadLayout("Left")
    5. 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
    6. 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.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.
     

    Attached Files:

    Last edited: Nov 4, 2018
  2. Peter Simpson

    Peter Simpson Expert Licensed User

    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: Oct 2, 2018
  3. Erel

    Erel Administrator Staff Member Licensed User

    Example with transparent status bar:

    [​IMG]
     
    Last edited: Oct 2, 2018
  4. Johan Hormaza

    Johan Hormaza Active Member Licensed User

    Thank you very much EREL!!!:)
     
  5. Sandman

    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
    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
     
    Johan Hormaza likes this.
  6. Erel

    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.
     
    Peter Simpson and Johan Hormaza like this.
  7. Sandman

    Sandman Well-Known Member Licensed User

    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.)
     
    Johan Hormaza likes this.
  8. Erel

    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.
     
    1lusca likes this.
  9. Peter Simpson

    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: Oct 3, 2018
  10. Erel

    Erel Administrator Staff Member 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.
     
    inakigarm and Peter Simpson like this.
  11. Peter Simpson

    Peter Simpson Expert Licensed User

    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: Oct 3, 2018
  12. Erel

    Erel Administrator Staff Member Licensed User

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

    Peter Simpson Expert Licensed User

    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.
     
  14. Peter Simpson

    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: Oct 3, 2018
    Sandman likes this.
  15. Erel

    Erel Administrator Staff Member Licensed User

    Confirmed and fixed in v1.05.

    Enjoy...
     
  16. Peter Simpson

    Peter Simpson Expert Licensed User

    It is now working 100% as expected.

    I will... :)
     
    Johan Hormaza likes this.
  17. AnandGupta

    AnandGupta Active 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
     
    jimmyF likes this.
  18. Erel

    Erel Administrator Staff Member Licensed User

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

    Peter Simpson Expert Licensed User

    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: Oct 3, 2018
  20. Rusty

    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
     
Loading...
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice