Android: Full Screen UI with Transparent Status Bar

Activities, the building block of any Android app. Something so simple, yet so complex. Here we are going to talk about something similar related to activities which looks very simple from the outset but gets complex pretty soon. We will build a full screen layout with transparent status bar. I'm not going to talk about why would you need a full screen layout and in what situations. That's a topic for another discussion.

However, here's a simple use-case. If you have ever seen any app with a map(like a ride-hailing app), you would see that the map occupies the space below the status bar as well. The content of the layout other than the map doesn't overlap with the system bar icons. Doesn't it look sweet?
So, we are just gonna recreate that UI. Something like these:

Set a theme for the Activity
Let's start with the basics(i assume you already have created an Activity with a map and some content) and so, let's set a theme for our activity:

And then apply theme to the activity as usual:

Easy peasy!! Let's see what we have got.

Make UI fullscreen
Now, let's get down to the fun part. How to make the layout a full screen layout and set the status bar colour?

Let's jump right into code, try it out on your device and then let's get down to understanding what is actually happening:

For lollipop and above devices:

What is a Window?
When you open any standard app, you would see a status bar, a navigation bar, and the actual activity. Each of these components have a different window. Each of these components are given a window to draw themselves into. The activity is given a window where it draws the view hierarchy specified by us. The status bar is given a window where the system draws things like time, battery, notification icons etc. The navigation bar also has a different window where it draws the back button, the home button etc. All these windows on a single screen are managed by WindowManager.

What are these different flags you can apply to a window?
If FLAG_TRANSLUCENT_STATUS is enabled, translucent status bar will be shown which we don’t want. So, we first remove this flag.

FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS flag tells the system that our window is responsible for drawing the background for system bars.

What is systemUiVisibility?
Using this method, we can control the visibility of the system UI drawn by the system. System UI elements are elements like status bar, naviagtion bar etc. SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN helps keep the content from resizing when the system bars hide and show while going in and out of full screen mode.

I think setStatusBarColor() needs no explanation. However, this API is available on or above API 21.

Problem on marshmallow and above devices:
The system bar icons are all white which may not look good if the general colour scheme in your layout is also light.

How to fix it?
Again, setSystemUiVisibility to the rescue. SYSTEM_UI_FLAG_LIGHT_STATUS_BAR makes sure that the status bar icons are drawn in such a way so that they are fully visible in light mode.

Cool..so, now our status bar looks pretty good on most of the API levels. But but.. what's up with the Floating Action Button. This guy is overlapping with the system bar icons and this kind of UI makes me as an user uncomfortable. So, let's fix this:

Shift the content
The actual content of your app layout needs to be shifted down so that it doesn’t overlap with the status bar icons. Ok, what do we need to shift it down? Margin..a marginTop will do. Right?
But now comes the million dollar question. How do we know how much marginTop do we need to give to the content view? There are many ways to do that but i’m going to go with the most definitive approach which has worked for me on a variety of devices.

Window insets to the rescue….
What are window insets?
Window insets gives us the size of system view that we would need here. The system view we are talking of here is the status bar. So, the top window inset would give us the margin that we need to apply to our content.

How to get the insets of your current visible window?

Now, it's just down to getting the view and setting a marginTop on it equal to the topInset of the window:

View Extensions for reuse
Usually in a large application, things like these are repeated. So, wouldn't it be better to create a helpful kotlin extension on the Activity which we can call from any activity instead of repeating this code everywhere?

And then all we need to do in any Activity is:

makeStatusBarTransparent()
ViewCompat.setOnApplyWindowInsetsListener(findViewById(R.id.content_container)) { _, insets ->
        findViewById<FloatingActionButton>(R.id.fab1).setMarginTop(insets.systemWindowInsetTop)
        findViewById<FloatingActionButton>(R.id.fab2).setMarginTop(insets.systemWindowInsetTop)
        insets.consumeSystemWindowInsets()
    }

A sample Android app using these concepts can be found here.

Please refer to https://chris.banes.dev/talks/2017/becoming-a-master-window-fitter-lon/ if you want to understand more on Window insets.