diff --git a/app/build.gradle.kts b/app/build.gradle.kts index 26dadbf5..98f3e874 100644 --- 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 index 491f7ad8..42a04c10 100644 --- 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,10 +38,10 @@ 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 @@ -49,27 +49,51 @@ 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 index ed50c214..8ef87087 100644 --- 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" }