Cover the entire screen

Audio and Graphics
#1

Hi guys in my app I use the following config:

. . . content = { width = 320, height = 480, scale = "letterbox", fps = 60, imageSuffix = { ["@2x"] = 1.5, --\<---- changed from 2 to 1.5 ["@4x"] = 3, --\<---- changed from 4 to 3 }, }, . . .

I also hide the notification bar using:

display.setStatusBar( display.HiddenStatusBar )

and finally I create my background by doing something like:

local bg = display.newRect( display.contentCenterX, display.contentCenterY, display.actualContentWidth, display.actualContentHeight)

All this works well and the many test projects are done.

The problem is that on Android the navigation bar is very annoying so I hide it with:

 local function onResize( event ) if (system.getInfo("androidApiLevel") \>= 19) then native.setProperty("androidSystemUiVisibility", "immersiveSticky") else native.setProperty("androidSystemUiVisibility", "lowProfile") end end onResize() Runtime:addEventListener( "resize", onResize )

And here the problem is created. Apparently display.actualContentWidth and display.actualContentHeight refer to the entire screen without bar. and when I hide the bar everything is centered, leaving small black edges above and below the screen. 

Is there a way to know the new dimensions? something to solve this?

#2

The issue is that when the navigation bar becomes visible, it will resize the display objects, but simply setting the UI visibility back to immersiveSticky will not resize said display objects back.

I fought with this same issue for a good while with one on-going client project. The way that you should be able to solve this, and how I went about solving this, is to remove all affected display objects and then recreate them and/or move back any affected display objects to their original places.

Now, if @Rob or someone else knows, I would also greatly appreciate knowing what specifically happens during this resize event when the Android navigation bar reappears. How does Corona (or the system) determine what display objects are scaled and how does the scaling happen?

Would there be an easier way to resize, or rather scale back, everything after this resize event? Is there some “master canvas/group” that could just be set “group.xScale, group.yScale = 1, 1” and everything is magically fixed? Because surely there must be a simpler approach than removing and recreating everything. If it is scaled once, then shouldn’t we be able to just scale it back to the original dimensions?

#3

You hit the problem!

Your solution works but I don’t know if I can do this. In my app I also use physics and other elements that are difficult to eliminate and recreate exactly as before.

I hope someone can provide a simpler and more decisive approach

#4

No updates on this? Is there a possible solution for this?

#5

the questions myself too, no experiences?

#6

Can someone actually say what happens? What moves where? Does something get scaled or just moved? How to undo it?

#7

We are left to ourselves … For months …

#8

What devices are you guys seeing this on and what versions of Android are you running?

I have a Google Pixel 3aXL running Android 10 and I don’t see this issue, but I suspect this is because in my case, the navigation bar(s) overlay the app and don’t actually shrink it like you used to see with prior Android versions.

I’ll re-charge an old device with an older version Android and see if I can replicate this.  However till then, a downloadable (tiny) demo or very clear instruction on how to replicate this would help me and others.

#9

This is the demo I made to try to replicate this (no luck on Android 10): 

https://github.com/roaminggamer/RG_FreeStuff/raw/master/AskEd/2020/03/androidShrinkage.zip

APK: 

https://github.com/roaminggamer/RG_FreeStuff/raw/master/AskEd/2020/03/androidShrinkage_apk.zip

Run, then tap screen for instructions.

#10

There are a few issues.

First of all, I set the display’s default background colour to pink so that it is easy to spot. I then add a green rectangle on top of it that should cover the entire screen. I also add a grey rectangle to the top left corner.

As I hide the Android navigation bar, I see two pink bars on both sides of the display. However, my green rect was supposed to cover the entire screen, which means that display.actualContentWidth and display.actualContentHeight did not return proper values. Also, since there are two pink bars, it means that Corona automatically offset all display objects. This is also evident from how the grey rectangle has moved, see the image below:

