I was scouring the internet to try and find a way to re-create the Now Playing bar from the Apple Music app. It fits just above the Tab Bar and has a nice, matching translucence:

Apple Music App

I came across this post that led me to a way to solve for this in SwiftUI. Really the magic comes down to using a UIViewRepresentable and a UIVisualEffect , where the effect is of type UIBlurEffect , with a style of .systemThinMaterial .

There is also a .systemUltraThinMaterial , but that’s used for different UI components.

Building the thing

All the code and images I use are available on Github.

Song List

First we need a list with random, made-up songs. So let’s make a new SwiftUI file called SongListView :

SongListView.swift

Now, we update our ContentView to show this song list:

It should look like an ordinary list of fake songs:

The Tab Icons

Let’s create a view for our Tab Icons. This will just serve as a placeholder and therefore isn’t interactive, nor good design for a real TabView, but it serves our purpose…

This would give us the following Preview:

TabIconsView.swift

The Now Playing Bar

The “Now Playing” Bar that will appear above the Tab Icons is also pretty simple:

Gives us the following Preview (says “Not Playing”, because nothing is currently playing):

NowPlayingView.swift

Finally, the Blur

Instead of extending a View, we have to extend a UIViewRepresentable . The UIViewRepresentable has an effect property of type UIBlurEffect .

Piecing it all together

We are going to place the NowPlaying and TabIcon Views inside of a VStack , and then place that inside a ZStack along with our VisualEffect View. The VisualEffect is underneath to give us the blur effect we desire. Let’s call this whole combination an InfoPane View:

InfoPaneView.swift