Launch Screens

Using an Image as a Launch Screen in Xamarin.iOS.

PDF for offline use
Sample Code:
Related Articles:

Let us know how you feel about this


0/250

last updated: 2016-12

This article covers deprecated methods of including and managing an image asset in a Xamarin.iOS app to be used as a Launch Screen.

Overview

This article covers several deprecated image technologies and technique that might be required to maintain an older Xamarin.iOS app:

Launch Screens

After the user taps the app icon and before the first view appears, a blank screen will be shown. Fortunately, iOS includes support for displaying an image in place of the blank screen. Some apps use this as a splash screen, and others display something that resembles the first view presented by the app.

⚠️

NOTE: The information in this section is provided for historical reference only. Starting with iOS 9, Launch Screens should be created with Storyboards instead of including specific Image Asset Launch Screens for all of the different iOS Device types.

For a Xamarin.iOS app that would be running on several different types of iPhones, a version of a given Launch Screen image asset would need to be created for each device sizes and resolution. For example:

Note: iPhone 7 and iPhone 7 Plus use the same sizes as the iPhone 6 and iPhone 6 Plus in the graphic above.

The same Xamarin.iOS app running on several different types of iPads, would additionally require a version of the same Launch Screen image asset above for each of these device sizes and resolution. For example:

Resulting in the following Launch Screen combinations based on device and orientation:

iPhone
iPhone 1-4s iPhone 5, 5s iPhone 6, 7 iPhone 6, 7 Plus
Type 1x 2x 2x 2x 3x(3)
Resolution 320x480 640x960 640x1136 750x1334 1242x2208
2208x1242
Filename(1) Default.png Default@2x.png Default-568h@2x.png(2) Default-375w-667h@2x~iphone.png(6) Default-414w-736h@3x~iphone.png(6)
Default-Landscape@3x.png
iPad iPad Pro
Portrait Landscape Portrait Landscape
Type 1x 2x 1x 2x 2x
Resolution 768x1024 1536x2048 1024x768 2048x1536 2048x2732 2732x2048
Filename(1) Default-Portrait.png
Default-PortraitUpsideDown.png(4)
Default-Portrait@2x.png
Default-PortraitUpsideDown@2x.png(4)
Default-Landscape.png
Default-LandscapeLeft.png(5)
Default-LandscapeRight.png(5)
Default-Landscape@2x.png
Default-LandscapeLeft@2x.png(5)
Default-LandscapeRight.png@2x(5)
n/a(7) n/a(7)
  1. The developer can optionally specify the device type (~iphone or ~ipad) after the filename, before the file's extension (e.g. Default@2x~iphone.png).
  2. This file is required to place an iPhone 5 or 5s in the full screen mode.
  3. The iPhone 6, 7 Plus acts like mini tablets and support landscape as well as portrait launch screens.
  4. The iPad supports an upside-down (the Home button on the top) version portrait launch screen.
  5. The iPad supports specifying if the Home button is on the left or right side of the screen when in the landscape mode.
  6. This file is required to inform an iPhone 6, 7 or iPhone 6, 7 Plus that an application supports it native resolution without upscaling. If not present the iPhone 5 or iPhone 4 version of the app's graphics and interface will be upscaled (zoomed in on) to fill the iPhone 6's screen.
  7. iPad Pro support requires the use of a Storyboard Launch Screen.

Based on the device type (iPhone vs iPad) and iOS version, it is possible to specify and include a launch screen for every possible device orientation. For iPhone, the developer typically only needs to supply a Default.png and Default@2x.png images (or Default-568h@2x.png and Default-667h@2x.png when targeting iPhone 5 and greater, or Default-375w-667h@2x~iphone.png and Default-414w-736h@3x~iphone.png for iPhone 6 and greater).

For iPad, the developer typically supplies Default-Portrait.png and Default-Portrait@2x.png or Default-Landscape.png and Default-Landscape@2x.png images based on the apps supported orientation. If supporting both landscape and portrait orientation, then supply at least these four images. Supporting only the default portrait and landscape orientations significantly reduces the number of images that must created, since supplying one for every orientation is typically overkill and increases the size of the app deliverable.

