Creating a Sticker Pack for iOS 10

 

Sticker pack on iOS 10

Apple is at it again. Just like what they did to Spotify with Apple Music or online courses with iTunes U, they’re trying to wipe yet another company off the map. This time they’re gunning for messaging apps. So look out Facebook Messenger: iMessage is on the way.

Well maybe that’s an exaggeration, and it’s certainly not a bad thing – most countries still embrace capitalism, after all. But it’s quite an ambitious move on Apple’s part. Extending the App Store to iMessage creates a host of new opportunities for app developers and graphic designers alike. Other messaging platforms that don’t allow developers to make their own stickers will need to catch up.

The best part (or possibly the worst), is that it doesn’t require any coding to create your own sticker pack for iMessage. This post will show you just how simple it is.

As always, start by creating a new Xcode project. Under iOS, select “Sticker Pack Application”. Although iMessage is also available on Mac, it appears as though Apple decided to not to support stickers yet, so you’ll need to make it for iOS. You can obviously call it whatever you want, but for this example, I thought I’d assemble a pack of Godzilla characters.

After that, you should be presented with a blank project and a single asset catalog called Stickers.xcstickers. This contains a folder called “Sticker Pack” and a screen to add the pack’s icon. And just as we’d expect, we need to provide tons of different icon sizes.

Back to the stickers, adding them is fairly straightforward. I first did an image search for “Godzilla icon” and grabbed a few images. In real life, you’d need to make your own images, but this tutorial is merely for demonstrational purposes and will not be submitted to Apple. To test it out, here’s one of the icons I used.

http://cdn1-www.craveonline.com/assets/uploads/2013/06/Godzilla-icon.jpg

Then just like with any other image, we drag it from Finder and drop it into the assets file. There’s not much else to it, though you can customize the size if you want, or add an accessibility title.

As for the app icon, it’s just like the icon for any normal app, except that the image dimensions are different. A site like makeappicon.com can help speed up this process and resize the images for you. I used this image when creating the icon.

Once that’s done, you can just build and run the project. The simulator will launch straight into iMessage and you’ll be able to select the sticker pack from the icon that looks like an App Store logo.

Thankfully. sticker packs don’t leave a separate icon on the home screen. If you want to delete one, you can use the same tap and hold procedure on the menu for selecting a sticker pack. If you have an existing app and want to create a sticker for its logo (not that anyone would use it), you can add one directly into an existing Xcode project. Just go to File > New > Target to add a sticker pack extension. Or they can stand on their own like in this example.

Perhaps it won’t put Facebook Messenger out of business, but an Apple-sanctioned sticker marketplace is sure to have interesting implications. Some sticker packs even weigh in on the U.S. presidential race.

Xcode 8 And First Impressions

For the first time in a while, when I woke up this morning, I raced down the stairs like a kid on Christmas. Unfortunately, there was no tree with presents. Santa Claus didn’t come early, but the next best thing did. Yesterday, Apple officially unveiled Xcode 8 and all the goodies that go with it.

Technically, Xcode 8 has been available in beta for a while now, but if you’ve refrained from spoilers and are waiting for the official release, then you’re in luck. I wouldn’t even mind if you stopped reading this article to upgrade right this second. You can always finish reading while the update downloads (and the anticipation increases).

I haven’t gotten much time to use it in a practical setting, but I did get the chance to play around with it this morning. Here are some of my first impressions.

Right from the start, there are some much needed improvements. The workflow for creating a new project has been redesigned. Tabs for platforms have been moved to the top of the screen and the entire list of project templates for each platform is now scrollable. There are also options for those new, fancy iMessage extensions and sticker packs.

And one of the tabs is called “Cross Platform”, something you don’t hear very often from Apple. I’m assuming they mean games that run on both iOS and Mac OS, not non-Apple ecosystems.

On the next screen of the setup wizard, there’s a new option to select a development team. It’s not relevant for everyone but could be a handy feature for freelancers, working for many different clients.

Once the editor opens up, there are a variety of new features. If you’re familiar with other IDEs like Visual Studio or IntelliJ, you’ll be pleased to know that the line containing the cursor is now highlighted. On numerous occasions, I’ve lost track of the cursor, but now you’ll never again forget where you were typing.

