DrawerLayout with Navigation Component doesn't get behind a translucent Status Bar

Question

What I want to achieve is the Material Design DrawerLayout getting behind a translucent Status Bar, as such:

I am using the new Navigation Architecture Component, which means this is my current structure (I will make it simple since it can have a lot of useless code):

main.xml:

<FrameLayout
    ...
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    ...
    android:fitsSystemWindows="true" >

    <fragment
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/main_nav_host_fragment"
        android:name="androidx.navigation.fragment.NavHostFragment"
        app:navGraph="@navigation/main_nav_graph"
        app:defaultNavHost="true" />
</FrameLayout>

Then inside the Navigation Graph Fragment on main.xml I load the DrawerLayout itself:

fragment_main_nav.xml:

<androidx.drawerlayout.widget.DrawerLayout
    ...
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <!-- Layout to contain contents of main body of screen (drawer will slide over this) -->
    <androidx.coordinatorlayout.widget.CoordinatorLayout            
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        ...

    </androidx.coordinatorlayout.widget.CoordinatorLayout>

    <!-- Container for contents of drawer - using NavigationView to make configuration easier -->
    <com.google.android.material.navigation.NavigationView
        android:id="@+id/drawer_navigation_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:menu="@menu/drawer_view"
        app:headerLayout="@layout/drawer_nav_header"/>

</androidx.drawerlayout.widget.DrawerLayout>

And in my styles.xml I have my Theme as:

<style name="AppTheme" parent="WindowAppTheme">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>

<style name="WindowAppTheme" parent="Theme.MaterialComponents.Light.NoActionBar"></style>

And v21 styles.xml:

<style name="WindowAppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
    <item name="android:windowDrawsSystemBarBackgrounds">true</item>
    <item name="android:statusBarColor">@android:color/transparent</item>
</style>

With this I can't get the `DrawerLayout to show it's top under the translucent Status Bar, this is what I get instead:

I tried several different ways, placing android:fitsSystemWindows=true and removing it from everywhere, but I can't get this to work! Or the Status Bar doesn't have a translucent color, or it's white.

What's the correct way to setup a DrawerLayout, under the Material Design specs, with Navigation Architecture Component?

---

EDIT:

I restructured the app as Ian's suggestion and now the DrawerLayout is showing into the Status Bar, but there's no scrim, no translucid bar over there on top of the DrawerLayout:

Answer 1

A DrawerLayout must be placed at the root of your hierarchy - the FrameLayout you are using only knows that it needs to pad everything in to fitsSystemWindows and won't allow your DrawerLayout to go into the status bar area.

Therefore your main.xml should be something similar to the navigation testapp:

<android.support.v4.widget.DrawerLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  android:id="@+id/main_drawer_layout"
  android:layout_width="match_parent"
  android:layout_height="match_parent">
  <fragment
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/main_nav_host_fragment"
    android:name="androidx.navigation.fragment.NavHostFragment"
    app:navGraph="@navigation/main_nav_graph"
    app:defaultNavHost="true"
  />
  <android.support.design.widget.NavigationView
    android:id="@+id/drawer_navigation_view"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    app:menu="@menu/drawer_view"
    app:headerLayout="@layout/drawer_nav_header"/>
</android.support.v4.widget.DrawerLayout>

And your MainActivity should include code such as:

override fun onCreate(savedInstanceState: Bundle?) {
  super.onCreate(savedInstanceState)
  setContentView(R.layout.main)
  val navController = findNavController(R.id.main_nav_host_fragment)

  // Change whether the drawer is enabled
  // based on what destination you're on
  val drawerLayout = findViewById<DrawerLayout>(R.id.main_drawer_layout)
  navController.addOnNavigatedListener { _, destination ->
    if (navController.graph.startDestination == destination.id) {
      // We're at the root of your graph, so unlock the drawer
      drawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_UNLOCKED,
        GravityCompat.START)
    } else {
      // We're on any other destination so disable the drawer
      drawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED,
        GravityCompat.START)
    }
  }

  // Setup the NavigationView to navigate to the correct
  // destination in the graph. Since we've locked the drawer
  // on anything but the startDestination, we can guarantee
  // that you're on that destination when these items are clicked
  val navigationView = findViewById<NavigationView>(R.id.drawer_navigation_view)
  navigationView.setupWithNavController(navController)
}

Since you're not using a Toolbar or any equivalent construct, your MainFragment would need to add its own button and set it up to open the drawer when clicked:

val navigationButton = ...
navigationButton.setOnClickListener {
  val drawerlayout = requireActivity().findViewById<DrawerLayout>(
    R.id.main_drawer_layout)
  drawerLayout.openDrawer(GravityCompat.START)
}