Hello.
I'm Roman Nurik from the Android Developer Relations
team at Google.
In today's DevByte, we're going to take a look
at the new immersive mode feature in Android 4.4 KitKat.
This feature lets your apps go truly full screen.
Let's take a look.
So before we talk about immersive mode,
let's recap all of the different full screen
APIs there were available in previous versions of Android.
Now, there are two sets of APIs for full screen.
The first is a set of window manager flags,
such as flag fullscreen, you can set
or unset to show or hide the status bar.
Now, these work on any version of Android,
and remain active even if you navigate away from your app
and then come back.
The second is a set of system UI visibility flags.
And the difference with these flags
is that they're only available in newer versions of Android,
since about Android 4.0 or later.
Additionally, these flags are clearable by the system.
So if, for example, you navigate away from your app
and then come back?
These flags will be cleared and you'll have to reset them.
So the first of these new flags is Low Profile.
And this simply dims the status and navigation bars
when it's set.
The second is the Fullscreen flag,
and this behaves basically the same as the Window Manager
flag.
It simply hides the status bar.
Now, the big one here is Hide Navigation,
which hides the navigation bar temporarily.
For those keeping track, the navigation bar
is the one that consists of the Back, Home, and Recent buttons,
and it's only available on some devices.
On some devices, the navigation bar isn't present,
and all you would see are soft keys like Back, Menu,
and so on.
Now, once the Hide Navigation flag is set,
any interaction with the screen will show the navigation bar.
And the touch events that cause that navigation bar to show
will not be passed to your app.
This is an important point to keep in mind when
we talk about immersive mode in just a few seconds.
Now, one more point before we move on.
There's a bunch of these Layout Flags
that control how your screens are laid out.
Setting these flags allows your content
to appear behind the system bars.
This is especially important when
users can toggle the bars in your app.
Setting these flags will keep your content from jumping
and resizing in response to the bar is showing or being hidden.
So let's talk about the new stuff.
Android 4.4 introduces two new, mutually exclusive system UI
visibility flags.
And they're immersive and immersive sticky.
Let's look at a demo of the immersive flag first.
So to my left, you see the simple demo app.
Now, , when we touch the content,
you'll see that the immersive system UI visibility flag,
along with the Hide Navigation, Fullscreen,
and some layout flags are set.
Once you enter immersive mode within an app
to get back to the system UI, you
can swipe down from the top of the screen.
The system also automatically presents a reminder bubble
to the user the first time they answer immersive mode
in your app.
So here's a quick example of that reminder bubble.
Now, an important point here is that you're
app can now capture all the touch events, allowing users
to, say, play an immersive game or scroll
through content without the distraction of system bars.
So you'll notice here that, first, I can actually
swipe down from the top of the screen to reveal those bars.
And then if I actually start interacting
with the middle of the screen, you'll
notice that the bars actually stay hidden.
And this is the big difference between immersive mode
and just setting the Hide Navigation flag.
So one important point here is that swiping
from the top of the screen clears those flags.
So if you want to, say, hide them again after three seconds,
you can set up a system UI visibility listener,
which we'll talk about in a second.
And then, three seconds later, set the flag again
to hide them.
So let's look at some code.
First, we'll use our Windows route view, or the Decor View,
as the anchor for system UI visibility.
You can use any view so long as it's visible.
Now, the next thing you should do whenever
you use system UI visibility flags is you
should set up a listener to watch for changes.
Because the system can actually clear these flags in response
to user interactions, you want to be
kept aware of when that occurs.
Now in this case, we simply show or hide additional UI controls
such as video playback controls, when
the system bars are shown or hidden.
And keeping all of your UI controls
in sync with the system bars is the best practice
to minimize the number of states that your app can be in,
resulting in a more seamless user experience.
To actually show or hide the system bars,
you can either set or remove the right set of flags.
To hide the system bars and enter immersive mode,
use the Hide Navigation, Fullscreen, and Immersive flags
in addition to the layout flags that we talked about before.
To show the system bars, just set the layout flags,
making sure that the content doesn't jump.
And omit the visibility flags, like Fullscreen and Hide
Navigation.
What that'll do is that'll actually show the bars.
And generally, you'll want to auto
hide the system bars after a period of inactivity.
We won't go through all the details here,
but basically, you want to use a Handler
with delayed messages for this purpose.
You can also clear messages to make sure that any pending
hides or auto hides are cancelled if need be.
Additionally, you should handle the case
of Window Focus Changes.
If you gain Window Focus, you may
want to re-hide the system bars.
If you lose Window Focus-- for example, due to dialogue
or pop up menu coming up-- you'll
probably want to cancel any pending auto hides.
So for example, if you're watching a video
and you press the action overflow, that shows up
a pop up menu, you'll want to prevent
the case of three seconds after you
show the action overflow, the system bars and action bar
hide, automatically closing the action overflow.
So this will help you prevent that.
Lastly, you generally want to allow users
to manually toggle the visibility of the system bars
by touching your content, especially
if single touches don't do anything else in your screen.
To do this, you may think of just using a simple click
listener.
Now the problem with this is that click listeners
are fired even if you drag your fingers across the content
after pressing down.
You probably don't want to do that.
Instead, you probably want to use a gesture detector,
like shown here, and handle the on single tap up event.
This makes sure that if your user's finger moves
more than just a little bit during the touch,
it won't toggle the system bars.
Next, let's look at the immersive sticky flag.
Now in this mode, almost everything
is the same, except when you swipe
from the top of the screen.
So here's that demo again, and you see the same bubble.
Now, if you swipe from the top of the screen,
you'll notice that a couple of things are different.
The system bars will show up in a semi-transparent state,
as you can see here.
And the system bars will automatically
hide after a short delay, or if the user interacts somewhere
with the middle of the screen.
Now, the third thing that is different
is that the system UI visibility change listeners
that you created before will not be triggered.
Because this state, this temporarily visible system
bar state, is intended to be very transient.
And your app should basically be completely unaware of this.
And last but not least, the system
will not actually clear this flag.
So when the user swipes down from the top of the screen,
those flags will stay there.
They won't be cleared.
And this gives this flag the sticky name.
Now, the code for immersive sticky is really simple.
Any time the window receives focus,
simply set the immersive sticky flag,
along with the other flags mentioned before.
Now you don't have to worry about the system
clearing this flag due to user interaction,
because again, the flag is sticky.
OK, so let's summarize with some use cases.
When should you use these new flags?
So if you're building a video player or something
else that requires minimal user interaction,
you'll want to use something called the lean back approach.
And this gets its name from, you start watching,
or you turn on the content, and you lean back.
And you don't really do much else with the screen.
Now, the lean back approach has been available
since Android 4.0.
It's been refined in Jelly Bean, Android 4.1, and so on.
And it simply involves using the full screen
and hide navigation system UI visibility flags.
Now in this mode, in this lean back approach,
any interaction with the screen will automatically
show the system bars and other playback controls
that you've defined.
if you're building something like a book
reader or a magazine, or something that has a little bit
more interaction, you'll want to use the new Immersive
flag in addition to Fullscreen and Hide Navigation.
In this case, swiping up from the top of the screen
should reveal the system bars in addition to your own UI chrome.
Lastly, if you're building something truly immersive
such as a game or a drawing app, you
may want to use the immersive sticky flag in addition
to the Fullscreen and Hide Navigation flags,
again, as we talked before.
In this case, swiping up from the top of the screen
will very briefly reveal the system bars
in a very, very transient state.
So that's immersive mode in Android 4.4 KitKat.
Check the video description on YouTube
for links to the sample code.
Thanks.