How does Corona work with cutouts on the modern phones screen's?

Getting Started Newbie Questions
#1

How does Corona work with cutouts on the modern phones screen’s?

I don’t have a modern phone to test myself, so I want to ask about it. I mean these cutouts (attached). 

I had watched some videos, and game apps very often go full widescreen, so these areas (for front camera and sensors) - on top of the smartphone - are also in use. 

But if I want to use a top part of the phone for gameplay info (speed, score, lives, what’s coming next, messages, etc how I could now, what part in pixels I shouldn’t use?

There is another problem - these cutouts are very different. Big or small, like a circle or like a rectangle.

I already made resolution-independent prototype, so I use such commands like

display.actualContentWidth display.actualContentHeight display.pixelWidth display.pixelHeight

But I forgot about cutoffs and now apprehend, that some info may be hidden or not fully visible…

Will it happen?

#2

Corona has API’s that are for devices with Notches. Look for the display.* API’s with the word “Safe” in their name. However I believe they are only working correctly on iOS devices. My understanding is that we will need to target Android SDK 28 (Android 9/Pie) before notch support will work. We have to get 64-bit out the door then we will address SDK 28. Then there may need to be more work to hook up those API’s to our existing safe zone APIs.

Rob

#3

Rob, good day, I missed Corona updates from July, is this feature added?

#4

Search the API docs for word safe

https://docs.coronalabs.com/api/

These features have been in place for a long while.

**UPDATE** See my post below.  I missed Rob’s clear answer on Android + Notices.

Whatever the case, I feel your pain.  Notches are the worst (at least when it comes to designing game GUIs).

#5

These features have indeed been available for a long time on iOS, but I don’t think I’ve heard any mention of them being supported on Android.

#6

UPDATE: I just went through my email backlog (I keep all forums posts) and did not find a mention of this specifically…

So I am wrong.  It seems while this is well supported for Apple.  Not so much for Android.

Note: I should also read Rob’s responses more closely.  He clearly says ’ we will need to target Android SDK 28 (Android 9/Pie) before notch support will work.’

Not sure why I thought this worked… sigh…

  Notches: I still wish these had never come along.  They cause/require so much extra work as the OP has noticed.
 

#7

I’ve spent some time today trying to find an emulator with a notch for Android Studio that I could test against, but I’ve not had any luck. My Android test devices don’t have a notch so I can’t run my own test.

What I would suggest is write a small app that does something like:

print(“display.contentHeight”, display.contentHeight)

print(“display.actualContentHeight”, display.actualContentHeight)

print(“display.safeActualContentHeight”, display.safeActualContentHeight)

print(“display.screenOriginY”, display.screenOriginY)

print(“display.safeScreenOriginY”, display.safeScreenOriginY)

(if you do a landscape app, do width’s and X’s, but it would be best to do this on a portrait app, or print the width/X values too).

It might also be helpful to print display.pixelHeight and display.contentScaleY so we can check the math. 

But if display.actualContentHeight and display.safeActualContentHeight are equal then we are not detecting then notch. If they are different and the value is about the right number of points then you’re good (remember these values will be scaled to whatever you put in your config.lua for height.)

Rob

#8

Oh, you will need to build it and run it on a real device, not the simulator and use “adb logcat” to get the values.

Rob

#9

I agree with roaminggamer in wishing that these displays had never come along.

Not only do they make the process of designing and creating apps more difficult, but such displays are also more expensive to manufacture compared to their rectangular counterparts. Oh, and not to mention that almost all content is designed for rectangular screens, be it movies, e-books, games, apps, you name it.

Who benefits from having such things?! :smiley:

#10

While I agree that there are challenges with the notches, I do have to credit them with making a decent use of them (well at least on Apple since I don’t have an Android to use). The notch basically splits the status bar in two. Now left swipes down and right swipes down do different things. From a user perspective it’s not bad and instead of having a status bar that spans the whole width, the area wit the notch is good for the status bar.

From a developer perspective it’s a pain in the behind because the vendors let us control the showing of the status bar and give us that area for our own content.

#11

We had a difficult time handling notches when displaying our UI for Android…the safe apis worked very well in iOS.

We used Amazon’s Device Farm to test how our UI display against a range of Android notches & screen ratios and finally solved it. You get 1000 mins of free test time with a new signup. The list of devices are good.

Ben

#12

Good morning

I am following your discussion and I also see this problem.

I have an S10 and I can’t get rid of the black top band of android.

It seems to be a status bar.

reading documentation seems to solve the problem by adding this code:

<style name=“ActivityTheme”>
  <item name=“android:windowLayoutInDisplayCutoutMode”>
    shortEdges <!-- default, shortEdges, never -->
  </item>
</style>

How can we do it on Corona sdk?

#13

I’m not sure you can do it with the Corona simulator. I’d need to see more about where that block of XML goes to see if we can use build.settings to inject it, or if it’s a file that can be put somewhere. 

Rob

#14

should go to the style file. I tried it in various ways but I couldn’t implement it. is there a way to assigned in the build.settings?

I would like to understand, I have an s10 in sticky immersive mode Do I have to have a black band at camera height? corona is working on this?

Thanks for your help

#15

Okay, if you drill into AndroidResources/res/values you will find values.xml, you might be able to add a style table in there as such:

\<?xml version="1.0" encoding="utf-8"?\> \<resources\> \<color name="ic\_launcher\_background"\>#f4721e\</color\> \<style name="CustomFontStyle"\> \<item name="android:layout\_width"\>fill\_parent\</item\> \<item name="android:layout\_height"\>wrap\_content\</item\> \<item name="android:capitalize"\>characters\</item\> \<item name="android:typeface"\>monospace\</item\> \<item name="android:textSize"\>12pt\</item\> \<item name="android:textColor"\>#00FF00\</item\>/\> \</style\> \</resources\>
#16

Good evening

I found the android resources folder and copied it into the main project folder.

I opened the value.xml file and inserted the code:

<style name=“ActivityTheme”>
  <item name=“android:windowLayoutInDisplayCutoutMode”>
    shortEdges <!-- default, shortEdges, never -->
  </item>
</style>

But nothing, the black bar remains on me.

I don’t understand why it must be so difficult.

Do I need to implement anything in build.settings?

I made several attempts but nothing, the black bar is becoming a bad dream.

Thanks Rob for your availability, you are our only resource

#17

What version of Corona are you running?

#18

Version 2019.3545 (2019.10.27)

Telephone samsung galaxy s10

#19

Do you have this in your build.settings to enable the extra aspect ratio of the S8/9/10?

https://forums.coronalabs.com/topic/70798-enabling-samsung-s8-full-screen-mode/

Rob

#20

Yes rob, on a galaxy S9 worked well.

I’ll list the tests done:

I downloaded the fullscreenimmersive app from here:

https://github.com/roaminggamer/RG_FreeStuff/raw/master/AskEd/2018/05/fullScreenImmersive.zip

And I did tests here. I didn’t set anything in the status bar. and I have the App as an immersivesticky.

Build.setting

local orientation = ‘portrait’ – portrait, landscapeRight, …

settings = {

–  Orientation Settings 

   orientation = {

      default     = orientation,

      supported   = { orientation },

   },

     android =

    {

        applicationChildElements =

        {

            – Array of strings

            [[

            <meta-data android:name=“android.max_aspect” android:value=“2.1”/>

            ]],

        },

    },

}

_ value.xml _

<?xml version=“1.0” encoding=“utf-8”?>

<resources>

    <color name=“ic_launcher_background”>#f4721e</color>

<style name=“ActivityTheme”>

  <item name=“android:windowLayoutInDisplayCutoutMode”>

    shortEdges <!-- default, shortEdges, never -->

  </item>

</style>

<style name=“CustomFontStyle”>

      <item name=“android:layout_width”>fill_parent</item>

      <item name=“android:layout_height”>wrap_content</item>

      <item name=“android:capitalize”>characters</item>

      <item name=“android:typeface”>monospace</item>

      <item name=“android:textSize”>12pt</item>

      <item name=“android:windowFullscreen”>true</item>

      <item name=“android:windowNoTitle”>true</item>

      <item name=“android:windowLayoutInDisplayCutoutMode”>shortEdges</item>

      <item name=“android:windowContentOverlay”>@null</item>

      <item name=“android:textColor”>#00FF00</item>/> 

   </style>

</resources>

Forgive me even stupid things but I did a thousand tests and it is only a test project, then I will report everything on an app under construction.