Add Navigation Rail for large screen devices (#37)

Add Navigation Rail for large screen devices using m3 adaptive layout.
android · Mar 23, 2024 · abd564e · abd564e
1 parent 07817f8
commit abd564e
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 42 deletions.
diff --git a/app/build.gradle.kts b/app/build.gradle.kts
@@ -88,6 +88,7 @@ dependencies {
     implementation(libs.compose.ui.text.google.fonts)
     implementation(libs.compose.ui.tooling.preview)
     implementation(libs.compose.material3)
+    implementation(libs.compose.material3.adaptive)
     implementation(libs.compose.material.icons)
     androidTestImplementation(libs.compose.ui.test)
     debugImplementation(libs.compose.ui.tooling)

diff --git a/app/src/main/java/com/google/android/samples/socialite/ui/home/Home.kt b/app/src/main/java/com/google/android/samples/socialite/ui/home/Home.kt
@@ -24,12 +24,12 @@ import androidx.compose.material.icons.outlined.Settings
 import androidx.compose.material.icons.outlined.VideoLibrary
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
-import androidx.compose.material3.NavigationBar
-import androidx.compose.material3.NavigationBarItem
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
 import androidx.compose.material3.TopAppBar
 import androidx.compose.material3.TopAppBarDefaults
+import androidx.compose.material3.adaptive.navigationsuite.ExperimentalMaterial3AdaptiveNavigationSuiteApi
+import androidx.compose.material3.adaptive.navigationsuite.NavigationSuiteScaffold
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
@@ -38,38 +38,62 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.stringResource
 import androidx.hilt.navigation.compose.hiltViewModel
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
-import androidx.lifecycle.viewmodel.compose.viewModel
 import androidx.navigation.compose.NavHost
 import androidx.navigation.compose.composable
 import androidx.navigation.compose.rememberNavController
 import com.google.android.samples.socialite.R
 import com.google.android.samples.socialite.ui.AnimationConstants
 import com.google.android.samples.socialite.ui.home.timeline.Timeline
 
+@OptIn(ExperimentalMaterial3AdaptiveNavigationSuiteApi::class)
 @Composable
 fun Home(
     onChatClicked: (chatId: Long) -> Unit,
     modifier: Modifier = Modifier,
 ) {
-    var destination by rememberSaveable { mutableStateOf(Destination.Chats) }
+    var currentDestination by rememberSaveable { mutableStateOf(Destination.Chats) }
+    NavigationSuiteScaffold(
+        navigationSuiteItems = {
+            for (destination in Destination.entries) {
+                val selected = currentDestination.route == destination.route
+                item(
+                    selected = selected,
+                    onClick = { currentDestination = destination },
+                    icon = {
+                        Icon(
+                            imageVector = destination.imageVector,
+                            contentDescription = stringResource(destination.label),
+                        )
+                    },
+                    label = {
+                        Text(text = stringResource(destination.label))
+                    },
+                    alwaysShowLabel = false,
+                )
+            }
+        },
+    ) { HomeContent(currentDestination, modifier, onChatClicked) }
+}
+
+@Composable
+private fun HomeContent(
+    currentDestination: Destination,
+    modifier: Modifier,
+    onChatClicked: (chatId: Long) -> Unit,
+) {
     Scaffold(
         modifier = modifier,
-        topBar = { HomeAppBar(title = stringResource(destination.label)) },
-        bottomBar = {
-            HomeNavigationBar(
-                currentDestination = destination.route,
-                onDestinationChanged = { destination = it },
-            )
-        },
+        topBar = { HomeAppBar(title = stringResource(currentDestination.label)) },
     ) { innerPadding ->
         val navController = rememberNavController()
         HomeBackground(modifier = Modifier.fillMaxSize())
         NavHost(
             navController = navController,
-            startDestination = destination.route,
+            startDestination = currentDestination.route,
             modifier = modifier,
         ) {
             composable(
@@ -146,33 +170,3 @@ private enum class Destination(
         imageVector = Icons.Outlined.Settings,
     ),
 }
-
-@Composable
-private fun HomeNavigationBar(
-    currentDestination: String,
-    onDestinationChanged: (Destination) -> Unit,
-    modifier: Modifier = Modifier,
-) {
-    NavigationBar(
-        modifier = modifier,
-    ) {
-        for (destination in Destination.values()) {
-            val selected = currentDestination == destination.route
-            val label = stringResource(destination.label)
-            NavigationBarItem(
-                selected = selected,
-                onClick = { onDestinationChanged(destination) },
-                icon = {
-                    Icon(
-                        imageVector = destination.imageVector,
-                        contentDescription = label,
-                    )
-                },
-                label = {
-                    Text(text = label)
-                },
-                alwaysShowLabel = false,
-            )
-        }
-    }
-}
diff --git a/gradle/libs.versions.toml b/gradle/libs.versions.toml
@@ -45,6 +45,7 @@ truth = "1.1.3"
 turbine = "1.0.0"
 uiautomator = "2.2.0"
 window = "1.2.0"
+material3-adaptive-navigation-suite = "1.0.0-alpha05"
 
 [libraries]
 accompanist-painter = { group = "com.google.accompanist", name = "accompanist-drawablepainter", version.ref = "accompanist" }
@@ -62,6 +63,7 @@ coil-compose = { group = "io.coil-kt", name = "coil-compose", version.ref = "coi
 compose-bom = { group = "androidx.compose", name = "compose-bom", version.ref = "compose_bom" }
 compose-material-icons = { group = "androidx.compose.material", name = "material-icons-extended" }
 compose-material3 = { group = "androidx.compose.material3", name = "material3", version.ref = "material3" }
+compose-material3-adaptive = { group = "androidx.compose.material3", name = "material3-adaptive-navigation-suite", version.ref = "material3-adaptive-navigation-suite"}
 compose-foundation = { group = "androidx.compose.foundation", name = "foundation" }
 compose-ui = { group = "androidx.compose.ui", name = "ui" }
 compose-ui-graphics = { group = "androidx.compose.ui", name = "ui-graphics" }