Now, I can get around the pink rectangles by just making the green rect twice as wide (or tall, depending on orientation), but we can still see that the grey rect has been moved in the picture below:

 

So, we’d essentially need to get the height of the navigation bar so that we’d know what the actual size of the screen is. Now, we’d still need to know what the amount of offset is, I’m guessing it is half the height of the navigation bar, and then we’d need to manually add to this offset and move all display objects or groups in resize events to manage this event as it is intended to be handled.

Here’s the code that I used:

display.setStatusBar( display.HiddenStatusBar ) display.setDefault( "background", 0.9, 0, 0.7 ) local bigRect = display.newRect( display.contentCenterX, display.contentCenterY, display.actualContentWidth, display.actualContentHeight ) bigRect:setFillColor( 0, 0.5, 0 ) local smallRect = display.newRect( display.screenOriginX+1, display.screenOriginY+1, 100, 100 ) smallRect:setFillColor( 0.1 ) smallRect.anchorX, smallRect.anchorY = 0, 0 if system.getInfo("platform") == "android" then native.setProperty("androidSystemUiVisibility", "immersiveSticky") end
#11

I mean… there must be some API that gives that value??

#12

Or if there isn’t then wouldn’t it be pretty easy to write such a plugin? Or something

#13

What devices and versions of Android are you guys seeing this for.

#14

I am using samsung galaxy serieswith latest android versions

#15

I believe I’ve encountered this on all devices that have these virtual navigation bars on Android. The images above were taken from Samsung Galaxy A7.

#16

You guys are both using Android 10?  Please be specific.  This may help narrow the issue down.  You can get this info under 

Settings --> About Phone --> Android Version

#17

I have version 9 but as said XeduR@Spyric I don’t think it’s a version problem

#18

With regards to Android versions and devices, more data is more data.  Maybe Android version doesn’t matter, but I suspect it does since I don’t see this issue on my device with Android 10.

However… I could be wrong.  

Important

I just updated the demo app to use the ‘pink background’ method suggested above.

Can one or both of you, (re-) download the project and install it on your device or just use the APK link and run that?

I’l like to know if the sample demonstrates the problem.  Without something to debug from as a base it’s hard to help.

I am still digging for a device that shows this problem, but no luck.

> Pixel 3A XL (Android10) - Does not have this issue

> Galaxy Tab 4 - Has on bezel buttons so can’t use device to test this out.

> Nexus 7 Gen 1 (Android as yet unknown) - Currently trying to recharge, but so far it is a brick.  However, if I can get it charged I’ll keep digging using this device.

Interesting discussion here: https://forums.coronalabs.com/topic/76330-android-10-soft-navigation-key-problem/  Seems the behavior I’m seeing may be because of Android 10 and/or because I’m using a Pixel 3aXL.

#19

Yay.  Got my Nexus 7 to charge and boot.

My Gen 1 Nexus 7 running Android 5.1.1 demonstrates the issue, so I can now try to help.

#20

OK.  I think I have a solution.

Please add this code to the very top of main.lua OR at least before you do any scaling or object creation.

local function androidShrinkageFix() local beforeViewableContentHeight = display.safeActualContentHeight local afterViewableContentHeight local fixScale local fixOffset = 0 local currentStage = display.getCurrentStage() local function onResize() if( fixScale ) then currentStage:scale(fixScale,fixScale) currentStage.y = -fixOffset/2 else afterViewableContentHeight = display.safeActualContentHeight fixScale = afterViewableContentHeight/beforeViewableContentHeight fixOffset = afterViewableContentHeight - beforeViewableContentHeight currentStage:scale(fixScale,fixScale) currentStage.y = -fixOffset/2 end end Runtime:addEventListener( "resize", onResize ) end androidShrinkageFix()

Then, proceed as you have been, and use the same code you have to hide the navigation bar as needed.

Try it out for a bit and write back with your results.  I’ll post again after that.