What is Materials in SwiftUI?

In this post, I discuss what exactly a Material is in SwiftUI. It was introduced at WWDC 2021. Adding the Material background modifier can be quite useful.

Full transcript below.

[00:00:00] Hey y’all. So in this video, I’m going to walk you through how to add a material background to swift UI elements, like a text or a label. Um, this was announced in dub dub DC, 2021, and only currently works in X code 13 beta. So make sure you have those downloaded. Nothing’s really available public yet. It’s all developer beta, but, um, except for probably excavate 13, but like iOS and all that kind of stuff is developer beta.

Right? But anyway, so let’s walk through this material background, talk about what it is and all that fun stuff.

What does a material background mean? Well, it means that you can blur the background of a view so that the non blurred part is more prominent. So the background color can be in color. The background can be like a color or an image. And if you put it like a text in front of it, you might want a background on that text so that you can actually see what the text is saying.

And that’s where the material background modifier comes in. So this is going to be a modifier. This material background that I keep talking about is actually going to be a background. We’re going to apply a modifier to the view in swift. Yeah. And then say it’s a type of material basically, but I want to talk about what operating systems, what platforms support this, all that jazz, that way you don’t get too, like in the weeds with it.

If you just don’t need it right now. Um, and all of this is [00:01:30] not backwards compatible, so it’s all going forward. So that means iOS 15 Mackowitz 12 T V O S 15. watchOS eight. Those are all in developer, beta. Um, currently, and I believe most, if not all will be public beta at some point that’s usually how apple rolls.

Um, but with that being said, those are the platforms that supports again, you need extra 13 beta, um, links in the description for everything well linked in the description to Apple’s developer site and also. Um, while you’re down there and make sure to hit the like button thumbs up, subscribe all that jazz.

It was just real useful share if you want to. Um, so now with that being said, let’s hop in and start coding. So an X code, we’re going to go ahead and start a new project. So I always just use an iOS app. It just makes it easier. I don’t deal with as much. Um, so iOS is just a little bit easier to start with then we’re going to hit next.

Make sure to give it a name. And then if you want to create a get repo, you can, if not, don’t worry about it. I like to check it because there’s going to be a get hub link at some point in the description that shows this project that we worked on in this video. All right. So this is pretty normal. The very first thing we actually need to do is X code just kind of assumes that we are going to be, uh, we’re still working with iOS 14.

The very first thing we need to do is actually. Go into the material background project here [00:03:00] and change that to iOS 15, you can see that the minimum requirements, iOS 14 dot O like I said, this is only valid with iOS 15. So we’re going to go ahead and do that here. There we go. So now we can go back to our content view.

And the first first thing I’m going to do is actually get this canvas going, cause it’s going to be pretty nifty to see him. All right. So at the canvas on now, the next thing is we’re going to wrap the text. Hello world. E Z stack. So right here, have you have you, haven’t seen this menu before this isn’t new to SU two X, 13, pretty, pretty nifty though.

You can command and then click on a V you basically, and you can embed it in H stacks, me stack these stacks. We’re going to go ahead and embed this in a Z stock because you need that layering. Now behind it, behind the text, we’re going to go ahead and add a yeah. Brown color. So color I’m going to choose.

So that we can quickly see what exactly is going on here. But now we don’t see the text hello world, which is fine because this is where that background modifier comes in. So with that bad brown modifier applied, it’s going to add a blur or a color in this case because it’s, there’s not an image, but it’s going to apply a blur right behind texts that we can actually see it.

So I’m gonna hit dot background. And then if you go in here and you hit dot, there’s a lot of different options here. I’m going to go ahead and just [00:04:30] choose regular material right now. And what we should see is now there’s a nice gray box around the hello world. Again, this is just sniffy. It’s useful it.

Now we can actually see what we’re talking about on. Z staff. And that’s all it takes to add in that blurred background. So we were using like an image. You would see a different image there. If you were seeing, you would see the image in the background and it would just be blurred where the text is in the image would have just been focused on, like I said, right now, we’re just playing with color, the easiest to show.

