Add NAVbar

app/build.gradle.kts

@@ -47,6 +47,7 @@ android {
 }
 
 dependencies {
+    val nav_version = "2.7.7"
 
     implementation(libs.androidx.core.ktx)
     implementation(libs.androidx.lifecycle.runtime.ktx)
@@ -63,4 +64,5 @@ dependencies {
     androidTestImplementation(libs.androidx.ui.test.junit4)
     debugImplementation(libs.androidx.ui.tooling)
     debugImplementation(libs.androidx.ui.test.manifest)
+    implementation("androidx.navigation:navigation-compose:$nav_version")
 }

app/src/main/java/com/ti/mobpo/MainActivity.kt

@@ -3,25 +3,10 @@ package com.ti.mobpo
 import android.os.Bundle
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
-import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.wrapContentSize
-import androidx.compose.material3.Button
 import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.OutlinedTextField
 import androidx.compose.material3.Surface
-import androidx.compose.material3.Text
-import androidx.compose.runtime.Composable
-import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.tooling.preview.Preview
-import androidx.compose.ui.unit.dp
 import com.ti.mobpo.ui.theme.MobileSecurityTheme
 
 class MainActivity : ComponentActivity() {
@@ -31,7 +16,7 @@ class MainActivity : ComponentActivity() {
             MobileSecurityTheme {
                 // A surface container using the 'background' color from the theme
                 Surface(modifier = Modifier.fillMaxSize(), color = MaterialTheme.colorScheme.background) {
-                    PokeSearchApp()
+                    Navigation()
                 }
             }
         }

app/src/main/java/com/ti/mobpo/NavBar.kt

@@ -0,0 +1,55 @@
+package com.ti.mobpo
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.wrapContentHeight
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.ArrowBack
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.navigation.NavController
+import androidx.navigation.compose.rememberNavController
+
+@Composable
+fun TopBar(navController: NavController, showBack: Boolean) {
+    Row(
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(16.dp)
+            .wrapContentHeight(Alignment.Top),
+        horizontalArrangement = Arrangement.SpaceBetween,
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+        if (showBack) {
+            IconButton(onClick = { navController.navigateUp()
+            println("Pressed")
+            }) {
+                Icon(Icons.Default.ArrowBack, contentDescription = "Back")
+            }
+        } else {
+            IconButton(onClick = {}) {
+            }
+        }
+        Text(text = stringResource(R.string.app_title), fontWeight = FontWeight.Bold)
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+fun TopBarPreview() {
+    val navController = rememberNavController()
+    Surface {
+        TopBar(navController = navController, true)
+    }
+}

app/src/main/java/com/ti/mobpo/Navigation.kt

@@ -0,0 +1,44 @@
+package com.ti.mobpo
+
+import androidx.compose.material3.Surface
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.navigation.compose.NavHost
+import androidx.navigation.compose.composable
+import androidx.navigation.compose.navigation
+import androidx.navigation.compose.rememberNavController
+
+
+
+
+
+@Composable
+fun Navigation() {
+    val navController = rememberNavController()
+    var showBackButton by remember { mutableStateOf(false) }
+
+    NavHost(navController = navController, startDestination = "Home"){
+        navigation(startDestination = Screen.PokeSearch.route, route = "Home"){
+            composable(route = Screen.PokeSearch.route) {
+                TopBar(navController = navController, showBackButton)
+                PokeSearch(navController = navController) {
+                    showBackButton = true
+                }
+            }
+        }
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+fun NavigationPreview() {
+    val navController = rememberNavController()
+    Surface {
+        TopBar(navController = navController, false)
+        PokeSearch(navController = navController){}
+    }
+}

app/src/main/java/com/ti/mobpo/PokeSearch.kt

@@ -22,14 +22,16 @@ import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
+import androidx.navigation.NavController
+import androidx.navigation.Navigation
+import androidx.navigation.compose.rememberNavController
 
 
 @Composable
-fun PokeSearch(modifier: Modifier = Modifier.fillMaxSize().wrapContentSize(Alignment.TopCenter)) {
+fun PokeSearch(navController: NavController, onButtonPressed: () -> Unit) {
     var value by remember { mutableStateOf("") }
-
     Row(
-        modifier = modifier,
+        modifier = Modifier.fillMaxSize().wrapContentSize(),
         verticalAlignment = Alignment.CenterVertically,
         horizontalArrangement = Arrangement.Center
     ) {
@@ -40,7 +42,9 @@ fun PokeSearch(modifier: Modifier = Modifier.fillMaxSize().wrapContentSize(Align
             modifier = Modifier.weight(1f).padding(horizontal = 16.dp, vertical = 8.dp)
         )
         Button(
-            onClick = { /*TODO*/ },
+            onClick = {
+                onButtonPressed()
+            },
             modifier = Modifier.padding(start = 8.dp)
         ) {
             Text(stringResource(R.string.input_search_button))
@@ -50,5 +54,6 @@ fun PokeSearch(modifier: Modifier = Modifier.fillMaxSize().wrapContentSize(Align
 @Preview(showBackground = true)
 @Composable
 fun PokeSearchApp(){
-    PokeSearch()
+    val navController = rememberNavController()
+    PokeSearch(navController = navController){}
 }

app/src/main/java/com/ti/mobpo/Screen.kt

@@ -0,0 +1,7 @@
+package com.ti.mobpo
+
+sealed class Screen (val route: String) {
+    object PokeSearch : Screen("default_screen")
+    object TopNav : Screen("navigation_bar")
+    object Favourites : Screen("favourites_page")
+}

app/src/main/res/values/strings.xml

@@ -1,5 +1,6 @@
 <resources>
     <string name="app_name">MobileSecurity</string>
+    <string name="app_title">Pokemon Helper</string>
     <string name="input_search_button">Search</string>
     <string name="input_field_label">Enter Pokémon Name</string>
 </resources>