How to define Application Working Area on the screen?

Hey guys!
I cannot understand a few things on setting coordinates for UI. I played with all sorts of variables… these:

print("actualContentHeight", display.actualContentHeight)
print("contentHeight", display.contentHeight)
print("pixelHeight", display.pixelHeight)
print("safeActualContentHeight", display.safeActualContentHeight)
print("statusBarHeight", display.statusBarHeight)
print("topStatusBarContentHeight", display.topStatusBarContentHeight)
print("viewableContentHeight", display.viewableContentHeight)
print("safeScreenOriginX", display.safeScreenOriginX)
print("safeScreenOriginY", display.safeScreenOriginY)

I tried their combinations, but all in vain… Whatever looks good in the emulator and on my Google XL, is not what shows up on Redmi Note 7 or Iphone X which got quite an unusual resolutions…

First of all here are my settings:
width = 720,
height = 1280,
scale = “letterbox”,
… and I don’t think I would like to change them :slight_smile: I will if I have too…

To slove all my prlblems all I have to do is to find coordinates of two (JUST TWO) pixles.

  1. Y Position of the first pixel just under the top bar.
  2. Y Position of the pixel just above the navigation bar…
    2a) If Navigation bar is not present (like on some Andoids & MacOS) then I would like to get the Y postion of the last visible pixel at the bottom of the screen.

safeActualContentHeight as promised in the manual will have to use area which is NOT covered by top & navigation… but it does!

I have spent quite a lot on this same issue and just when I thought I figured all out i come across other issues.
So, to start off, the following link is probably the best at laying the foundations:

2nd, in the Simulator things might look proper. If you’re printing to the console you’re getting Simulator numbers and not of the actual device unless you’re displaying those values on the screen of the device.

Another approach is to just draw a rectangle at the center of the screen with the variables you’re using so you’ll have a visual as to what’s happening on your devices.

Is there just a simple formula?

(pot must be at least 50 chr… just adding some)

A formula for alignment? You can use something like what roaminggamer posted and can read more about this topic here:

local w 		= display.contentWidth
local h 		= display.contentHeight
local fullw		= display.actualContentWidth 
local fullh 		= display.actualContentHeight 
local centerX 		= display.contentCenterX
local centerY 		= display.contentCenterY
local unusedWidth	= fullw - w
local unusedHeight	= fullh - h
local left		= centerX - fullw/2
local top 		= centerY - fullh/2
local right 		= centerX + fullw/2
local bottom 		= centerY + fullh/2
2 Likes

Thanks.
I see that the top pixel of Application Working Area is

top_int = display.contentCenterY - display.actualContentHeight/2+display.topStatusBarContentHeight

But how do I find the Y coordinate of the top pixel of Navigation Bar if it is present?

In other words, why SafeArea does not work? Why it covers the Navigation Bar?

I don’t use SafeArea, haven’t really looked as to what exactly that does.
I have 2 test devices, a Samsung Galaxy Note 8 (pretty long on it’s height), and a ASUS ZenPad 8.0
Using:

  width = 640,
  height = 960, 
  scale = "letterbox",

On neither device does display.actualContentHeight cover the Navigation bar if it’s present (not hidding.)

Edit: Have to add, this is while placing the rectangle on center of screen. If you do use that for your height and move it down below the Top Status Bar, then it will cover the Navigation bar, in which then your height should be considered as:

display.actualContentHeight - display.topStatusBarContentHeight

for your actual screen height; I believe that’s what you’re looking for.

Most likely you got a black strip inbetween the nav.bar and the conent…
BTW right now I am testing another aproach of finding the working area bottom point. The nav bar height in Android is 24dp.
We can get SystemInfo(“androidDisplayYDpi”) and get the height in pixels…

YDpi = SystemInfo(“androidDisplayYDpi”)
YDpi_n = tonumber(YDpi)
nav_bar_height = 24*YDpi_n/160

… the value is about twice less what I want :frowning:
Also, this method does not define if the navbar is present…

Hi Andrei,
obviously I don’t know your app and so I could say bullshit.

But why don’t you remove everything?

This is because when you need the navigation bar the system still adds it to the app screen (try it to believe it). But at least you work on a screen with well-known dimensions.
The navbar will overwrite the area, but when you return to full screen it will disappear again.

Ciao
Renato

-- Removes bottom bar on Android 
if system.getInfo( "androidApiLevel" ) and system.getInfo( "androidApiLevel" ) < 19 then
    native.setProperty( "androidSystemUiVisibility", "lowProfile" )
else
    native.setProperty( "androidSystemUiVisibility", "immersiveSticky" ) 
end

system.setIdleTimer(false)    --display alwais on
1 Like

Thank you for your answer. I found a solution, thought not tested it yet on many devices, especially iOs. But works for me :slight_smile: I found that dp to pixel conversion actually works really well, but config.lua must have width & height & “letterbox”. Zoom, width&height=0 will definatly play up, so we will end up with a “drunk design”…

Thanks.
I see that the top pixel of Application Working Area is

top_int = display.contentCenterY - display.actualContentHeight/2+display.topStatusBarContentHeight

But how do I find the Y coordinate of the top pixel of Navigation Bar if it is present?

There are a number of different elements that affect the available size/area of your screen. This is one of those ‘constantly evolving’ things which is always a pain in the neck to deal with.

I’ll see if I can’t put together a recipe/example for you, but in the short term please give a look at these links:

Notches:
https://docs.coronalabs.com/api/
==> https://docs.coronalabs.com/api/library/display/getSafeAreaInsets.html

Nav (or otherwise) Bars:
http://docs.coronalabs.com/api/library/display/topStatusBarContentHeight.html

Hiding nav bar on devices which support it: https://docs.coronalabs.com/api/library/native/setProperty.html#androidSystemUiVisibility

… and more.

Please give a search: https://forums.solar2d.com/search?q=navigation%20bar

1 Like