Xamarin Forms App Icons Splash Screens And Permissions Complete Guide

Step 1: Setting Up App Icons

Objective: To create and place app icons for both Android and iOS devices.

iOS

1. Create and Prepare Icons:

   • Use an asset creation tool like Photoshop or any online converter to create icon images that match iOS specifications.
   • Save icon images in these formats:
     • AppIcon60x60@2x.png (120x120px)
     • AppIcon60x60@3x.png (180x180px)
     • AppIcon76x76@1x.png (76x76px)
     • AppIcon76x76@2x.png (152x152px)
     • AppIcon83.5x83.5@2x.png (167x167px)

2. Create Asset Catalog:

   • In the iOS project, right-click on the Project in the Solution Explorer and select "Add" -> "New Folder" and name it "Assets.xcassets".
   • Inside "Assets.xcassets", right-click and select "App Icon" -> "New App Icon".

3. Add Icons to Asset Catalog:

   • Select the new App Icon and replace the default images with your prepared icon images by dragging and dropping or by clicking "Choose" and selecting the image files.

Android

1. Create and Prepare Icons:

   • Use an asset creation tool like Photoshop or any online converter to create icon images that match Android specifications.
   • Save icon images in these sizes:
     • mdpi.png (48x48px)
     • hdpi.png (72x72px)
     • xhdpi.png (96x96px)
     • xxhdpi.png (144x144px)
     • xxxhdpi.png (192x192px)

2. Add Icons to Resource Folder:

   • Add the created icons to the corresponding drawable folders in the Android project:
     • Resources/drawable-mdpi
     • Resources/drawable-hdpi
     • Resources/drawable-xhdpi
     • Resources/drawable-xxhdpi
     • Resources/drawable-xxxhdpi

3. Set Default Icon:

   • Open the AndroidManifest.xml file and set the default icon under the <application> tag:

     <application android:label="YourAppName" android:icon="@drawable/mdpi">
     

Step 2: Setting Up Splash Screens

Objective: To set up splash screens for both Android and iOS devices.

iOS

1. Create and Prepare Launch Images:

   • Use an asset creation tool like Photoshop or any online converter to create launch images that match iOS specifications.
   • Save launch images in these formats:
     • LaunchImage@2x~iPad.png (768x1024px)
     • LaunchImage@2x~iPad - Landscape.png (1024x768px)
     • LaunchImage@3x~iPad - Portrait.png (1242x2208px)
     • LaunchImage@3x~iPad - Landscape.png (2208x1242px)
     • LaunchImage@2x~iPhone.png (640x1136px)
     • LaunchImage@3x~iPhone - Portrait.png (1125x2436px)
     • LaunchImage@3x~iPhone - Landscape.png (2436x1125px)
     • LaunchImage@2x~iPhone - portrait~compscreen.png (1334x750px)
     • LaunchImage@3x~iPhone - portrait~compscreen.png (2688x1242px)
     • LaunchImage@3x~iPhone - landscape~compscreen.png (1242x2688px)

2. Create Asset Catalog:

   • Similar to setting up icons, create an Asset Catalog (if not already created) in the iOS project.
   • Right-click on the "Assets.xcassets" and select "New File" -> "Launch Image".

3. Add Images to Launch Screen:

   • Select the new Launch Image and replace the default images with your prepared launch images.

Android

1. Create and Prepare Splash Screen Image:

   • Create a splash screen image that covers the entire screen and save it as a PNG file (e.g., splash_screen.png).

2. Create a New Layout for Splash Screen:

   • Add a new layout file splash_layout.xml in the Resources/layout folder:

     <?xml version="1.0" encoding="utf-8"?>
     <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         android:background="@android:color/black">
     
         <ImageView
             android:src="@drawable/splash_screen"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:layout_centerInParent="true"/>
     </RelativeLayout>
     

3. Create a Splash Screen Activity:

   • Add a new Android Activity called SplashActivity.cs:

     using Android.App;
     using Android.Content;
     using Android.OS;
     
     [Activity(Theme = "@style/Theme.Splash", MainLauncher = true, NoHistory = true)]
     public class SplashActivity : Activity
     {
         protected override void OnCreate(Bundle savedInstanceState)
         {
             base.OnCreate(savedInstanceState);
     
             // Start your main activity here
             StartActivity(typeof(MainActivity));
         }
     }
     

     • Add the SplashActivity to the AndroidManifest.xml file under the <application> tag:

       <activity android:name=".SplashActivity" android:theme="@style/Theme.Splash" android:label="@string/app_name" android:screenOrientation="portrait" />
       

     • Define the theme for the splash screen in Resources/values/styles.xml:

       <style name="Theme.Splash" parent="Theme.AppCompat.Light.NoActionBar">
           <item name="android:windowBackground">@drawable/splash_screen</item>
           <item name="android:windowNoTitle">true</item>
       </style>
       

Step 3: Setting Up Permissions

Objective: To request necessary permissions at runtime and declare them in the manifests for both Android and iOS.

Android

1. Declare Permissions in AndroidManifest.xml:

   • Add permission tags inside the <manifest> tag:

     <uses-permission android:name="android.permission.INTERNET"/>
     <uses-permission android:name="android.permission.CAMERA"/>
     <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
     

2. Request Permissions at Runtime:

   • Use the Permissions.RequestAsync method from the Xamarin.Essentials library to request permissions at runtime:

     using Xamarin.Essentials;
     
     try
     {
         var status = await Permissions.RequestAsync<Permissions.Camera>();
     
         if (status != PermissionStatus.Granted)
         {
             // Permission denied, Handle accordingly.
         }
     }
     catch (FeatureNotSupportedException fnsEx)
     {
         // Feature not supported on device.
     }
     catch (Exception ex)
     {
         // Unexpected exception has occurred.
     }
     

iOS

1. Declare Permissions in Info.plist:

   • To request permissions, you need to add keys and usage descriptions in the Info.plist file:

     <key>NSCameraUsageDescription</key>
     <string>This app requires access to the camera.</string>
     <key>NSPhotoLibraryUsageDescription</key>
     <string>This app requires access to your photo library.</string>
     <key>NSLocationWhenInUseUsageDescription</key>
     <string>This app requires access to your location.</string>
     

2. Request Permissions:

   • iOS handles permission requests automatically when the app tries to access the protected resource for the first time.

Additional Tips

• Consistency: Ensure that the icons and splash screens are consistent with the app’s overall design aesthetic.
• Testing: Test the app on different devices to confirm that icons and splash screens appear correctly.
• Permissions: Make sure to handle permission requests gracefully and explain why the app needs them.