Onto the storyboard, there are a lot of changes to get excited about. There’s the much-hyped feature where the storyboard can be edited at any zoom level, which is great if you’re like most people who don’t have the 5K iMac. And gone are the days of abstract layout buckets like “Any” and “Compact”. You can now preview layouts and create alternate designs for specific device types. That leaves little excuse to only support phones or a certain device orientation. Creating alternate layouts is now a much more straightforward process.

Other than that, Xcode 8 should work just like Xcode 7. There is of course, Swift 3 and a host of new APis for iOS 10. The simulator even has an iMessage app, and John Appleseed actually responds! Welcome to the future.

I’m not saying Xcode 8 is groundbreaking (oh wait, Apple made it, so it is), but it’s definitely a step in the right direction. In particular, I spent a lot of time harping about the feature that highlights the line containing the cursor. It’s not that this is overly important, but it shows that Apple is taking cues from other IDEs to continually improve Xcode. Maybe Xcode 9 will continue this trend with more Source Control options or refactoring for Swift?

For now, Xcode 8 is certainly something to be excited about. In the coming days, more articles on Swift 3 and the new SDKs will be released so make sure to slap that share, follow, and like button. AdiOS amigos!

Android Compound View Tutorial: Building a Comment Box

Custom controls are great, but sometimes you just need to reuse groupings of views. For these scenarios, the Android framework supports compound views. Like a typical custom view, compound views are allow for functionality that is not possible with just the framework's standalone views. Instead of subclassing a view, these inherit from View Groups allowing you to reuse combinations of controls, while keeping any UI logic in its own subclass.

When completing the Popular Movies app, I needed a reusable way to display trailer thumbnails and reviews, but didn't need to develop a custom view. In both cases, a compound view was suitable. Using what I learned from making the view for movie reviews, I'll explain how to make a simple compound view for another common scenario: an expandable view that displays comments.

A sample project with the completed comment view will be linked at the end of the article. For now, let's take a look at each of the components.

We start by creating a new layout file. For a comment box, there are 2 components we need: a single-line text view to display the username and a multi-line text view to display the text. Because some comments are long, we're only going to show a preview at first. The view will contain an expand button to view the entire comment.

The layout is straightforward: just a vertical linear layout with three views.

Since the point of a compound view is to make it reusable in code, we also need to create an accompanying Java class. We'll call this CommentView and make it a subclass of LinearLayout. We then add the three default initializers. In all my projects, I use ButterKnife to avoid excessive findViewById() calls, but if you're doing it without, you can assign the views in the setupViews() method instead.

At this point, the view should be working and we can populate it's data through code. However, there's no way to restrict the number of lines, and the "show more" button doesn't do anything. There's more work to be done.

The expand button's visibility is dependent on the amount of text in the comment view. Consequently, we need to create a separate setter to monitor when text changes. There's an issue with TextView's getLineCount() where it only works properly once the view has been rendered. To work around this, we post a new Runnable to check the line count each time the text is changed, as suggested in this StackOverflow answer. This occurs each time the text is assigned, making it necessary to define a custom setter.

Now that we know when the "expand" button should be displayed, it's time to actually implement it. To do this we add a new property to the class to hold the value of "expanded". This value is used to either expand or collapse the view in the OnClick handler.

The view should now be working. In the sample project, I've added it to the screen in onCreate(). We're almost done, but we still need to handle state restoration when the device is rotated. In order for onSaveInstanceState() and onRestoreInstanceState() to be called, each instance of CommentView must have a unique ID. Because they'll be dynamically added, I called setId() after initialization, with a custom int value. Saving and restoring the instance is a little tricky, but I got it to work using the approach in this discussion. The following is added as an inner class of CompoundView.

Finally, we just implement the methods for saving and restoring the instance state, making sure to pass the value of "expanded" into the Parcel.

And we're done. The compound view can now be used in our code and it properly restores its instance state when the screen orientation changes. The sample project shows it in action and can be downloaded here.

Our comment view in action.

To make this more like the view I used in Popular Movies to display reviews, the expand button can be changed to an ImageButton with its background property set to @null. I got the chevron icons from Icons8.

That's it for setting up the comment box. If you enjoyed this post or want similar tutorials in the future, feel free to leave a comment (pun intended) below. Until next time, happy coding!