How do I specify a custom icon for a static UIApplicationShortcutItem in my iOS 9 App?

Question

I'm currently implementing home screen Quick Actions for my iOS 9 app using 3D Touch. I have several actions using the existing System icons from the defined UIApplicationShortcutIconType enum.

An Example:

<dict>
    <key>UIApplicationShortcutItemIconType</key>
    <string>UIApplicationShortcutIconTypeSearch</string>
    <key>UIApplicationShortcutItemTitle</key>
    <string>Search for Parking</string>
    <key>UIApplicationShortcutItemType</key>
    <string>SEARCH</string>
</dict>

However, for one of the actions I want to use a custom icon. I have tried replacing the UIApplicationShortcutItemIconType string with the name of my image asset, but that doesn't work.

It's easy enough to do for dynamic actions using UIApplicationShortcutIcon.iconWithTemplateImageName(), but this action needs to be static.

Lugar

Answer 1

Instead of using the UIApplicationShortcutItemIconType key, replace it with the UIApplicationShortcutItemIconFile key and then supply the name of your image file or ImageAsset.

Like this:

<dict>
    <key>UIApplicationShortcutItemIconFile</key>
    <string>MyCustomImageName</string>
</dict>

The rest of the keys can stay as they were.

Lugar

I haven't been able to get this to work. Do you have an example of a working image? Does the image need to be of a particular size? What file name <string> are you using? – Elevon

From developer.apple.com/library/ios/documentation/General/Reference/… "Icons should be square, single color, and 35x35 points, as shown in these template files and as described in iOS Human Interface Guidelines." – Lugar

Note that 70x70 works as well and looks much better on Retina displays. – Gilletta

Eddy, notice I said points and not pixels. So that corresponds to a 35px by 35px 1x image, a 70px by 70px 2x image for retina, and a 105px by 105px 3x image for the 6+. – Lugar

@ChrisAllwein I downloaded pattern of images and there are different sizes. The first size 70px by 70px and the second size 104px by 104px. Is it mistake that 104 by 104? – Conn

Custom icons are viewing but only in black color. while icons are in blue color. What's wrong with me? – Abott

Answer 2

Use UIApplicationShortcutItemIconFile as a key and the name of your image file (with or without file extension) as the string. For example: using an image named "lightning.png" you would add the following to Info.plist...

<key>UIApplicationShortcutItems</key>
<array>
    <dict>
        <key>UIApplicationShortcutItemIconFile</key>
        <string>lightning</string>
        <key>UIApplicationShortcutItemTitle</key>
        <string>Search for Parking</string>
        <key>UIApplicationShortcutItemType</key>
        <string>SEARCH</string>
    </dict>
</array>

The image can be stored either in your project tree or in Assets.xcassets. If you store the image in Assets.xcassets, use the Image Set name if you name the set something different from your file name.

Your image file needs to be a PNG (if you want transparency), square, single color, and 35x35 pixels. Multi-color images essentially get a black overlay.

Here's a test image that meets the above criteria:

Just save this image as "lightning.png", drag it into your project tree, and use the code above in your Info.plist file.

For those not comfortable editing the Info.plist as source code, here's how the above should look if you do it natively in the Property List:

To attach these shortcuts to code, you do so in the AppDelegate.swift. Add the following:

func application(application: UIApplication, performActionForShortcutItem shortcutItem: UIApplicationShortcutItem, completionHandler: (Bool) -> Void) {

    if shortcutItem.type == "SEARCH" {
        print("Shortcut item tapped: SEARCH")
        // go to SEARCH view controller
    }

}

It's worth noting that the convention for UIApplicationShortcutItemType is not all caps (e.g. "SEARCH"), but rather using your bundle identifier as a pre-fix:

com.myapps.shortcut-demo.search

Bridges

Actually the right size is 104 × 104 for @3x and 70 x 70 for @2x images . – Amundson

The right size is 35pt = 105 x 105 @3x and 70 x 70 @2x – Mise