Added predictive back support to the drawer (#1454)

In M3 1.3, the drawerState can be passed to the ModalDrawerSheet to get
predictive back animations without the need for a PredictiveBackHandler
to be manually defined.

Author: IanGClifton

JetNews/app/src/main/AndroidManifest.xml

@@ -17,6 +17,7 @@
     <application
         android:name=".JetnewsApplication"
         android:allowBackup="true"
+        android:enableOnBackInvokedCallback="true"
         android:icon="@mipmap/ic_launcher"
         android:label="@string/app_name"
         android:supportsRtl="true"

JetNews/app/src/main/java/com/example/jetnews/ui/AppDrawer.kt

@@ -24,13 +24,15 @@ import androidx.compose.foundation.layout.width
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Home
 import androidx.compose.material.icons.filled.ListAlt
-import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.DrawerState
+import androidx.compose.material3.DrawerValue
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.ModalDrawerSheet
 import androidx.compose.material3.NavigationDrawerItem
 import androidx.compose.material3.NavigationDrawerItemDefaults
 import androidx.compose.material3.Text
+import androidx.compose.material3.rememberDrawerState
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.painterResource
@@ -40,16 +42,19 @@ import androidx.compose.ui.unit.dp
 import com.example.jetnews.R
 import com.example.jetnews.ui.theme.JetnewsTheme
 
-@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun AppDrawer(
+    drawerState: DrawerState,
     currentRoute: String,
     navigateToHome: () -> Unit,
     navigateToInterests: () -> Unit,
     closeDrawer: () -> Unit,
     modifier: Modifier = Modifier
 ) {
-    ModalDrawerSheet(modifier) {
+    ModalDrawerSheet(
+        drawerState = drawerState,
+        modifier = modifier,
+    ) {
         JetNewsLogo(
             modifier = Modifier.padding(horizontal = 28.dp, vertical = 24.dp)
         )
@@ -93,6 +98,7 @@ private fun JetNewsLogo(modifier: Modifier = Modifier) {
 fun PreviewAppDrawer() {
     JetnewsTheme {
         AppDrawer(
+            drawerState = rememberDrawerState(initialValue = DrawerValue.Open),
             currentRoute = JetnewsDestinations.HOME_ROUTE,
             navigateToHome = {},
             navigateToInterests = {},

JetNews/app/src/main/java/com/example/jetnews/ui/JetnewsApp.kt

@@ -16,7 +16,6 @@
 
 package com.example.jetnews.ui
 
-import androidx.activity.compose.BackHandler
 import androidx.compose.foundation.layout.Row
 import androidx.compose.material3.DrawerState
 import androidx.compose.material3.DrawerValue
@@ -54,15 +53,10 @@ fun JetnewsApp(
         val isExpandedScreen = widthSizeClass == WindowWidthSizeClass.Expanded
         val sizeAwareDrawerState = rememberSizeAwareDrawerState(isExpandedScreen)
 
-        BackHandler(sizeAwareDrawerState.isOpen) {
-            coroutineScope.launch {
-                sizeAwareDrawerState.close()
-            }
-        }
-
         ModalNavigationDrawer(
             drawerContent = {
                 AppDrawer(
+                    drawerState = sizeAwareDrawerState,
                     currentRoute = currentRoute,
                     navigateToHome = navigationActions.navigateToHome,
                     navigateToInterests = navigationActions.navigateToInterests,