App DevelopmentProduct Design

Fancy Vibrant Text and Icons with UIVisualEffectViews

vibrant-text-and-icons blog-featured-image cc-510x296

On a recent project, a designer gave us specs to create icons that have the appearance of Photoshop’s Blend Mode Overlay. For the uninitiated, this is where colors in underlying layers are picked up and blended together with the layer with the blend mode. At first, I tried lowering the alpha on the assets provided, but it didn’t provide the intended effect. So I started experimenting with UIVisualEffectViews. I discovered the answer in the form of a single UIVisualEffectView, with both a blur effect (set to .Dark) and vibrancy effect associated with it.

UILabel Result:

blog-post-image-01 fancy-vibrant-text cc

PNG asset and UILabel result:

blog-post-image-02 fancy-vibrant-text cc

Interface Builder setup:

blog-post-image-03 fancy-vibrant-text cc blog-post-image-04 fancy-vibrant-text cc

I was somewhat surprised by this. Every example of vibrancy I’ve seen has been accompanied by a corresponding separate UIVisualEffectView that includes a UIBlurEffect. Even in Interface Builder, there is an option for Visual Effect with Blur only, and Visual Effect with Blur and Vibrancy. The latter is indeed two nested UIVisualEffectViews, which should be set up the same with the exception that one has an associated UIVibrancyEffect associated with it. And indeed, there are some unexpected outcomes when using just a single UIVisualEffectView with both a blur and vibrancy effect.

The first unexpected outcome is that when the associated blur effect style is set to .Light you get a dark result. Correspondingly, when you set the style to .Dark you get a lighter result. And lastly, if you have text embedded within your UIVisualEffectView, the text color will be overwritten by the style of blur you have chosen.

UILabel using .Light

blog-post-image-05 fancy-vibrant-text cc

PNG asset using .Light

blog-post-image-06 fancy-vibrant-text cc An additional side effect of using this method is that only the item you embed in the UIVisualEffectView is affected by the vibrancy effect. For instance, if your UIVisualEffectView is constrained to the edges of a table view cell and you add a label to it, only the label will show up with the vibrancy effect.

There are some limitations to this technique, however. The UIVisualEffectView will only pick up on colors of the view directly beneath it. So if you have a background image and then a separate blur view on top, the vibrancy effect will not appear (since the direct underlying view is effectively blank). If you insert the background image into the content view of the blur view, though, the vibrancy effect will again be picked up.

If you are using assets for your icons they should be white, as dark icons do not appear to show up.

Interface builder:

blog-post-image-07 fancy-vibrant-text cc

Result:

blog-post-image-08 fancy-vibrant-text cc Also, the preview assistant and simulators have proven unreliable at displaying the effect accurately. You should test this effect out on an actual device, preferably one with a retina display for maximum fancy level.

I have included a couple of backgrounds with the project, but you can feel free to add your own and experiment. Just change the image used for the UIImageView named background. The effect on icons moving in table views and collection views is really quite beautiful.

In the end, screenshots can only convey so much. Download the project here and play with it yourself.

Quickstart-Guide-to-Kotlin-Multiplatform

A Quick Start Guide to Kotlin Multiplatform

Kotlin Multiplatform, though still experimental, is a great up-and-coming solution...

Read the article