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

Baby Bouquets

I seem to be at the stage in my life now where a lot of my friends are having babies. For the first baby shower I was invited to, I had no idea what to give the mum-to-be. I think I ended up buying a jumpsuit or something similarly uninspired. When my second baby shower invitation arrived, I knew I could do better. I turned to the internet and found this Martha Stewart video on how to make a baby bouquet. Now my favourite part of a baby shower is creating the gift!

Kim's baby bouquet

I recently made this bouquet (above) for my friend Kim. It contained:

  • 3 hats
  • 1 bib
  • 4 pairs of socks
  • 2 face washers
  • 3 singlets
  • 2 jumpsuits
  • 1 baby blanket
  • baby wipes
  • baby shampoo
  • baby powder

To assemble the bouquet, I used:

  • 1 box, approximately 22cm round
  • tissue paper
  • fake flowers (large and small), fake leaves
  • green florist tape (1-2 rolls)
  • green florist wire (1 packet)

A nice idea is to list the contents of the gift on the inside of the card so the parents-to-be don't need to take apart the bouquet straight away to know what's inside. At one baby shower I went to, we played a game of bingo where we had to guess the gifts that were given, so having a list was perfect for that too!

Lyndal's baby bouquet

Making the flowers

For the flowers, I use a range of items including jumpsuits/onesies (without sleeves is best), singlets, face washers, bibs, socks and hats. I aim for at least 15 items for a nice full bouquet (a pair of socks is one item). A mix of different-sized flowers works best. A pair of socks makes a pretty little bud, while a jumpsuit or face washer makes a larger flower. I also buy some fake flowers and leaves to fill in any gaps and make it look more like a bouquet.

To make the flowers:

  1. Fold and tightly roll up an item of clothing to form a flower. To learn how to fold the different-sized items, I watched this Martha Stewart video on YouTube.
  2. Insert a piece of florist wire into the base. I usually loop over the end of the wire so it slides in smoothly and doesn't catch on the clothing.
  3. Wrap the base of the flower tightly with green florist tape, starting near the top and working your way down to the wire stem.
  4. Continue the same process with each of the items of clothing until you have a collection of individual buds.
  5. Take the small fake flowers and about half of the leaves (putting some leaves aside to use when assembling the bouquet) and secure them to your flowers with florist tape. This can be done a bit randomly, and not every flower needs a leaf and a bud attached to it. I found this post on a craft forum that shows what your flowers should look like at this point.
  6. Group your flowers into bunches of 2 or 3 by twisting the wire stems together.

Ashlee's baby bouquet

Assembling the bouquet
  1. Line the empty gift box with a baby blanket. You could alternatively use a small basket, bucket or wooden box.
  2. Fill the bottom with some baby products wrapped in tissue paper (e.g. baby wipes, baby shampoo, baby powder). This helps weigh down the bouquet so it's not too top heavy, it fills the empty space to make the flowers sit up nice and tall, and is a nice little surprise when the bouquet is taken apart.
  3. Arrange the bunches of flowers in the box, bending over the stems where needed to form a nice shape.
  4. Insert the large fake flowers and remaining leaves throughout the bouquet to fill in any gaps.
  5. Add a ribbon or bow around the box to decorate, if desired.
  6. You're done! Don't forget to write a list of the bouquet's contents on the card for the receiver of the gift.