Hey everyone today, I'm going to show you how to set that status
bar color on the top of your iOS, Android applications with Xamarin
forms and just a few lines of code.
So tune in.
Hey everyone.
I'm James wants to Magnum back with another Xamarin, a one-on-one video
right here on my YouTube channel.
If you're brand new to the series, check out them right here.
Cause I've 15, 20 some odd videos at this point, starting from a
file new project all the way.
At some point, releasing the app onto the app store we've been
using Xamarin forms, features.
All the way through to build out an awesome coffee application.
And what we're really working on today is fine tuning our
styles of our applications.
I put out a video a week or two ago about theming light and dark theme
and custom themes of our applications.
Then I got a few questions, which is.
What about the navigation bar?
What about that status bar up there?
Which, you know, you want to kind of control the color of?
Well, it's a great question.
And I'm glad that a lot of you asked in the comments.
So I figured I would just go ahead and sort, just walk through it and show how to
update those different status bar colors.
So let's take a look.
All right.
So the very first thing I want to do is bring up the application here.
And, um, over, we're going to see is that this is my coffee application.
It has a nice, uh, way of doing a light theme and dark theme as
we can see as I toggle through.
But the biggest thing is this navigation bar and there's a dark color right here.
Right.
It's kind of like, they don't change at all.
Yeah.
And a lot of applications today actually have the entire colors all
the way through the top navigation bar scored as seamless as really nice.
And then, and I really, really like it.
So what we're going to do is we're going to adjust these, this sort of title
navigation bar and the status bar color.
So I'm going to do is bring up visual studio.
And I brought up my app shell.
This is with Xamarin forms, shell.
That's how we've created this project.
I like it for all the many, many reasons I've said in my previous videos.
But the cool part is that it has a bunch of base styles that will help
you theme your application, whereas you haven't adjusted them at all because
we haven't had to yet until now.
But what we see here is inside the file, new template, we have a
background color, a foreground color.
A title collar, a disabled collar and unselected color, and then tab bar
colors, which is actually quite cool.
In fact, if you go down further in the out template, you'll see that there's colors
that you can specify when, um, these fly out items are selected and deselected.
So you can really fine tune what it looks like at any time.
But we're going to do here is we're going to go ahead and note.
That the background color right here is set to this primary blue and the
foreground color is set to the white.
So let's go ahead and adjust that.
Okay.
Instead of setting a primary color, we're going to go ahead and use an app
theme binding here, which is quite cool.
You can use a dynamic resource if you're doing custom theming with different colors
by here, we're just using a dark theme and a light theme, um, for this application.
So here for the app theme, binding them to say when dark mode use black,
um, ELs, when it's light use white.
Pretty straightforward then for the foreground color, which is the text
color here, we're going to swap it.
We're going to say use white text basically when it is
in that mode, ELLs views.
Black, which is go ahead and restart this since we're making some
changes to our app shell up on top.
And what we should see right away is that we no longer have that static primary
blue color for our navigation bar.
In fact, what we should have now, because the default is this dark
theme is that we should see black.
There it is.
If I come in here and I go ahead and swap this over, boom, there
it is automatically for us a 100%.
So that's actually.
Really simple.
I mean, change two lines of code and the video is done now, almost, almost.
So this is nice.
And of course, like I said, you can adjust this based on your, if you're
using tabs or other things to be really dynamics, you want to definitely check
those out as you're going for us.
We only need to adjust those colors.
So that's quite nice.
But what about this thing up here?
Right?
What about this status bar?
Well, one thing you'll note is if you go into your Android
project resources, Values styles.
Android has a base theme itself and Xamarin forms has its own.
So it comments everything out.
Cause it does it for us.
But if we wanted to have a default here, we could uncomment the color primary dark.
That is the Android resource that controls this status bar color.
So here I could say use black, for example, and then now we
would have a black one on top.
For our status bar, but what about dining?
Cause this actually isn't going to be dynamic at all because if I record
it, it'll just be black all the time.
Well, right.
A little bit of code, unfortunately, to do that.
So what we're going to do is we're going to come into our app coffee over here
and I'm going to say, add new item and I'm going to say interface I environment.
Okay.
Now, if you haven't watched the previous video about dependency injection, I'm
going to put a thing right up there.
Definitely check that out.
Cause that's what we're going to do here is we need to tap
into some Android specific code.
I'm gonna have one method here.
That'll say, uh, void set, status bar color.
It's gonna take an, a color and a bullion, which is dark status bar tint.
Okay.
And what this is going to do is it's going to tell us if we want to tint the icons
and the text in a dark or a light, okay.
Here for the color, we're going to use system drawing color.
Um, Xamarin forms.
Color is a system drawing color, but we will see it.
It makes it a little bit easier to convert it into an Android color here in a second.
So there's our color now we've got to do is implement this puppy over in our
main activity in our Android project.
So over here, Android project main activity.
So we're going to create a new class.
You could of course put this in a new file, but I am being a lazy.
So I'm going to call this environment implements I environment by Ron meant.
There we go.
And here, I'm going to go ahead and use that, implement our interface.
And finally, I am going to go ahead and.
Add another dependency of top four environment.
Now I added this in my main activity and it needs me to specify that
it's my environment to export, not the Android environment exports.
Let's do that.
All right, cool.
So now at this point, um, we have our methods set up here.
We have our status bar and our bullion, everything inside here,
we just need to implement it.
Okay.
Now I'm going to go ahead and copy and paste some code.
And now you're saying, ah, jam you just copy and paste code or no.
Ah, why'd you do that?
Well, because I've built this code up years ago in a lot of my applications on
my live stream, on Twitch and my apple, my other applications, and I just copy and
paste it around and I probably should put it in a new bucket to be honest with you.
But.
It's just a very simple way of steaming the status bar.
Now let me walk you through it.
Okay.
The first thing that you do here is you check the build version SDK
int and make sure that it is at least running lollipop or greater.
If it's not then just returned because it doesn't support these API APIs.
Then over here, we're going to grab the current activity and the current window.
So the current activity is from Xamarin essentials and in
the window is on top of that.
Now what we need to do is we need to set that status bar color, and we're able
to do that here with window dot, set it status bar color, which is quite nice.
I literally named it the same.
Here it is going to take in an Android graphics color and to convert system
drawing color into the Android color.
We have an extension method in Xamarin essentials to do that.
So I just say to platform color and it adjusts it.
But before I do that, I need to tell the window that I'm going to
be drawing the system backgrounds.
And we're going to clear out the current status on it, which is translucent R yeah.
I don't actually remember what these things do.
All I know is a required in setting this out.
So that's a way of adding a flag and then clearing the existing
flags to say, Hey, don't use whatever the current translucent is.
Use mine.
Then we have one more, which is only available on Android M or greater, which
is setting that shade for the text.
Okay.
And this enables us to set, Hey, use white text or dark text, and it's not
quite the same as setting a color.
What we actually do is set the system UI visibility.
It's really strange, but what I do is you can set it over here
to a light status bar color.
If you want it to be a light, um, or you said it's a zero, which is dark.
So what I do is I say let's find that flag and then set the
window decor view dot system.
You have visibility if it's dark, if we want it to be, um, a dark tint, then set
the light status bar else cleared out.
Okay.
Which is a way of doing this.
So that's a way of thinking about it there.
Now you'll notice that this thing is deprecated, technically
system, UI visibility.
I haven't had any issues with it, with the system decor, Sesame visibility, but
you know, maybe in the future, this will go away now what to look for some updated
code, but I haven't had any issues at all.
I'm running on our emulators should be good.
All right.
So now we need to use this thing.
So again, I'd recommend checking out that theme video, um, previously, cause
I had this, the theme and it there's a method called set theme over here.
And what that enables me to do is come in and actually access some of this code.
So we're going to do here.
I was, we're going to come in and we're going to say, um, up, up, up, up.
Via BARR E equals dependency, service dot yet I environment
and grab that environment.
So again, from our dependency service, grab it.
Now we didn't implement this on iOS or if we had windows,
it wouldn't be there either.
So all to check again.
So, no, but what I'll do here is I'll say if all right and app dot current.
Dot requested theme.
All right.
Notice previously we're setting the user theme.
This will inherently set their requested theme.
So whatever the actual request that theme of the system is,
that's what we're going to use.
So here, I'm going to say, if it's dark, then we're going to
go in and set something else.
Don't okay.
So now we're going to do is we're going to say E question, mark dot.
So make sure it's not an all set status bar color.
If it's dark, we'll say color.black.
And what we'll do here is we're going to set this to false.
So we're going to say, Hey, we want you to use a light color over here.
All right.
And then, then what we're going to do here is we're going to say
if it's white use white, so the light theme and set this to true.
There we go.
It's literally that easy.
This method gets called whenever we change the theme or the
user changes the theme itself.
So we're going to dynamically change this on app startup and specifically
when the user changes it or they go into our settings and change it as well.
So let's go ahead and see what this looks like over here in the app.
You'll notice that there's still a black, you know, status bar on
here, because I had, I would want to implement a splash screen myself and
put it on there, but boom, there we go.
Look at this.
We have our theming there.
So it's a light theme right now.
So it's white.
It's seamlessly trends goes up and then over here, if I go into
dark, but I'm there this awesome.
I can go into my settings.
I can change these over here and look at that.
Very very cool.
Automatically dynamically changes it for us all automatically
with just a few lines of code.
Now you may be saying, well, James, you know, I don't use.
Shell.
So what if I don't use shell?
How does this adjust my theming here?
Well, good question.
Um, while there is no app shell for you to adjust, you can't do this.
There's a few ways of doing, uh, the navigation bar.
Uh, you could wrap your content pages in a navigation bar and set
different properties, different colors.
What I like to do in some of my older apps that I'm updating over here for don't
have shell is come into my, my theme page.
Call it on every single appearing of a page.
And what you can do here is, is you can actually come in and say, um, VAR nav
equals app dot current dot main page as Xamarin dot forms dot navigation page.
Okay.
So we're not using shell.
This would work.
And then what you can do is you can say if.
Over here.
Nav does not equal.
No.
Where you can do is you can say nab.bar.
Background color equals color.black.
Okay.
And nav dot BARR, texts, color equals color dot white B pretty much the
same as what we did in our app shell.
But here we're just going to do it in code and then flip these colors here.
So if you're saying, Hey, I'm not using shell.
How does this work, you're going to need to do this here.
And in fact, when we get to talking about iOS, next, you'll have to set this, make
sure these colors are set correctly in.
So it works with the status bar on iOS, because so far we've only
done Android like we saw earlier.
So you may, of course now be asking yourself, all right, we
have our Android application all set up and absolutely beautiful.
How do we make sure that our iOS status bar is themed as well?
Do I have to do anything else?
So let's head over to our Mac and take a look at that for a small tweak in
our application to get it working.
So let's head over there now.
So let's take a look at the current state of iOS.
We've set those foreground and background colors.
So if we had over into the settings, Or we're going to see is that this
actually sort of works really nice.
You know, we have light theme, dark theme system, uh, the command shift, a,
uh, also toggles that a parents there.
So you can see it go back and forth, but you'll notice that actually enlight
mode here, the title is not correct.
And that's because the title here defaulted to white.
So this is something that, for some reason you don't have to do on Android,
but I did have to do over here.
Maybe I did, uh, on Android, but you should probably set,
this is what I'm saying here.
So make sure you set that title color.
That's the same as the back or the bar texts color.
Um, if you're doing this with a navigation page, so you want
to make sure you set that.
So let's go ahead and redeploy this, and now hopefully our entire
title bar and the titles and everything should work accordingly.
So here we go.
Let's go back over into settings so we can toggle over three.
Oh, there it is.
Perfect settings with the black texts and white texts.
You can go ahead and modify that yourself, but notice that.
Yeah.
See, you can't see that system status bar anymore.
It's actually automatically adjusting, but.
And one of the modes, it's not setting it correctly.
And this is because the system is trying to be smart about it,
but we need to tell it what to use, just like we did on Android.
First thing you need to do is set this view controller based at our
status appearance to false or no in the info P list, then we're
going to implement the status.
Um, No interface, just like we did over on Android.
Now, again, I don't think that I probably should have named this environment or
I environment because it's actually not the best name and there's a system dot
environment and it just name it, whatever you want and really at the end of the day.
But for some reason I went with system environment.
I'm going to bring in a few namespaces here, Xamarin forms
and Xamarin essentials, because we're going to use that in our iOS.
It's a very minimal code here.
We'll do that.
Assembly dependency export, just like I did on Android.
And we'll do the, you know, very specific my coffee up that iOS, that
environment that we'll bring it in.
And that's because, you know, like I said earlier, if I didn't bring in that
namespace system, that environment would, would come up and that'd be no good.
So I'm going to copy and paste in some code.
Don't worry.
Ah, James is copying and pasting code again.
In fact, we don't need some of this code, but it's actually three lines of code.
So what we do.
On this set status bar color is we detected, we went
dark status content or not.
And if so, we're going to use this UI status bar color style or whatever,
dark content or light content.
And then we're going to set the status bar style with the UI
application shared application, and you can set animation true or false.
Xamarin essentials includes a get current UI view controller.
And then as long as it's not, no, you can do sets, need status bar, appearance
update, and that will trigger it, but that's all you need to do actually.
So three lines of code it's, it's much more elegant than it is over on.
Android.
So you're able to really finesse this.
And of course you probably want to check the platform version number two, to
make sure that it's iOS 12 or whatever, whenever dark mode was introduced.
So let's go into settings, light mode, dark mode, whoa.
It works.
Flight mode, system toggles, back and forth.
Again.
Can, can the command shift a light, no darkness.
So all the modes work and we can see this as part everywhere.
Yeah, of course.
You could modify that as well.
If you want it to fade in or out.
Now this code up here does a few things for you.
This allows you to set the status bar color specifically, if you want to.
So over here it actually goes and gets the window scene status bar frame.
We convert the platform color over Ellis on older versions of iOS.
That'll get the status bar, background, color selector.
You know, if you need to set it manually, you can do it there
based on your application.
The only caveat is that you cannot.
Call this method in the constructor before your UI is there.
You need to do it on, on resume.
So make sure you do that there.
And of course always invoke on the main thread.
All right.
Well, there you have it.
That is how you get up and running automatically adjusting the
navigation bar and status bar colors dynamically for your application.
I hope that you found this video super duper helpful.
Uh, if you did give it a thumbs up over there, and that
helps it go into the YouTube.
Algorithm of goodness to recommend to other folks.
And of course, I forget to subscribe and hit that notification bell.
So you stay up to date.
If you want to, with all the videos I'm putting out here.
Finally, I started a new weekly newsletter at newsletter dot Monta, magnet.com.
You can subscribe.
It's free completely.
You get weekly updates of me, just rambling about stuff in tech, some
cool photos of things that I'm experiencing in the universe and
also have coffee, which is quite fun.
Um, so definitely check that out, but that's going to do it for me this week.
So until next time.