Mobile Notch
The Mobile Notch plugin is designed to detect mobile device notches and retrieves the offset size it covers.
The Mobile Notch plugin detects and measures notches and cutouts in your mobile device. It adaptively retrieves the offset size of the notch where it covers the application based on the device orientation and application size, in pixels.
The Mobile Notch plugin retrieves notch measurements either through the Web API (browser) or native Android or iOS SDKs (native).
Note: This plugin is different from the official Platform Info object in Construct 3 which only measures using the Web API. The Mobile Notch plugin has an option to measure notch values through the platform's native API which avoids the Webview bug that prevents notch detection.
Introduction
The Construct Master Collection supports the full and easy integration of native mobile Android SDKs and iOS SDKs for both Construct 3 and Construct 2.
Please click here to learn more about Mobile.
Features
The Mobile Notch plugin is designed to detect mobile device notches and retrieves the offset size it covers.
The Mobile Notch plugin detects and measures notches and cutouts in your mobile device. It adaptively retrieves the offset size of the notch where it covers the application based on the device orientation and application size, in pixels.
The Mobile Notch plugin retrieves notch measurements either through the Web API (browser) or native Android or iOS SDKs (native).
Note: This plugin is different from the official Platform Info object in Construct 3 which only measures using the Web API. The Mobile Notch plugin has an option to measure notch values through the platform's native API which avoids the Webview bug that prevents notch detection.
Here are some of the native features of the mobile plugin:
Android notch detection
iOS notch detection
Web API
Native API
Measure notch size in pixels
Safe area inset, in pixels.
Top
Bottom
Left
Right
Auto-adjust on screen orientation change.
Auto-adjust on application resize.
Display measurements
Screen measurements
Info update event listeners
Debugger
Chrome
Safari
Android Studio
Xcode
For more information about native mobile or Android and iOS features, please click here to learn the introductory lessons to Mobile.
Platform Integration
Here are some of the platforms that are natively supported:
Android
iOS
Native Android
Native iOS
Web Android
Web iOS
Build Support
Here are some of the supported build options:
Construct 3 Build Service
Android Studio
Xcode
Phonegap
Editor Features
Here are some of the features in the Construct editor:
Construct 3
How to use?
It is easy to use the Mobile Notch plugin, you will only need to follow the steps below.
1. The first step is to add the Mobile Notch object into the project.
2. Check the debug mode property to log errors in the console. This is used for mobile debugging.
3. The Mobile Notch object has two (2) detection sources.
Browser - uses the Web API to detect, measure and retrieve notch values. For example, using the Webview.
Native - uses the native platform's SDK to detect, measure and retrieve notch values. For example, using the Android SDK and iOS SDK.
Documentation
There is currently nothing to show, we will add more in the future.
Actions, Conditions & Expressions
Actions
Conditions
The following condition groups:
General
General
Compare detection source - Check how the notches are detected.
Compare platform - Check the current platform.
Platform - If running on a native mobile device, either "Android" or "iOS". Otherwise, if on any other platform, including browsers, then "other platform".
On info update - Trigger fires when display and notch information have been updated.
Expressions
The following expression groups:
General
Display
General
GetInsetTop - Returns the top inset, in pixels, of safe rectangular area on non-rectangular screens.
GetInsetBottom - Returns the bottom inset, in pixels, of safe rectangular area on non-rectangular screens.
GetInsetLeft - Returns the left inset, in pixels, of safe rectangular area on non-rectangular screens.
GetInsetRight - Returns the right inset, in pixels, of safe rectangular area on non-rectangular screens.
Display
GetWindowOuterWidth - The width of the entire window area in pixels.
GetWindowOuterHeight - The height of the entire window area in pixels.
GetScreenWidth - The width of the screen in pixels.
GetScreenHeight - The height of the screen in pixels.
Object Properties
Plugin Properties
The following property groups:
Configuration
System
Configuration - The configuration section for the mobile notch plugin.
Debug - Check to log errors on the console.
System - The configuration section for the plugin implementations.
Source - If source is set to 'browser', notch values will be retrieved from the Web API. If source is set to 'native', notch values will be retrieved from the native platform SDK.
Browser
Native
Showcase
The Mobile Notch plugin detects mobile device notches and retrieves the offset size it covers, in web mobile, native Android and native iOS.
Measured in Samsung Galaxy S22 Ultra
A sample event sheet that implements most features.
Game Projects
Instructions Kit
Specifications
-
Instructions - The game project contains instructions and steps on how to use the addon and its features.
-
Action, Conditions and Expressions - It covers the implementation of each action, condition and expression.
-
Tips and Tricks - It provides some tips and tricks on the recommended ways of using the addon.