Material Design on iOS

Resources from my SyncMobile presentation at Odecee on 15/2/2016.

Introduction to Material Design
UI components
Meaningful motion

New Year's Eve Truffles

Disco truffles

Disco truffles

According to Google and Pinterest, New Year's Eve baking means gold and glitter, and preferably both. So when I found this recipe for disco truffles, I couldn't resist. Disco truffles are brownie truffles with a chocolate ganache centre, dipped in milk chocolate and decorated with a sprinkling of disco glitter. They are very rich and chocolatey, and perfect for a New Year's Eve party treat!

Disco truffles

These truffles were quite easy to make, but you will need the better part of a day (each component needs time to set in the fridge before moving onto the next step). I adjusted the recipe slightly by cooking my own brownies and omitting the corn syrup and chocolate frosting. Next time, I probably wont bother with the ganache centre either, it was very rich and I think I preferred the brownie truffles without it.

My favourite brownie recipe is this one from Jamie Oliver. When I cook these brownies, I like to add a jar of pitted cherries instead of the chopped nuts. I also pour in some of the cherry juice from the jar (with a little less sugar and some extra flour to get the right sweetness and consistency). The juice adds a nice flavour and sweetness to the brownies, while also toning down the intensity of the chocolate just a bit. (Don't worry, they're still VERY chocolatey.)

Disco truffles

It's important not to overcook the brownie. A little gooey is good, and it'll firm up when it cools down. This brownie recipe is quite moist (especially with the cherries), so I didn't need to make the chocolate frosting to mix with the crumbled brownie like the recipe suggests. I was able to form it into balls quite easily on its own.

Tip: Make these truffles a day or two in advance. The flavours were even better a couple of days later!

Note: As mentioned in the recipe, disco glitter can be found at many cake supply stores or online. It is non-toxic, but not always edible. Use it sparingly, and look for a glitter that is clearly labeled as edible. (Some glitters are only designed to be used on cake decorations that are removed before eating.)

Mocha truffles

Mocha truffles

And because I was now in a truffle-making mood, I decided to whip up some mocha truffles too. This recipe from Coles was very quick and easy, and yummy!

The ganache filling was simply white chocolate, cream and coffee. Roll it into balls, coat in melted chocolate, top with a coffee bean and you're done!

Mocha truffles

A couple of minor adjustments to the recipe (I can't help myself):

  • I found I needed more white chocolate than the recipe calls for. After a few hours in the fridge the ganache still wasn't stiff enough to form into balls. I melted it down again and added extra chocolate, and this time it was much better.
  • Some of the coffee granules didn't melt down completely so I ran the mixture through a sieve before refrigerating to get a nice smooth ganache.

Tip: Wait for the melted chocolate to cool down for a couple of minutes before coating the ganache balls. When the chocolate's too hot it can crack when it sets.

Auto Layout Tip #1: Multiplier

An Auto Layout constraint can be described in the form of a linear equation. For example, for an equality constraint:

FirstItem.Attribute1 = (SecondItem.Attribute2 * Multiplier) + Constant

Apple's Auto Layout documentation explains this concept in more detail. In this post we're going to focus on what is perhaps the most commonly misunderstood part of this equation, the multiplier.

Equal Widths constraint

I came across an interesting Auto Layout problem recently where I wanted to resize a button relative to the size of an image view above it.

My requirements were:

  • The button should fit its content without compression.
  • There should always be at least 20 points between the button and the left and right edges of screen.
  • The button should size itself to be slightly wider than the width of the image view above it (10% wider to be exact) if it has more horizontal space than it needs.

So, on wide screens the button will be 1.1 times the width of the image view. On narrow screens the width of the button will increase to fit its content, but only until it reaches 20 points from the edge of the screen (shown by the red guides in the below screenshot). At this point the button will be forced to start compressing its content.

Preview of button layout

The solution
  • Give the button a high horizontal content compression resistance priority (e.g. 900) and low content hugging priority (e.g. 100).
  • Add >= 20 constraints to the left and right edges of the button (priority 1000).
  • Add an Equal Widths constraint between the button and the image view with a multiplier of 1.1 (priority 950, constant 0). Edit the constraint and change the relation to Greater Than or Equal.

Remembering our equation from earlier, the last constraint can be expressed as follows:

button.width >= (imageview.width * 1.1) + 0

Button Greater Than or Equal constraint with multiplier

A common mistake

Often when you have a constraint with a multiplier, the constant is 0 (as it is here), but it doesn't have to be. If you're using a constant together with a multiplier, just remember the multiplier is applied to the attribute first and then the constant is added to the result. A mistake I sometimes come across is a constraint that is unintentionally offset with a constant of 1. For multipliers the default is 1, but for constants the default value is 0 (which makes sense when you think of a constraint in terms of a linear equation).

Aspect Ratio constraint

Multipliers can be decimals like 1.1 in the previous example, but they can also be ratios. The image view in that example has an Aspect Ratio constraint with a multiplier of 240:221. Regardless of what size the image is displayed on screen, this constraint makes sure the aspect ratio stays the same.

Aspect ratio constraint with ratio multiplier

Further reading

If you'd like to learn more about multipliers and test your Auto Layout skills, have a go at my recent Auto Layout Workshop.

8-Bit Brownies

When Adam asked for Second Quest for his birthday, that set the theme for the cake. My first idea was to decorate a cheesecake with an 8-bit Link made out of m&ms. Then I did the maths and realised that even with m&m minis, I just couldn't make a cheesecake that big. Then I remembered how much Adam likes the chocolate and cherry brownies I make occasionally, and that gave me an idea... brownie pixels!

Five trays of brownies in four flavours, and exactly 300 pixels later, brownie Link came to life.

8-bit link in brownies

For the design, I used an image of Link I found on Pinterest.

This was definitely one of my crazier cake ideas. I'm not sure I'll attempt brownie pixel art again in the near future, but it was a fun experiment! Adam's colleagues made short work of the leftover pixels at work the next day.

Brownie recipes:

And just in case the brownies turned out horribly, I also made a milo frozen cheesecake with some crushed Maltesers on top for dessert. This recipe is really quick and easy, and yummy! Just make sure you take it out of the freezer to soften for 15-20 minutes before serving.

milo cheesecake