For more information about loading images, please see Apple's Launch Images documentation.

Managing Launch Screens

Starting with iOS 8, there are two ways that Launch Screens can be included in a Xamarin.iOS project:

  • Universal Storyboard - [Preferred] A special type of Storyboard can be added to the project and used as a universal Launch Screen that will automatically adjust to the size, orientation and resolution of the device instead of including multiple launch screen images at all supported resolutions and device orientations. This is the preferred method of handling launch screens.
  • Asset Catalog Image Sets - [Deprecated] Starting with iOS 7, a special LaunchImage image assets can be added to the Assets.xcassets file in the App's project. All version of the image required to support all resolutions or device orientations are included in the Asset Catalog and grouped together.

Migrating to Launch Screen Storyboards

When updating an existing app to use Storyboards for its Launch Screens, right click the Project Name in the Solution Explorer and select Add > New File.... Select iOS > Launch Screen and click the New button:

Next, double-click the Info.plist file in the Solution Explorer to open it for editing. Under Launch Screen, select the new Storyboard file created above.

  1. Right-click on the project name in the Solution Explorer and select Add > New File...:
  2. Enter a name for the launch screen and click the Add button:
  3. In the Solution Explorer, double-click the newly created storyboard file to open it for editing.
  4. Ensure that the Size Class is set to any:any and the View As is Generic:
  5. Assembly the launch screen from Size Classes, simple UI elements (such as UIImageView) and images that you have included in the application's bundle:
  6. Save the changes to the Storyboard.

Visual Studio does not currently support setting a Storyboard as a launch screen, this will need to be configured in Xamarin Studio. After this is set, the project can be re-opened in Visual Studio without issue.

When the app is compiled and run on any device it supports, the new launch screen should be displayed and will automatically adjust to any screen size or orientation.

ℹ️

NOTE: For a storyboard to be used as a launch screen it must include only simple, built-in UI elements and cannot do any calculations or be based off of a custom class.

Managing Launch Screens with Asset Catalogs

⚠️

NOTE: The information in this section is provided for historical reference only. Starting with iOS 9, Launch Screens should be created with Storyboards instead of including specific Image Asset Launch Screens for all of the different iOS Device types.

Starting with iOS 7, a special LaunchImage image asset can be added to the Assets.xcassets file in the app's project. All version of the image required to support all resolutions or device orientations are included in the asset and grouped together.

To manage launch screens using an Assets.xcassets, do the following:

  1. In the Solution Explorer double-click the Assets.xcassets file to open it for editing.
  2. Right-click in the Asset List and select App Icons & Launch Images > New Launch Image:
  3. Select the LaunchImage asset and the editor will be displayed:
  4. For any missing image, click on the thumbnail in the editor, select the image file for the desired launch screen from the Open File dialog box and click the OK button.
  5. Repeat this step until all needed images have been specified for the app.
  1. In the Solution Explorer double-click the Info.plist file to open it for editing.
  2. Select the Universal Icons section.
  3. From the Asset Catalog dropdown either select Use Asset Catalogs or, if a launch screen asset already exists in the project, select its name from the list:
  4. In the Solution Explorer, expand Asset Catalog and double-click the Media file to open the editor:
  5. Click on the LaunchImages section:
  6. If converting from an existing Info.plist file, any previously defined launch screen images will be filled in on the editor, else all of the thumbnails will be empty:
  7. Under the Properties Explorer select the types of Launch Images that the app will require.
  8. For any missing image, click on the thumbnail in the editor, select the image file for the desired launch screen from the Open File dialog box and click the Open button.
  9. Repeat this step until all needed images have been specified for the app.

Xamarin Workbook

If it's not already installed, install the Xamarin Workbooks app first. The workbook file should download automatically, but if it doesn't, just click to start the workbook download manually.