Android Tips: Transparent status bar

Short snippet to make UX better

Introduction

When you think about User experience, making more content visible becomes an integral part of it.

One of the methods is to make system bar transparent so that content can also load below it, making content more impacting. There are a few things to keep in mind though when building that.

1. It’s limited by Android API support
2. The layout can be dispersed if correct attributes are not used.

API support for making system bars (or status bar) is API 21. Best you can do is make it translucent in API 19 and above but that makes it look content blocking, rather I would recommend making System bars visible below API 21.

1. For devices with API 21 and above

So first, set the Activity windows to full screen, which can be done using decoreView in onCreate() and SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN flag, and SYSTEM_UI_FLAG_LAYOUT_STABLE to make it stable.

Code for making Activity Fullscreen

This makes the current activity full screen, by pushing it above. Thus if there is some UI component that should be below the status bar and not behind it, you need to set android:fitSystemWindowsattribute. Suppose there is a toolbar which should still be below status bar, just set android:fitSystemWindows="true"

Now in styles.xml make a style with parent as AppTheme, then set item statusBarColot to transparent and then set it to your activity in Manifest.xml

2. For devices <API 21

By keeping everything same, if the app is run below API 21 system bar turn completely white, thus making it a bad UX, so in your activity add a check for API level, and if level is less than 21 set fitSystemWindows for root layout to true, thus it would shift down by showing the usual status bar as usual.

When you run your app it would look something like this:

Cineverse (Movie Detail Activity)

Amazing right 😁

Source: https://developer.android.com/training/system-ui/status#behind

Github: https://github.com/AbhishekChd