Set Android system bar to be transparent when Navigation drawer is opened

While developing Android apps, a lot of times I broke the code and made the Android system bar opaque when the Navigation drawer is opened, as shown in the screenshot below.

Then I had to waste precious time hunting down the cause. So I am putting down the requirements to enable the Android system bar to be transparent over the Navigation drawer.

1. In Android Studio, open up the XML layout file e.g. activity_main.xml for the activity with the Navigation Drawer. In the AndroidX DrawerLayout widget, make sure the property fitsSystemWindows is set to true.
   
   
   
   
2. Next, create a "no action bar" style e.g. AppThem.NoActionBar in styles.xml to be used by the activity with the Navigation Drawer. In the example below, the style inherits the theme Theme.AppCompat.DayNight.DarkActionBar style for day and night mode styling.
   
   
   
3. Set the properties windowActionBar to false and windowNoTitle to true.
   
4. Then create the same "no action bar" style for Android API 21 and above e.g. /path/to/res/values-v21/styles.xml. Set the properties windowDrawsSystemBarBackgrounds to true and statusBarColor to "@android:color/transparent" as shown below.
   
   
   
5. Compile and run the application. The system bar should be transparent over the Navigation Drawer now.