Extra bottom and top space in iPhone X in Xamarin shape

Question

I use XAML for user interface design. My application works fine than on the Iphone X. The only problem with Iphone X is getting the top and bottom extra space.

If I use the code below to resolve the Iphone X Safe area, it gets more space below and above. On<Xamarin.Forms.PlatformConfiguration.iOS>().SetUseSafeArea(true);

I set the SafeArea SetUserSafeArea layout code here

I also use SetHasNavigationBar to disable the title of the title bar. But Iphone X has no luck.

 NavigationPage.SetHasNavigationBar(this, false); 

Here is the actual output in iphone x

What I miss in the code or setup for Iphone X in Xamarin form

Answer 1

I solved this problem.

Here's the answer.

1. PCL creates an interface for use in the iOS Native App.

    public interface IDeviceInfo { bool IsIphoneXDevice(); } 

2. Implement this interface in your own iOS application.

    [assembly: Dependency(typeof(DeviceInfoService))] namespace POC.iOS.DependencyServices { public class DeviceInfoService:IDeviceInfo { public DeviceInfoService() { } public bool IsIphoneXDevice() { if (UIDevice.CurrentDevice.UserInterfaceIdiom == UIUserInterfaceIdiom.Phone) { if ((UIScreen.MainScreen.Bounds.Height * UIScreen.MainScreen.Scale) == 2436) { return true; } } return false; } } } 

3. Call this method in the Xamarin form using the dependency service. And write down the logic for the iPhone X layout.

    public partial class Page : ContentPage { public Page() { InitializeComponent(); var isDeviceIphone = DependencyService.Get<IDeviceInfo>().IsIphoneXDevice(); if (isDeviceIphone) { var safeInsets = On<Xamarin.Forms.PlatformConfiguration.iOS>().SafeAreaInsets(); safeInsets.Bottom =20; safeInsets.Top = 20; this.Padding = safeInsets; } } } 

Answer 2

I had the same issue recently. I found out that iOS determines if your application can handle iPhone X using a splash screen. There were no screensaver images that would work. I had to create a storyboard and use it for my screensaver. This link should help you: https://developer.xamarin.com/guides/ios/application_fundamentals/working_with_images/launch-screens/

Answer 3

The way I got the correct screen size for working in iOS is just adding the right splash screen images.

For example, in my iOS project, I added an image named [e-mail] to my Resources folder, and the image size was 1125x2436 .

And then in my Info.plist file I added the following code under the UILaunchImages key:

 <key>UILaunchImages</key> <array> <dict> <key>UILaunchImageMinimumOSVersion</key> <string>8.0</string> <key>UILaunchImageName</key> <string>Default-812h</string> <key>UILaunchImageOrientation</key> <string>Portrait</string> <key>UILaunchImageSize</key> <string>{375, 812}</string> </dict> ... other launch images ... </array> 

Answer 4

SafeAreaInsets helped us.

In AppDelegate.CS,

 base.FinishedLaunching(uiApplication, launchOptions); 

should be replaced with the following code:

 var result = base.FinishedLaunching(uiApplication, launchOptions); try { if (UIApplication.SharedApplication.KeyWindow != null) { double top = 0; double bottom = 0; if (UIDevice.CurrentDevice.CheckSystemVersion(11, 0)) { top = UIApplication.SharedApplication.KeyWindow.SafeAreaInsets.Top; bottom = UIApplication.SharedApplication.KeyWindow.SafeAreaInsets.Bottom; } //Store safe area values using NSUserDefaults.StandardUserDefaults DependencyService.Get<ISettingsService>().AddOrUpdateValue("IPhoneXSafeTop", top); DependencyService.Get<ISettingsService>().AddOrUpdateValue("IPhoneXSafeBottom", bottom); DependencyService.Get<ISettingsService>().Save(); } } catch (Exception ex) { Console.WriteLine("Ex in FinishedLaunching: " + ex.Message); } return result; 

In PCL, the xaml.cs file adds the code below to the Constructor:

 var IPhoneXSafeBottom = DependencyService.Get<ISettingsService> ().GetValueOrDefault<Double> ("IPhoneXSafeBottom", 0); var IPhoneXSafeTop = DependencyService.Get<ISettingsService> ().GetValueOrDefault<Double> ("IPhoneXSafeTop", 0); if (IPhoneXSafeBottom > 0) { MainLayout.Padding = new Thickness(0, IPhoneXSafeTop, 0, IPhoneXSafeBottom); }