I was inspired by Google Keep app, which have similar implementation like shown below:

So i tried to find a proper post on how to achieve this thing but unfortunately found nothing and also above answers weren't working. So i decided to try out all the flags related to navigationBar
Android Studio was suggesting.
Let me explain in detail:
Only android:navigationBarColor
won't do any thing when you are using a light theme. But on dark theme, it will work.
Setting windowTranslucentNavigation
to true
will do 2 things:
- draw the activity below the soft navbar
- override
navigationBarColor
and force it to be transparent.
Which will look like below image:

- If you use
FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS
(follow @Frankenxtein's answer) you will get below result:

Which is somehow close to desired result, but it isn't because it draws activity components below navbar. And also it mess your padding and margin (see full screenshot here). And more, you have to do it for each activity and also have to adjust current margin.
The Solution
This can be achieved without compromising current layout. To do this in Dark theme, you have no issue, just setting android:navigationBarColor
will do the work.
However our goal here is to do it with a light theme let (#FFFFFF). Using android:windowLightNavigationBar
which requires API 27 or higher along with android:navigationBarColor
will result what we want.
<item name="android:navigationBarColor">@color/colorPrimaryDark</item>
<item name="android:windowLightNavigationBar">true</item>
Here for my app case colorPrimaryDark
is #FFFFFF in light theme and dracula in dark theme, you can also declare a new variable for this. Which yields below results:
Light Theme

Dark Theme

Here android:navigationBarColor
is setting background colour of navbar. And android:windowLightNavigationBar
setting dark button colours and indicates that background is light as you can understand from it's name.
Hope this helps !