Hi guys,
Just to share. The whole app is streched when bottom-nav bar is hidden. It is ok when it is shown.
Issue only happens on Android 5.x
This bug has been reported #41124
Screen shot from actual device, Nexus 5 (Android 5.1.1)
It’s not a bug. The bottom navigation bar is *not* overlaid on top of your app. Your app window is actually sized above the navigation bar by the operating system. So, when you put the screen into immersive mode, what happens is that your app window’s height increases in size when the bottom navigation bar is removed. Meaning that your app window has been resized. What you need to do is handle the Lua “resize” event to re-layout your app’s contents.
https://docs.coronalabs.com/api/event/resize/index.html
Think of it like how Windows desktop apps work. For example, let’s take IE (I know, our favorite browser, right?). When you maximize the window, it fills up the entire screen except for the bottom Windows task bar. Now, when you press the F11 key to put the Window into fullscreen mode, notice that its height increases to cover the bottom Windows task bar now. Android apps work a lot like this.
Now, if you’re using Corona’s content scaling feature (ie: letterbox, zoomEven, or zoomStretch) then what will happen is that the display.contentScaleX/Y properties will change. If you’re using letterbox scaling, then the letterbox size will change. For zoomEvent, more or less content will be lost along the sides as well. You’ll need to adjust for all of this in your “resize” Lua listener. Or… you could delay laying-out your app on startup and wait for immersive mode to kick in.
Just note that there is a confirmed bug on Google’s end where a black bar is overlaid at the bottom of the screen when it shouldn’t when resuming your app via the quick app switcher button. We haven’t found a work-around for this issue. And because of this, I don’t know if immersive mode is really worth using until a fix or work-around can be found by Google.
Dear Joshua,
Thanks for the explaination. The issue is that the status-bar settings is only set once, and when navigating thru other composer-pages, all the images are stretched. Example :
-
Hide status bar, set to ‘immersiveSticky’ and status bar will be gone. @ main.lua
-
Delay of 1s. Navigate to composer pages.
-
Status bar is not revealed at all during this time. Images are stretched in all pages.
In this situation, everything is set only 1 time @ main.lua
The other pages loaded using composer are affected.
Images of 200x200 looks like 200x220, even after I reload the pages and redrawing it as 200x200
Does this mean I need to manually y-scale each image if I use these settings on Android 5.x ?
Thanks
This is likely happening because your displaying your composer scene before putting the screen into immersive mode. So, this means it needs to be relayed out after your app window has been resized.
Unfortunately, composer does not support relaying out the scene when a resize event occurs. You’ll have to force it by reloading the scene yourself via your resize Lua listener.
It’s not a bug. The bottom navigation bar is *not* overlaid on top of your app. Your app window is actually sized above the navigation bar by the operating system. So, when you put the screen into immersive mode, what happens is that your app window’s height increases in size when the bottom navigation bar is removed. Meaning that your app window has been resized. What you need to do is handle the Lua “resize” event to re-layout your app’s contents.
https://docs.coronalabs.com/api/event/resize/index.html
Think of it like how Windows desktop apps work. For example, let’s take IE (I know, our favorite browser, right?). When you maximize the window, it fills up the entire screen except for the bottom Windows task bar. Now, when you press the F11 key to put the Window into fullscreen mode, notice that its height increases to cover the bottom Windows task bar now. Android apps work a lot like this.
Now, if you’re using Corona’s content scaling feature (ie: letterbox, zoomEven, or zoomStretch) then what will happen is that the display.contentScaleX/Y properties will change. If you’re using letterbox scaling, then the letterbox size will change. For zoomEvent, more or less content will be lost along the sides as well. You’ll need to adjust for all of this in your “resize” Lua listener. Or… you could delay laying-out your app on startup and wait for immersive mode to kick in.
Just note that there is a confirmed bug on Google’s end where a black bar is overlaid at the bottom of the screen when it shouldn’t when resuming your app via the quick app switcher button. We haven’t found a work-around for this issue. And because of this, I don’t know if immersive mode is really worth using until a fix or work-around can be found by Google.
Dear Joshua,
Thanks for the explaination. The issue is that the status-bar settings is only set once, and when navigating thru other composer-pages, all the images are stretched. Example :
-
Hide status bar, set to ‘immersiveSticky’ and status bar will be gone. @ main.lua
-
Delay of 1s. Navigate to composer pages.
-
Status bar is not revealed at all during this time. Images are stretched in all pages.
In this situation, everything is set only 1 time @ main.lua
The other pages loaded using composer are affected.
Images of 200x200 looks like 200x220, even after I reload the pages and redrawing it as 200x200
Does this mean I need to manually y-scale each image if I use these settings on Android 5.x ?
Thanks
This is likely happening because your displaying your composer scene before putting the screen into immersive mode. So, this means it needs to be relayed out after your app window has been resized.
Unfortunately, composer does not support relaying out the scene when a resize event occurs. You’ll have to force it by reloading the scene yourself via your resize Lua listener.