Now you can modify it and make it more customizable if you need to. So with that being said, there’s five levels of thickness of two. So you have regular, which is what we have here right now. And that’s the middle of no material and ultra thick material. So you have like completely nothing where there is no background applied.

You have ultra thin, thin regular thick ultra thick. That ultra thick is going to be not see-through whatsoever. And your ultra thin is going to be super C3. So let’s just go ahead and step through this. So first, this is what the ultra thin material looks like. You can start to see the hello world is really dark.

The gray is also darker. If I change this color here.

Yes, you can start to see it’s a little bit different. Um, anyway, it’s just really, it’s a lot more transport Lucent. [00:06:00] I’m going to go head back to black. Then you have the thin, well, the set through all four. A little bit, a little bit less trends, a little bit less translucent. So as we go thicker in the material, we’ll start to see less and less of the background, regular, which we saw before Vic was getting pretty, pretty white.

They’re really close to white just because it’s going to become, not translation at all. Basically with the ultra thick. And a little bit more thickness there. So those are the five different levels of thickness. Again, if you just don’t want a background, you can get rid of it. So another way to customize the material background isn’t necessarily with just like the thickness, but you can also customize it by what shape it is.

So if you are wanting this to be in a circle necessarily, you can actually, once you have the regular material in there, if you type in comma in a circle,

It’ll start to go a circle. So now that’s a circle. You can also even put in a rounded RightAngle and give it a border radius. And that’ll actually truly give you like a pill style here. And I did not make that prominent enough, but there you go. And so now you can start seeing your, um, and start seeing those rounded edges, which [00:07:30] is really, really useful if, like I said on here.

So you can start to see you. Starts to look more like a button, or if you really wanted to make something just like pill, like we could make the Z stack a lot smaller if we wanted to at that point. And like then hello world or whatever label you have would be a lot more prominent on this rectangle. So another thing, and one last thing to be aware of as most swift UI does, if we’re using anything dynamic like this, it also depends on your device settings.

So if you’re the color of your devices in darkness, Then your translucent is going to be a little bit different. So in here under color, color scheme right here, which is white, that’s what we are right now. But if we go to dark, you can see that the translucent kind of like flips. It’s a black on black kind of deal.

And it just automatically knows because the colors of black, um, and it, like I said, if we change this to a different color, it’s going to look different because it is a. It is dark theme. So if we change the spark to light, we’ll go back to the lighter color scheme. So just be aware that you get a lot, you get a lot from this just by using the default stuff here.

Um, I do know it’s not possible all the time to use this kind of stuff just because I was 15 is going to be, I always 15. You might not be ready to start. But as of right now, at least it looks like iOS 15 is installing on all devices that iOS 14 can install on. And that I, and I believe I was 14 installs [00:09:00] on all devices that iOS 13 can.

So hopefully you can start using this pretty soon because it’s pretty nifty. I did all of this with a text view, but you can also do that. With like a label, for instance, where you really just need to emphasize the, what, what you want to use or to do, or emphasize something on the screen with like an icon and a text.

So let’s just do that real quick. So taking out this text here

and we should get a heart there, there you go. It just took a little bit to get that actual heart. Yeah. Um, and now we have it and behind the background, no, it’s a little bit small. So of course you could add some padding, just like we normally do.

And boom. Now we have something that’s a little bit more prominent on that rectangle and that’s really how easy it is to blur a background on a view. Now you just add in that material background, that material background, modifier specify how thick you want it to be. And if you need it in a specialist, As long as it’s a shape protocol, it conforms to a shape protocol.

You should be good to add whatever you want in it. If you liked this video, then please make sure to hit that like button below a lot, along with the subscribe button so that you get notified. When I post fuller swift tips and tricks, and also swift UI goodies like this, and I will catch you on the next video.