CODEWITHSUNDEEP
c#xamarinxamarin.formsxamarin.ios
Pratius Dubey
Pratius Dubey

Reputation: 673

Extra bottom and top space in iPhone X in Xamarin form

I'm using XAML for UI design my app is working fine in less then Iphone X device.Only problem in Iphone X it's getting top and bottom Extra space.

If I use below code for Iphone X Safe area enable, it's getting more space in bottom and top. On<Xamarin.Forms.PlatformConfiguration.iOS>().SetUseSafeArea(true);

I got SafeArea layout setting code here SetUserSafeArea

Also i'm using SetHasNavigationBar for disable header navigation title.But there is no luck in Iphone X.

NavigationPage.SetHasNavigationBar(this, false);

Here is actual Output in Iphone X enter image description here

What i 'm missing in code or setting for Iphone X in Xamarin Form

Upvotes: 9

Views: 6540

Answers (5)

tjvg1991
tjvg1991

Reputation: 402

Hope I'm not too late. This is what worked for me.

AppShell.xaml:

<Shell ios:Page.UseSafeArea="true" Padding="0">
...
</Shell>

Upvotes: 0

Pratius Dubey
Pratius Dubey

Reputation: 673

I have solved this issue.

Here is an answer.

  1. PCL create an interface to consume in IOS Native App.

     public interface IDeviceInfo
 {
     bool IsIphoneXDevice();
 }

  2. Implement this Interface in IOS Native App.

     [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 Xamarin form using dependency Service. And write 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;
         }
     }
 }

Upvotes: 5

Tim Southard
Tim Southard

Reputation: 614

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

Upvotes: 2

Ramu Krishna
Ramu Krishna

Reputation: 11

SafeAreaInsets did trick for us.

In AppDelegate.CS,

base.FinishedLaunching(uiApplication, launchOptions);

should be replaced with below 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, xaml.cs file add below code in 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);

            }

Upvotes: 1

sme
sme

Reputation: 4153

The way I got the proper screen size to work on iOS, was by simply adding the proper splash screen images.

For example, in my iOS project I added into my Resources folder, an image named [email protected], and the dimensions of the image were 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>

Upvotes: 2

Related Questions