How to Bundle an iOS Sticker Pack with a Xamarin Forms Application

I had a client request to include an iOS Sticker Pack, or iMessage extension, with a Xamarin Forms iOS application. At first it seemed impossible, but after a lot of trial and error with the Ice Cream Builder sample project, I was able to bundle the stickers in the project. Meaning, when a user installs my iOS app, the sticker pack is installed at the same time. This blog post will explain how to bundle a simple iMessage extension with your application that displays a bunch of stickers (GIF & PNG). This blog post assumes you are using Visual Studio to develop your Xamarin iOS application.

Getting Started

Bundling an iMessage app with your main Xamarin.iOS app is actually really simple. Start by adding a new iMessage extension to your solution, as you would normally do for any other type of project (right click solution -> Add… -> New Project). If you don’t see an iMessage extension, you may not have included the necessary project types when installing Visual Studio (I think it comes with the Xamarin package, but I’m not 100% sure).

Next, once your iMessage extension project has been created, add a reference to it in your main Xamarin.iOS project. That’s all it takes for the bundling to occur. Xamarin will install any dependent iOS apps if they are referenced by your main iOS app.

Now What?

You could download the Ice Cream Builder and try to figure out how to get the extension to show your stickers, but you’re better off starting here:

https://github.com/aldrichdev/SampleXamarinStickerBundle

This is a sample Xamarin project and solution which contains the iMessage extension project that I am currently using in my Xamarin solution. The next step is to pull down this project and open it with Visual Studio. Once you’ve done that, you may be wondering how to customize the stickers which appear in the iMessage app – the next section will explain that.

Adding Your Stickers

Take a look at ArcherStickersViewController.cs, line 24. That is where you must add all of the stickers you want to show up in the app. Simply add your sticker files to the Resources folder and update the GetArcherStickers() method to reference yours instead of mine. This will make them show up in iMessage. Note, on line 106:

cell.StickerView.StartAnimating();

If your code does not have this, your sticker GIFs will not animate.

Changing Sticker Size and Orientation

To change the size of the stickers (which affects how many show up in one vertical row), and other view properties, open the MainInterface.storyboard file. On the second white screen in the storyboard, click around in there until you select a StickerView. You can change the sticker size by updating the width and height on the Layout tab. You’ll also have to update the same for the parent, the ArcherStickerCell. I don’t know much more than that, but by tinkering with the settings in the storyboard you can change how the stickers appear.

Warning: In my stickers project, whenever I opened the MainInterface.storyboard file, the designer.cs files would update. Normally this wouldn’t be a problem, but for some reason, those designer.cs file changes broke the stickers. I don’t remember how exactly, but if they give you trouble, do a git checkout -- *.designer.cs to fix it.

Presentation Styles

In my case, the client wanted both the Compact (normal sticker view) and the Expanded (“full screen” view, seen when swiping up in the normal view) modes to show the same thing. I achieved this easily by using one line of code on line 34 of PresentViewController():

 UIViewController controller = InstantiateArcherStickersController();

If you need your Expanded view to have a different layout, you’ll need to add a new controller in the storyboard and use an if statement here:

if (presentationStyle == MSMessagesAppPresentationStyle.Expanded)
{
// Set controller to show for expanded view...
}
else
{
// Set controller to show for compact view...
}

Setting the iMessage App Icon

To set up your iMessage app icon, in the solution, open Asset Catalogs -> Assets. Here you can change the various sizes of the iMessage icon. The important thing to note here is, if you open the Info.plist in the sticker project, you can’t actually set the properties needed for this to work: XSAppIconAssets and MSMessagesExtensionStoreIconName. In most cases, you would have to open the Info.plist file with a text editor and manually add these two settings; however, I’ve done that for you. Just remember, you need both of these keys in the Info.plist for your icon to show up in iMessage.

    XSAppIconAssets

    Assets.xcassets/iMessage App Icon.stickersiconset

    MSMessagesExtensionStoreIconName

    iMessage App Icon

I don’t know why the file doesn’t have fields for these two important values, but it doesn’t. What’s worse, if you make a change to this file through Visual Studio (i.e. not plain text) and save it, it can remove one or both of these values and really mess you up later on. Xamarin, come on, just add the fields please!

Completion

That pretty much wraps it up. If you’ve done everything correctly, you should be able to see your iMessage app after the iOS simulator finishes installing your main app. Simply click the Home button and open iMessage, then select or start a new conversation.

archer-stickers

Be Aware…

It doesn’t seem like debugging is possible with an iMessage extension project. I tried it, and the breakpoints are solid red, but they are never hit. I’ve seen some posts online suggesting that debug mode is not supported for this type of project. Additionally, it seems like my log statements (using Debug.WriteLine or Console.WriteLine) do not show up anywhere.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s