Use androidx.navigation for tabs

Author: nielsvanvelzen

app/build.gradle.kts

@@ -3,6 +3,7 @@ plugins {
 	alias(libs.plugins.kotlin.android)
 	alias(libs.plugins.kotlin.compose)
 	alias(libs.plugins.sqldelight)
+	alias(libs.plugins.kotlin.serialization)
 }
 
 kotlin {
@@ -40,19 +41,21 @@ sqldelight {
 dependencies {
 	// System
 	implementation(libs.bundles.androidx.core)
-	implementation(libs.androidx.tvprovider)
 	implementation(libs.bundles.koin)
+	implementation(libs.androidx.tvprovider)
 	implementation(libs.timber)
 
 	// Data
 	implementation(libs.bundles.sqldelight)
+	implementation(libs.kotlinx.serialization.json)
 
 	// UI
-	implementation(libs.androidx.appcompat)
-	implementation(libs.androidx.activity.compose)
 	implementation(libs.bundles.androidx.compose)
-	debugImplementation(libs.androidx.compose.ui.tooling)
-	implementation(libs.androidx.tv.material)
+	implementation(libs.androidx.activity.compose)
+	implementation(libs.androidx.appcompat)
+	implementation(libs.androidx.navigation.compose)
 	implementation(libs.androidx.palette)
+	implementation(libs.androidx.tv.material)
 	implementation(libs.coil.compose)
+	debugImplementation(libs.androidx.compose.ui.tooling)
 }

app/src/main/kotlin/nl/ndat/tvlauncher/LauncherApplication.kt

@@ -11,7 +11,6 @@ import nl.ndat.tvlauncher.data.repository.InputRepository
 import nl.ndat.tvlauncher.data.resolver.AppResolver
 import nl.ndat.tvlauncher.data.resolver.ChannelResolver
 import nl.ndat.tvlauncher.data.resolver.InputResolver
-import nl.ndat.tvlauncher.ui.screen.launcher.LauncherScreenViewModel
 import nl.ndat.tvlauncher.ui.tab.apps.AppsTabViewModel
 import nl.ndat.tvlauncher.ui.tab.home.HomeTabViewModel
 import nl.ndat.tvlauncher.util.DefaultLauncherHelper
@@ -35,7 +34,6 @@ private val launcherModule = module {
 	single { InputRepository(get(), get(), get()) }
 	single { InputResolver() }
 
-	viewModel { LauncherScreenViewModel() }
 	viewModel { HomeTabViewModel(get(), get()) }
 	viewModel { AppsTabViewModel(get()) }
 }

app/src/main/kotlin/nl/ndat/tvlauncher/data/Destinations.kt

@@ -0,0 +1,22 @@
+package nl.ndat.tvlauncher.data
+
+import androidx.navigation.NavGraphBuilder
+import androidx.navigation.compose.composable
+import kotlinx.serialization.Serializable
+import nl.ndat.tvlauncher.ui.tab.apps.AppsTab
+import nl.ndat.tvlauncher.ui.tab.home.HomeTab
+
+object Destinations {
+	@Serializable
+	object Home
+
+	@Serializable
+	object Apps
+}
+
+val DefaultDestination = Destinations.Home
+
+fun NavGraphBuilder.createDestinationsGraph() {
+	composable<Destinations.Home> { HomeTab() }
+	composable<Destinations.Apps> { AppsTab() }
+}

app/src/main/kotlin/nl/ndat/tvlauncher/ui/screen/launcher/LauncherScreen.kt

@@ -1,27 +1,30 @@
 package nl.ndat.tvlauncher.ui.screen.launcher
 
-import androidx.compose.animation.AnimatedContent
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
-import androidx.compose.runtime.collectAsState
-import androidx.compose.runtime.getValue
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.focus.FocusRequester
 import androidx.compose.ui.focus.focusRequester
 import androidx.compose.ui.unit.dp
-import nl.ndat.tvlauncher.ui.tab.apps.AppsTab
-import nl.ndat.tvlauncher.ui.tab.home.HomeTab
+import androidx.navigation.compose.NavHost
+import androidx.navigation.compose.rememberNavController
+import androidx.navigation.createGraph
+import nl.ndat.tvlauncher.data.DefaultDestination
+import nl.ndat.tvlauncher.data.createDestinationsGraph
 import nl.ndat.tvlauncher.ui.toolbar.Toolbar
-import org.koin.androidx.compose.koinViewModel
 
 @Composable
 fun LauncherScreen() {
-	val viewModel = koinViewModel<LauncherScreenViewModel>()
-	val tabIndex by viewModel.tabIndex.collectAsState()
+	val navController = rememberNavController()
+	val navGraph = remember(navController) {
+		navController.createGraph(DefaultDestination) {
+			createDestinationsGraph()
+		}
+	}
 
 	Column(
 		modifier = Modifier
@@ -33,21 +36,20 @@ fun LauncherScreen() {
 		}
 
 		Toolbar(
+			navController = navController,
+			navGraph = navGraph,
 			modifier = Modifier
 				.padding(
 					vertical = 27.dp,
 					horizontal = 48.dp,
 				)
 		)
 
-		AnimatedContent(
-			targetState = tabIndex,
+		NavHost(
+			navController = navController,
+			graph = navGraph,
 			modifier = Modifier
-				.focusRequester(contentFocusRequester),
-			label = "content"
-		) { tabIndex ->
-			if (tabIndex == 0) HomeTab()
-			else if (tabIndex == 1) AppsTab()
-		}
+				.focusRequester(contentFocusRequester)
+		)
 	}
 }

app/src/main/kotlin/nl/ndat/tvlauncher/ui/screen/launcher/LauncherScreenViewModel.kt

@@ -13,10 +13,14 @@ import androidx.compose.ui.focus.FocusRequester
 import androidx.compose.ui.focus.focusRequester
 import androidx.compose.ui.focus.focusRestorer
 import androidx.compose.ui.unit.dp
+import androidx.navigation.NavController
+import androidx.navigation.NavGraph
 
 @OptIn(ExperimentalComposeUiApi::class)
 @Composable
 fun Toolbar(
+	navController: NavController,
+	navGraph: NavGraph,
 	modifier: Modifier = Modifier,
 ) {
 	val focusRequester = remember { FocusRequester() }
@@ -29,6 +33,8 @@ fun Toolbar(
 		verticalAlignment = Alignment.CenterVertically,
 	) {
 		ToolbarTabs(
+			navController = navController,
+			navGraph = navGraph,
 			modifier = Modifier
 				.focusRequester(focusRequester)
 		)

app/src/main/kotlin/nl/ndat/tvlauncher/ui/toolbar/Toolbar.kt

@@ -10,33 +10,49 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.focus.focusRestorer
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
+import androidx.navigation.NavController
+import androidx.navigation.NavGraph
+import androidx.navigation.get
 import androidx.tv.material3.Tab
 import androidx.tv.material3.TabRow
 import androidx.tv.material3.Text
+import kotlinx.coroutines.flow.map
 import nl.ndat.tvlauncher.R
-import nl.ndat.tvlauncher.ui.screen.launcher.LauncherScreenViewModel
-import org.koin.androidx.compose.koinViewModel
+import nl.ndat.tvlauncher.data.Destinations
 
 @OptIn(ExperimentalComposeUiApi::class)
 @Composable
-fun ToolbarTabs(modifier: Modifier) {
-	val viewModel = koinViewModel<LauncherScreenViewModel>()
-	val selectedTabIndex by viewModel.tabIndex.collectAsState()
-
-	val tabs = listOf(
-		stringResource(R.string.tab_home),
-		stringResource(R.string.tab_apps),
+fun ToolbarTabs(
+	navController: NavController,
+	navGraph: NavGraph,
+	modifier: Modifier,
+) {
+	val currentDestinationId by navController.currentBackStackEntryFlow.map { it.destination.id }.collectAsState(null)
+	val tabs = mapOf(
+		Destinations.Home to stringResource(R.string.tab_home),
+		Destinations.Apps to stringResource(R.string.tab_apps),
 	)
 
 	TabRow(
-		selectedTabIndex = selectedTabIndex,
+		selectedTabIndex = tabs.keys.indexOfFirst { destination -> navGraph[destination].id == currentDestinationId },
 		modifier = modifier.focusRestorer(),
 	) {
-		tabs.forEachIndexed { tabIndex, name ->
-			key(tabIndex) {
+		tabs.toList().forEachIndexed { index, (destination, name) ->
+			key(index) {
+				val selected = navGraph[destination].id == currentDestinationId
 				Tab(
-					selected = selectedTabIndex == tabIndex,
-					onFocus = { viewModel.setTabIndex(tabIndex) },
+					selected = selected,
+					onFocus = {
+						if (!selected) {
+							navController.navigate(destination) {
+								if (currentDestinationId != null) {
+									popUpTo(currentDestinationId!!) {
+										inclusive = true
+									}
+								}
+							}
+						}
+					},
 					modifier = Modifier.padding(16.dp, 8.dp)
 				) {
 					Text(name)

app/src/main/kotlin/nl/ndat/tvlauncher/ui/toolbar/ToolbarTabs.kt

@@ -9,6 +9,7 @@ androidx-compose-foundation = "1.8.1"
 androidx-compose-ui = "1.8.1"
 androidx-core = "1.16.0"
 androidx-core-role = "1.1.0"
+androidx-navigation = "2.9.0"
 androidx-palette = "1.0.0"
 androidx-tv = "1.0.0"
 androidx-tvprovider = "1.1.0"
@@ -17,13 +18,15 @@ java-jdk = "21"
 koin-android = "4.0.4"
 koin-compose = "4.0.4"
 kotlin = "2.1.20"
+kotlinx-serialization = "1.8.1"
 sqldelight = "2.0.2"
 timber = "5.0.1"
 
 [plugins]
 android-app = { id = "com.android.application", version.ref = "android-plugin" }
 kotlin-android = { id = "org.jetbrains.kotlin.android", version.ref = "kotlin" }
 kotlin-compose = { id = "org.jetbrains.kotlin.plugin.compose", version.ref = "kotlin" }
+kotlin-serialization = { id = "org.jetbrains.kotlin.plugin.serialization", version.ref = "kotlin" }
 sqldelight = { id = "app.cash.sqldelight", version.ref = "sqldelight" }
 
 [libraries]
@@ -35,12 +38,16 @@ androidx-compose-ui-tooling = { module = "androidx.compose.ui:ui-tooling", versi
 androidx-compose-ui-tooling-preview = { module = "androidx.compose.ui:ui-tooling-preview", version.ref = "androidx-compose-ui" }
 androidx-core = { module = "androidx.core:core-ktx", version.ref = "androidx-core" }
 androidx-core-role = { module = "androidx.core:core-role", version.ref = "androidx-core-role" }
+androidx-navigation-compose = { module = "androidx.navigation:navigation-compose", version.ref = "androidx-navigation" }
+androidx-navigation-fragment = { module = "androidx.navigation:navigation-fragment", version.ref = "androidx-navigation" }
+androidx-navigation-ui = { module = "androidx.navigation:navigation-ui", version.ref = "androidx-navigation" }
 androidx-palette = { module = "androidx.palette:palette-ktx", version.ref = "androidx-palette" }
 androidx-tv-material = { module = "androidx.tv:tv-material", version.ref = "androidx-tv" }
 androidx-tvprovider = { module = "androidx.tvprovider:tvprovider", version.ref = "androidx-tvprovider" }
 coil-compose = { module = "io.coil-kt:coil-compose", version.ref = "coil" }
 koin-android = { module = "io.insert-koin:koin-android", version.ref = "koin-android" }
 koin-androidx-compose = { module = "io.insert-koin:koin-androidx-compose", version.ref = "koin-compose" }
+kotlinx-serialization-json = { module = "org.jetbrains.kotlinx:kotlinx-serialization-json", version.ref = "kotlinx-serialization" }
 sqldelight-android = { module = "app.cash.sqldelight:android-driver", version.ref = "sqldelight" }
 sqldelight-coroutines = { module = "app.cash.sqldelight:coroutines-extensions", version.ref = "sqldelight" }
 timber = { module = "com.jakewharton.timber:timber", version.ref = "timber" }