2016-10-09



alvinashcraft
shared this story
from Xamarin Help.

A splash screen is an image or page that shows when you first load your app, while the application is initializing. The splash screen will stay visible until the first page of the app is ready to display. Xamarin Forms does not have any functionality to add a splash screen, you must do this per platform.

UWP

UWP uses an image to display as a splash screen. You can place this image by going to

Project > Package.appxmanifest > Visual Assets > Splashscreen

There is a major difference between WinRT apps and UWP apps with the splashscreen. WinRT had you place a full portrait image as the splashscreen, UWP accepts a landscape image but it will never take up the full screen. Since most apps start in Portrait you will never get the image full screen.

UWP wants you to display your logo in the center of the screen and have a plain colored background. To accomplish this, create an image in the sizes specified with the logo in the center and a solid background color of your choice. Then set the Background Color option on the screen to the same solid background color as per the example below.



This will result in a splash screen as shown.

In UWP if you want a completely customizable splash screen, where you can create a full screen image, you will have to create an extended splash screen.

Android

A splash screen in Android is more complex as it requires you to create a new Activity. If you are new to Xamarin.Android, an Activity is a single UI that the user can normally interact with. Xamarin Forms uses the MainActivity to load the application, we need to create another Activity. This example assumes you are using AppCompat, which is recommended for all new Android applications.

Place your fullscreen images (e.g. splashscreen.png) in the appropriate drawable folder. Each drawable folder will associate with the following sizes

MDPI is 320×480 dp = 320x480px (The Default x1)

LDPI is 0.75 x MDPI = 240x360px

HDPI is 1.5 x MDPI = 480x720px

XHDPI is 2 x MDPI = 640x960px

XXHDPI is 3 x MDPI = 960x1440px

XXXHDPI is 4 x MDPI = 1280x1920px

Create a new style that references this new image. Place this in Resources > values > styles.xml (Build Action: Android Resource)

Create a new class SplashActivity.cs

Go to MainActivity.cs and change MainLauncher = true to MainLauncher = false

iOS

iOS uses an image to display a splash screen depending on which screen size the application is running on.

Create a splash screen image in the following sizes.

320×480

640×960

640×1136

Go to Properties > iOS Application > iPhone Launch Images and import the images. It will automatically add them to the Resources folder in your iOS Project.

Move down the properties page to add image for iPad apps.

The post Creating A Splash Screen In Xamarin Forms appeared first on Xamarin Help.

Show more