Skip to content

Latest commit

 

History

History
102 lines (72 loc) · 3.94 KB

icons.md

File metadata and controls

102 lines (72 loc) · 3.94 KB
Raw
title description ms.service ms.assetid ms.subservice author ms.author ms.date no-loc
Working with watchOS Icons in Xamarin
This document describes the various icons necessary for a watchOS application and how to set up a solution to include these icons.
xamarin
EE3D45BD-8091-4C04-BA83-371371D8BEB9
xamarin-ios
davidortinau
daortin
07/26/2018
Objective-C

Working with watchOS Icons in Xamarin

Apple Watch solutions require two sets of icons:

  • The iOS app icons that will appear on the iPhone.
  • Apple Watch icons that will be rendered in a circle on the watch menu and in notification screens. The watch app icon also appears in the Apple Watch iOS app.

Apple Watch Icons

Icon Description Appearance
iOS App Icon Appears on the iPhone and starts the Parent app iOS app icon
Watch App Icon Appears on the Apple Watch home screen watchOS app icon
Appears on Watch notifications watchOS notification icon
Appears in the iOS Apple Watch App iOS Watch App icon

Configuring Your Solution

To ensure your iOS app and watch app both show the correct name and icon, follow these instructions for each project:

iOS App

Refer to the iOS Application Icons guide to ensure your iOS app's icons are correctly configured.

Info.plist

The string that appears next to your watch app in the Apple Watch settings app is configured in the iOS app's Info.plist.

Confirm that your Info.plist has a CFBundleName key and value (note: this is different to the CFBundleDisplayName, you can have both):

<key>CFBundleName</key>
<string>Your App Name</string>

Apple Watch App

Once your Parent app has its icons configured, you need to add an application icon asset catalog to the watch app.

  1. Right-click on the Watch App Project and select File > Add > New File... > iOS > Asset Catalog to add an asset catalog to the project.

    Add an asset catalog to the project

  2. Double-click on the AppIcon.appiconset/Contents.json file

    The AppIcon contents

  3. Add all the watchOS images, as shown in this screenshot:

    Add all the watchOS images, as shown in this screenshot

    Refer to Apple's icon guidelines for the required sizes (the dimensions are also shown on the screen). Remember that these icons will be automatically clipped to render in a circle.

    Your icon list should look something like this:

    The icon list in the Solution Explorer

  4. To ensure the asset catalog is included in the app, add the following key and value to the Watch App's Info.plist:

    <key>XSAppIconAssets</key>
<string>Images.xcassets/AppIcon.appiconset</string>

You can verify the icons are configured correct by checking the Apple Watch settings app in the iPhone Simulator, or generating a notification and confirming the icon appears on the notification screen.

Note

Icons cannot have an alpha channel (the app will be rejected during App Store submission if an alpha channel is present). You can check if an alpha channel exists and remove it using the Preview app on Mac OS X.

Related Links