Android Tutorial [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: https://www.b4x.com/android/forum/t...k-for-managing-multiple-pages.118901/#content
A drawer is added to the second page. Everything is implemented in the attached example.

1. This is already part of the template.
Only required in B4A and will be part of the template in the next version of B4XPages.b4xtemplate:
In Main module:

'modify the existing subs
Sub Process_Globals
    Public ActionBarHomeClicked As Boolean
End Sub

Sub Activity_ActionBarHomeClick
    ActionBarHomeClicked = True
    B4XPages.Delegate.Activity_ActionBarHomeClick
    ActionBarHomeClicked = False
End Sub

2. In the page where you want to add the drawer:
Add to B4XPage_Created:

HamburgerIcon = xui.LoadBitmapResize(File.DirAssets, "hamburger.png", 32dip, 32dip, True) 'global B4XBitmap
#if B4i
Dim bb As BarButton
bb.InitializeBitmap(HamburgerIcon, "hamburger")
B4XPages.GetNativeParent(Me).TopLeftButtons = Array(bb)
#Else If B4J
Dim iv As ImageView
iv.Initialize("imgHamburger")
iv.SetImage(HamburgerIcon)
Drawer.CenterPanel.AddView(iv, 2dip, 2dip, 32dip, 32dip)
iv.PickOnBounds = True
#end if

And add these subs:

#if B4J
Sub imgHamburger_MouseClicked (EventData As MouseEvent)
    Drawer.LeftOpen = True
End Sub
#else if B4i
Private Sub B4XPage_MenuClick (Tag As String)
    If Tag = "hamburger" Then
        Drawer.LeftOpen = Not(Drawer.LeftOpen)
    End If
End Sub
#end if

Private Sub B4XPage_CloseRequest As ResumableSub
    #if B4A
    'home button
    If Main.ActionBarHomeClicked Then
        Drawer.LeftOpen = Not(Drawer.LeftOpen)
        Return False
    End If
    'back key
    If Drawer.LeftOpen Then
        Drawer.LeftOpen = False
        Return False
    End If
    #end if
    Return True
End Sub

Private Sub B4XPage_Appear
    #if B4A
    Sleep(0)
    B4XPages.GetManager.ActionBar.RunMethod("setDisplayHomeAsUpEnabled", Array(True))
    Dim bd As BitmapDrawable
    bd.Initialize(HamburgerIcon)
    B4XPages.GetManager.ActionBar.RunMethod("setHomeAsUpIndicator", Array(bd))
    #End If
End Sub

Private Sub B4XPage_Disappear
    #if B4A
    B4XPages.GetManager.ActionBar.RunMethod("setHomeAsUpIndicator", Array(0))
    #end if
End Sub

Private Sub B4XPage_Resize (Width As Int, Height As Int)
    Drawer.Resize(Width, Height)
End Sub

 

[asales]

Very nice. Thanks!
Would be better if we have an animation in the button like this:

Only "hamburguer image" to "close image" animation would be great.

 

[Alessandro71]

Is B4XDrawer v1.53 coming with the next update?

 

[imbault]

Using a Drawer is very helpfull,

But is there a way to open up the drawer by the right?

I see only left methods... Drawer.LeftPanel or Drawer.LeftOpen...

Is a normal behaviour of a drawer, because I would definetally need the drawer to open by the right....


Thanks

 

[Erel]

B4XDrawer only implements a left drawer. You can try this modified library: https://www.b4x.com/android/forum/threads/b4xdrawer-with-right-panel.102168