Android — Translucent Navigation Bar
Sharing the experience of implementing a Translucent Navigation Bar on Android application
First thing enable the style across the app
Now once this is done the app would go underneath the navigation bar. For ensuring that the app respects the navigation bar height. There are two options.
First Option, through Java Code (The harder way)
The above piece of code takes care of ensuring whether or not
- App is in multi-mode
- Is the navigation bar displaying or does the device have a hard key navigation bar (eg. Samsung S7, Samsung J3, etc)
- Height of navigation bar which needs to be applied as padding to the view which requires to respect the height for the same
Issues
Oops did we celebrate a little too soon. Samsung Android P brings in a new mode brings in a new navigation type a.k.a Full screen gestures
Now when device is in this mode. Samsung does not provide appropriate height for the navigation bar making our UI looking as if it’s floating in the air. Thank you Samsung for not respecting the value!!!
Second Option, through XML File
The layout file which needs to go under as well as respect the navigation bar needs to have the below XML value.
android:fitsSystemWindows="true"Once done the lower most view (in below example the bottom navigation bar) will respect both. However, the color which would go beneath the navigation bar will be the color of the view which will have the above tag of fitsSystemWindow. So be sure to give it appropriate color otherwise we may end up with a different color.
Hope this gives an idea of how things might turn out to be in reality.
Considering almost every OEM including Google are moving towards the Gesture Navigation mimicking like iOS Android apps also needs to go underneath the Navigation Bar. Google IO 2019 was moving in that direction as well.
Happy Coding !!!