How do I support notch on phone?

  • Hi guys as you may know there are a lot of phones that have notches now. I have noticed that the content on my new app has been blocked by the notch on some devices.

    -- how do I stop this? --

    Is there a way to check if the notch is obfuscating an object on the layout?

  • The only solution that worked for me was removing "construct-mobile-notchfix" plugin from the export. Export to Cordova, remove plugin from the config.json and config.xml, then zip and build an apk with C3.

  • Which problem do you have guys?

    is the Notch plugging no detecting properly that the phone has notch?

    or

    That you cannot detect where is the Notch locate? example for landscape it could be at the (Right or Left) side depends if the phone is rotated

    Because if is the later one, I have the same problem that I couldn't detect on which side is the Notch so I can adjust the Game UI, also apart from leaving the space for the Notch I also wanted to cover it on black so you don't see two empty holes where is the notch located.

    If you have the same problem as me maybe we should open an idea request for voting as the Notch at the moment is very limited and we need more settings to properly work with the UI of our Apps

    Here is the problem I had

    Normal phone view without counting for the Notch

    Here If we no the way to know where the Notch is located right or left I could cover it in Black the Notch part Area and move the UI separate from the Notch and keep track of the phone if rotates so we can adjust it again on the other side, because right now you have to leave spaces on both sides and you cant cover both sides on black as that will cut to much space of the Screen.

    And this is how will look if we knew where the Notch is located

    Covering the space Notch Area in black and leaving space so the UI starts after the Notch Area

    ==========================================================

    I already mentioned to Scirra on this bug report

    https://github.com/Scirra/Construct-3-bugs/issues/3431

  • The only solution that worked for me was removing "construct-mobile-notchfix" plugin from the export. Export to Cordova, remove plugin from the config.json and config.xml, then zip and build an apk with C3.

    Hi,

    dop2000

    What does this do for you though?

    Does it make the screen go below the notch?

  • tarek2 Yeah, the problem I had with my game a few weeks ago was that I couldn't detect if the screen had a notch. Nor was I able to get the position and size of the notch. You are right saying that the notch support in C3 is very limited, it's basically not existing.

    Setting "Viewport Fit" to "Auto" or "Cover" doesn't seem to make any difference. And the "construct-mobile-notchfix" plugin that's automatically added to all exports simply ignores the notch, stretching the viewport to the entire screen, which may cause problems in many games.

    LaurenceBedford Yeah, if you remove the plugin, there will be a black area where the notch is. So the viewport will be smaller than the screen size, but at least it will not cover your graphics.

  • tarek2 Yeah, the problem I had with my game a few weeks ago was that I couldn't detect if the screen had a notch. Nor was I able the position and size of the notch. You are right saying that the notch support in C3 is very limited, it's basically not existing.

    Setting "Viewport Fit" to "Auto" or "Cover" doesn't seem to make any difference. And the "construct-mobile-notchfix" plugin that's automatically added to all exports simply ignores the notch, stretching the viewport to the entire screen, which may cause problems in many games.

    LaurenceBedford Yeah, if you remove the plugin, there will be a black area where the notch is. So your viewport will be smaller than the screen, but at least it will not cover your graphics.

    Ok thank you!

  • dop2000

    Is this right for removing the plugin as i have no clue when it comes to anything to do with android studio :)

    1) Export c3p to android Cordova project

    2) Open in android studio

    3) remove plugin from the config.json and config.xml

    4) Then you say "build an apk with C3." Do you mean build with android studio?

    Sorry Im really confused

    also where is config.json and config.xml located?

    --If you could I think a tutorial on this would really help out a lot of others when it comes to the notch?

    Also how do i do this for apple devices?

  • Yeah, if you remove the plugin, there will be a black area where the notch is. So the viewport will be smaller than the screen size, but at least it will not cover your graphics.

    Ho that's what I tried to do but it never worked for me as it cuts from both sides and put black marks on both sides instead of just where the Notch is located.

    Does for you cut from both sites or just from where the Notch is? dop2000

    I forgot to mention that I was testing on iPhones if that makes any difference

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • 1. Export to Cordova, download the zip.

    2. Unzip to an empty folder and edit files config.json and config.xml with Notepad.

    3. Remove these lines (make sure to remove the comma in JSON):

    4. Zip all the files.

    5. Open Export Manager in Construct 3, upload the updated zip and build an apk.

    I haven't tried building for iOS, but I'm guessing it'll be the same.

  • 1. Export to Cordova, download the zip.

    2. Unzip to an empty folder and edit files config.json and config.xml with Notepad.

    3. Remove these lines (make sure to remove the comma in JSON):

    4. Zip all the files.

    5. Open Export Manager in Construct 3, upload the updated zip and build an apk.

    I haven't tried building for iOS, but I'm guessing it'll be the same.

    Thank you I will try this now!

  • tarek2 It only cuts from the top (my game runs in portrait mode), and I only tried it on Android.

  • tarek2 It only cuts from the top (my game runs in portrait mode), and I only tried it on Android.

    Awesome I will give it a try, I hope it works for ios too, Thanks very much for the tutorial ))

  • > tarek2 It only cuts from the top (my game runs in portrait mode), and I only tried it on Android.

    Awesome I will give it a try, I hope it works for ios too, Thanks very much for the tutorial ))

    tarek2

    Let me know how it goes as I'm planning on releasing to apple but I haven't yet due to the notch bug with c3 exports.

  • > > tarek2 It only cuts from the top (my game runs in portrait mode), and I only tried it on Android.

    >

    > Awesome I will give it a try, I hope it works for ios too, Thanks very much for the tutorial ))

    tarek2

    Let me know how it goes as I'm planning on releasing to apple but I haven't yet due to the notch bug with c3 exports.

    Sure np, I will update here the results the sooner I test it

  • construct-mobile-notchfix (which uses the full screen area) is only applied if you tick "Hide status bar", since it is assuming you want to use the full screen display area. You can untick that to leave the default notch handling behavior (shrinking to avoid it) instead.

    If you do use the full display area, the Platform Info object safe area expressions tell you where to move anything important so it's not obscured by the notch.

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)