iOS Question [SOLVED] Possible to make B4XDrawer cover top of screen also?

Sandman

Well-Known Member
Licensed User
This question is regarding the lovely B4XDrawer, which I'm a huge fan of.

On Android, B4XDrawer also covers the top of the screen, like we can see here:
(With a transparent status bar)

upload_2018-11-6_21-25-46.png



On iOS the drawer doesn't overlap the top section:

upload_2018-11-6_21-17-42.png



However, when looking at (for instance) the Gmail app for iOS, their menu also covers the top section:

upload_2018-11-6_21-19-43.png



I have no idea if it's possible and reasonable to make B4XDrawer also cover the top area on iOS, but I thought it might be worth asking.

(I looked at the B4XDrawer source to see if it was a simple adjustment needed, but I could see that all references to Top for that panel was already set to 0, so I'm thinking probably some magic stuff is needed for this - and that's very far from my skill set.)
 

Sandman

Well-Known Member
Licensed User
Hide the navigation bar and create your own, so you can draw over it
That's an excellent, and very doable, compromise - thanks!


I don't think that it is possible to draw over the status bar.
Just looking at Gmail in my iPhone, it seems possible to do it. However, I imagine it's entirely possible they did what you suggested with the nav bar, and just hid it and made their own that looks identical.
 

Alberto Iglesias

Well-Known Member
Licensed User
Hello Sandman,

Did you find a solution to overdraw the statusbar?

If you did with other solution, please, comment here.

But the solution I found is simple:

In the Resize event on B4XDrawer, just change:
B4X:
mBasePanel.SetLayoutAnimated(0,  0, 0, Width, Height)
for
B4X:
mBasePanel.SetLayoutAnimated(0,  0, -20, Width, Height+20)
 

Sandman

Well-Known Member
Licensed User
Did you find a solution to overdraw the statusbar?
No, I did not. I didn't really try very hard, but I will take a look at your solution when I revisit this code. But you are saying it works perfectly, and that you actually can overlap the statusbar that easily?
 

Alberto Iglesias

Well-Known Member
Licensed User
Check this:


Basically you need to make this little modification on B4XDrawer:

B4X:
Public Sub Resize(Width As Int, Height As Int)
   
    If IsOpen Then ChangeOffset(-mSideWidth, False, True)
   
    #if B4A
        mBasePanel.SetLayoutAnimated(0, 0, 0, Width, Height)
        mLeftPanel.SetLayoutAnimated(0, mLeftPanel.Left, 0, mLeftPanel.Width, mBasePanel.Height)
        mDarkPanel.SetLayoutAnimated(0, 0, 0, Width, Height)
        mCenterPanel.SetLayoutAnimated(0, 0, 0, Width, Height)
    #else if B4i
   
        mBasePanel.SetLayoutAnimated(0,  0, -20, Width, Height+20)
        mLeftPanel.SetLayoutAnimated(0, mLeftPanel.Left, 0, mLeftPanel.Width, mBasePanel.Height)
        mDarkPanel.SetLayoutAnimated(0, 0, 0, Width, Height+40)
        mCenterPanel.SetLayoutAnimated(0,  0, 20, Width, Height+20)
    #End If
   
End Sub
and call this function to make status bar transparent before, on Application_Start

SetStatusBarStyleLight(App,1)

B4X:
Sub SetStatusBarStyleLight(app As Application,iStyle As Int) 'ignore
       Dim no As NativeObject = app
       no.RunMethod("setStatusBarStyle:", Array(iStyle))
End Sub
 

Sandman

Well-Known Member
Licensed User
Good video, thanks. Ok, so your solution is kind of over. I mean, it's over the statusbar background, but the statusbar text is still on top.

Compare that to this picture showing Gmail on iOS, where it's also over the text in the statusbar:



(Ignore the fact that the visible status bar doesn't have any text, it does in reality - for some reason it's just removed in this screenshot.)
 

sorex

Expert
Licensed User
You just want your app to be full screen?

B4X:
 Private Sub Application_Start (Nav As NavigationController)
    no.RunMethod("setStatusBarHidden:animated:", Array(True, False))

    NavControl = Nav
    NavControl.NavigationBarVisible=False
    NavControl.ToolBarVisible=False

    Page1.Initialize("Page1")
    NavControl.ShowPage(Page1)
End Sub
 
Top