UserInterfaceLevel, the future of floating apps?

iOS 13 brings new dynamism to your apps.

Raul Riera
Jun 6 · 2 min read
Image for post
Image for post
Photo by Przemyslaw Marczynski on Unsplash

Last year at Shopify we started developing the All-new Point of Sale. There was a small problem, given that all screens are presented full screen to the user we needed the ability to distinguish a modal screen versus the rest. iOS 13 had a great answer for this.

It feels like every new iOS version adds something to UITraitCollection or UIUserActivity. iOS 13 was no different, there was a small but powerful addition to UITraitCollection which comes handy when developing your universal apps. Specially if your app is presented as a floating window, that addition was userInterfaceLevel¹.

What is UserInterfaceLevel?

Apple describes it as the visual level for content in a window. The possible values are base, elevated, and unspecified. The first one being the window’s main content and the last one anything above it*. This will be the perfect match for our need of modal windows having a dedicated background colour.

Using it to meet our requirement

Image for post
AdaptiveColor source code

The previous snippet is how Shopify’s Point of Sale application is handling dynamic colours. You should focus on line #24, we detect the current elevation of the user interface and decide which of the two colour sets to use for this particular colour.

Now, let’s say we want to change the background colour of a view all we need to do is:

Image for post
Example usage of AdaptiveColor

And thanks to the excellent UIAppearance² we can style our UINavigationController similarly how we styled the background view, and all our screens will be displayed with the correct colour.

Putting everything together into a project, it looks something like this:

Image for post
Changes in the background colour reacting to presentation levels

Further reading

That is all!, as always you can find the full source code on GitHub


Dev Genius

Coding, Tutorials, News, UX, UI and much more related to development

Sign up for Best Stories

By Dev Genius

The best stories sent monthly to your email. Take a look

Create a free Medium account to get Best Stories in your inbox.

 by the author.

Raul Riera

Written by

Builder, iOS Software Engineer. I fought in the great Storyboards vs Code War. More at http://raulriera.com

Dev Genius

Coding, Tutorials, News, UX, UI and much more related to development

Raul Riera

Written by

Builder, iOS Software Engineer. I fought in the great Storyboards vs Code War. More at http://raulriera.com

Dev Genius

Coding, Tutorials, News, UX, UI and much more related to development

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store