Fullscreen for phones with notches

[marek.skreko]

Hello everybody,

while building my corona app and testing it on Samsung S10e I noticed that there is black box covering the front camera. I would like to make my app render even into the area where the notch is located. I know that it can be done through settings, but I would prefer it to be automatic.

I tried to find more information about it, however I discovered that you can not do it yet directly with Solar2D, well for android at least, and that you have to do it in native code.

I opened the template, provided by Corona SDK, in Android Studio. After several hours I finally managed to build the app and test it on my device. However I still haven’t found out how to display content even in notch area. I have come across with this

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


I have found some other snippets of code related to this topic, tried to put it to various places inside the project but to not success.
I think the biggest problem for me is that although I see the code but I never know where exactly to put this in my project.

If anyone has idea how to solve it please share,

Best regards,
Marek

[Siu]

Hi Marek,

I don’t have that physical device to test with, but now I’m curious as to how Solar2D apps would look like when deployed to it.

I’m seeing the front camera located where the status bar is. So, are you saying that there’s a black box surrounding the front camera although the status bar is hidden and the app is drawing to the status bar area as well?

[marek.skreko]

Yes I think it is as you say, I am posting pictures to clarify what I meant.

This is how it defautly looks

And this is how I want it to be, I achieved it by setting it on my phone, but I would prefer if player didn’t have to set anything up so it would be automatic.

[Siu]

Thanks for the visual, does help a lot.

Not really sure whether this is a alignment issue or a width of your content and positioning issue.

So, assuming you’re using landscapeRight or landscapeLeft orientation on your build.settings for default and/or supported, create a test object (a rect or circle) and position its x value at display.screenOriginX. This is essentially the left border of the physical screen. The results will help to pinpoint where the issue is.

Also, what content scaling are you using in config.lua? Is it the default from a new project?

[marek.skreko]

Thank you for answers.

Tbh I don’t think it is either, if it would be alignment or pisitioning issue I don’t think it would be possible to solve it by setting fullscreen in phone settings. It is not just my app, a lot of other apps show the same way on Samsung S10 (and from what I heard many other phones with some type of notch), a lot of them do not display the game in notch area, unless explictly set up in settings. However there are some apps that do extend the content through notch area as well automatically, therefore it must be doable. I believe that Solar2D treats the black box around the notch as end of screen, so anything I do in Solar2D I am not sure it is possible to extend to the cutout area.

From what I understand on iOs you can go around it by using the word Safe, but I heard it doesn’t work in Android. But of course I might be wrong, and if we could solve it directly with lua that would be so much better and more convenient.

When it comes to content scaling I use zoomEven.

I tested it on few other devices, all of them without any notch, and on them it always displayed just how it should.

Also I created that test object on display.screenOriginX, here are screens (the test object is that Crate close to the upper left corner (I am also posting it with both setting, default and extended)).

[jdsmedeirosbr]

Have you tried to implement the code described in that topic?

Android Galaxy S10 full screen

Good morning I’m trying to enable the full screen on a samsung galaxy s10. I state that on a galaxy S9 + everything works correctly. To make it work in full screen I have to go to the App screen settings and select full screen mode instead of automatic mode. is there a way to start the app automatically in full screen? I have already set in the build.setting: applicationChildElements =          {              - Array of strings              [[              <meta-data android: name = “a…

also disabled the status bar?

[agramonte]

I have tried to fix this for many hours in the past. I have yet to see a solar2d app that takes up the space correctly. I also tried it in native and it doesn’t work for reasons I don’t understand (yet). So the bad news is that on many phones with notches the game / app don’t look as professional as they should but for now you just have to let it go.

To answer your original question: In the native build create a “values” files with the name of “styles.xml”. Technically you should create a v27 of the values files, but if you get this working without it then that part is easy.

Then you have to apply this theme somewhere. I have tried to apply it to the application level. Just add the them to the Android Manifest like this:

I have also tried at the activity level by creating the .apk, modifying the manifest, and then resigning it. I do this so I don’t have to compile my own version of Solar2d (which I have done in the past but then I have to keep up with Vlad’s changes which is painful).

In any case none of this works. So for now we have to live with the ugly border.

[XeduR]

If I’m not remembering wrong, this was supposed to be something that would get addressed after migrating to AndroidX, which should be done now?

The previous Android versions that were used back in Corona days simply didn’t have access to those Android API, but having migrated to AndroidX, they should now be accessible.

Again, if I am not mistaken, this issue should now be at a point where someone could go in and add Android support for these API to Solar2D core:

• display.getSafeAreaInsets
• display.safeScreenOriginX
• display.safeScreenOriginY
• display.safeActualContentWidth
• display.safeActualContentHeight

[marek.skreko]

Thank you for your insight, that is pretty much how I tried it. That is kind of demotivating, I agree with you that it looks ugly and unprofessional. Let’s just hope that it will be solved Solar2D soon.

XeduR: thanks for the info, I hope it will be solved soon. If the Safe api would work that would be very convenient.

[marek.skreko]

Yes I tried that, no success.

[bgmadclown]

I also remember that the solution was implemented as working for Android but rolled back after seeing that it wasn’t. It’s highly possible that it’s still in the source code somewhere, commented out maybe.

[jdsmedeirosbr]

You could open an issue on Github about that.

[XeduR]

Add support for display cutouts on Android

[marek.skreko]

Thank you for putting it on GitHub, hopefully it will noticed and solved.

[Jonsey]

may be you need to correct the alignment. it is different for different phones

[agramonte]

it has nothing to do with alignment.

[agramonte]

I finally figured out how to do it if you are doing a native build. Apologize in advance for the low voice. I created a video here:

The code that I use in the video just in case you can’t find it:

<activity android:name="com.ansca.corona.CoronaActivity"
            android:theme="@style/ActivityTheme" />

and

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="ActivityTheme">
  <item name="android:windowLayoutInDisplayCutoutMode">
    shortEdges <!-- default, shortEdges, never -->
  </item>
</style>
</resources>

[agramonte]

And finally figured it out with simulator build.

This part you only have to do once per release.

1. Unzip the Android template. ON my machine it is under the native folder in the application folder:
   
   
2. Open the Android Manifest template under the unzip folder->template->app->buildtools->
   
   
3. Delete the “theme entry” from that file. Make sure you leave the last “>”.
   Before:
   
   After:
   
4. Select the SDK folder and Template folder and zip it up. Rename this zip to “android-template.zip” and place it in the same location as the original file.
   

Done for every project:

1. Create a “values-27” folder inside "yourprojectfolder/AndroidResources/res/.
   In that folder create a “styles.xml” file and copy and paste the xml in the previous post.

2. In the build settings add this under android:

coronaActivityFlags =
{
theme = “@style/ActivityTheme”,
},

3. Build through the simulator normaly.

[marek.skreko]

Thank you very much for your answers. However since according to github the problem will be solved soon and because I also tried your method and couldn’t have made it work, I think I will just wait a little longer untill it can be done directly in Solar2D. I really appreciate your help, and in case the problem will not be solved in several months, I will go back and try to make your method work for me.

[agramonte]

If it isn’t fixed and you want to give it a try at some point, I will help you.