Feature: Navigation Bar

app/build.gradle.kts

@@ -5,12 +5,12 @@ plugins {
 
 android {
     namespace = "com.example.android_programming"
-    compileSdk = 33
+    compileSdk = 34
 
     defaultConfig {
         applicationId = "com.example.android_programming"
         minSdk = 24
-        targetSdk = 33
+        targetSdk = 34
         versionCode = 1
         versionName = "1.0"
 
@@ -51,14 +51,14 @@ android {
 
 dependencies {
 
-    implementation("androidx.core:core-ktx:1.9.0")
+    implementation("androidx.core:core-ktx:1.12.0")
     implementation("androidx.lifecycle:lifecycle-runtime-ktx:2.6.2")
     implementation("androidx.activity:activity-compose:1.7.2")
     implementation(platform("androidx.compose:compose-bom:2023.03.00"))
     implementation("androidx.compose.ui:ui")
     implementation("androidx.compose.ui:ui-graphics")
     implementation("androidx.compose.ui:ui-tooling-preview")
-    implementation("androidx.compose.material3:material3")
+    implementation("androidx.compose.material:material")
     testImplementation("junit:junit:4.13.2")
     androidTestImplementation("androidx.test.ext:junit:1.1.5")
     androidTestImplementation("androidx.test.espresso:espresso-core:3.5.1")
@@ -66,4 +66,6 @@ dependencies {
     androidTestImplementation("androidx.compose.ui:ui-test-junit4")
     debugImplementation("androidx.compose.ui:ui-tooling")
     debugImplementation("androidx.compose.ui:ui-test-manifest")
+
+    implementation("androidx.navigation:navigation-compose:2.7.3")
 }

app/src/main/java/com/example/android_programming/MainActivity.kt

@@ -3,44 +3,13 @@ package com.example.android_programming
 import android.os.Bundle
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
-import androidx.compose.foundation.layout.fillMaxSize
+import com.example.android_programming.Navigation.Navigate
-import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.Surface
-import androidx.compose.material3.Text
-import androidx.compose.runtime.Composable
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.tooling.preview.Preview
-import com.example.android_programming.ui.theme.AndroidProgrammingTheme
 
 class MainActivity : ComponentActivity() {
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
         setContent {
-            AndroidProgrammingTheme {
+            Navigate()
-                // A surface container using the 'background' color from the theme
-                Surface(
-                    modifier = Modifier.fillMaxSize(),
-                    color = MaterialTheme.colorScheme.background
-                ) {
-                    Greeting("Android")
-                }
-            }
         }
     }
 }
-
-@Composable
-fun Greeting(name: String, modifier: Modifier = Modifier) {
-    Text(
-        text = "Hello $name!",
-        modifier = modifier
-    )
-}
-
-@Preview(showBackground = true)
-@Composable
-fun GreetingPreview() {
-    AndroidProgrammingTheme {
-        Greeting("Android")
-    }
-}

app/src/main/java/com/example/android_programming/Navigation/NavController.kt

@@ -0,0 +1,31 @@
+package com.example.android_programming.Navigation
+
+import androidx.compose.runtime.Composable
+import androidx.navigation.NavHostController
+import androidx.navigation.compose.NavHost
+import androidx.navigation.compose.composable
+import com.example.android_programming.Screens.HomeScreen
+import com.example.android_programming.Screens.LikeScreen
+import com.example.android_programming.Screens.OrderScreen
+import com.example.android_programming.Screens.ProfileScreen
+
+@Composable
+fun NavController(navController: NavHostController){
+    NavHost(
+        navController = navController,
+        startDestination = NavItem.Home.route
+    ){
+        composable(NavItem.Home.route){
+            HomeScreen()
+        }
+        composable(NavItem.Like.route){
+            LikeScreen()
+        }
+        composable(NavItem.Order.route){
+            OrderScreen()
+        }
+        composable(NavItem.Profile.route){
+            ProfileScreen()
+        }
+    }
+}

app/src/main/java/com/example/android_programming/Navigation/NavItem.kt

@@ -0,0 +1,15 @@
+package com.example.android_programming.Navigation
+
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Favorite
+import androidx.compose.material.icons.filled.Home
+import androidx.compose.material.icons.filled.Person
+import androidx.compose.material.icons.filled.ShoppingCart
+import androidx.compose.ui.graphics.vector.ImageVector
+
+sealed class NavItem (val route: String, val icon: ImageVector){
+    object Home : NavItem("home", Icons.Default.Home)
+    object Like : NavItem("like", Icons.Default.Favorite)
+    object Order : NavItem("order", Icons.Default.ShoppingCart)
+    object Profile : NavItem("profile", Icons.Default.Person)
+}

app/src/main/java/com/example/android_programming/Navigation/Navigate.kt

@@ -0,0 +1,82 @@
+package com.example.android_programming.Navigation
+
+import android.annotation.SuppressLint
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material.BottomNavigation
+import androidx.compose.material.BottomNavigationItem
+import androidx.compose.material.Icon
+import androidx.compose.material.Scaffold
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.navigation.compose.currentBackStackEntryAsState
+import androidx.navigation.compose.rememberNavController
+
+@SuppressLint("UnusedMaterialScaffoldPaddingParameter")
+@Composable
+fun Navigate(){
+    val navController = rememberNavController()
+    val listItem = listOf(
+        NavItem.Home,
+        NavItem.Like,
+        NavItem.Order,
+        NavItem.Profile,
+    )
+
+    Scaffold(bottomBar = {
+        BottomNavigation(
+            backgroundColor = Color.White
+        ) {
+            val navBackStackEntry = navController.currentBackStackEntryAsState()
+            val currentState = navBackStackEntry.value
+
+            listItem.forEach { it ->
+                val isSelected = currentState?.destination?.route == it.route
+
+                BottomNavigationItem(
+                    selected = isSelected,
+                    onClick = {
+                        if(!isSelected){
+                            navController.graph.startDestinationRoute?.let {
+                                navController.popBackStack(it, inclusive = true)
+                            }
+                            navController.navigate(it.route){
+                                launchSingleTop
+                            }
+                        }
+                        navController.navigate(it.route)
+
+                    },
+                    icon = {
+                        val iconModifier = if (isSelected) {
+                            Modifier
+                                .background(color = Color.LightGray, shape = CircleShape)
+                                .padding(8.dp)
+                        } else {
+                            Modifier
+                        }
+
+                        Icon(
+                            imageVector = it.icon,
+                            contentDescription = null,
+                            modifier = iconModifier.then(Modifier.size(24.dp))
+                        )
+                    }
+                )
+            }
+        }
+    }) {
+        NavController(navController = navController)
+    }
+}
+
+@Composable
+@Preview
+fun NavigatePreview(){
+    Navigate()
+}

app/src/main/java/com/example/android_programming/Screens/HomeScreen.kt

@@ -0,0 +1,37 @@
+package com.example.android_programming.Screens
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.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.text.font.FontWeight
+import androidx.compose.ui.tooling.preview.Preview
+
+@Composable
+fun HomeScreen() {
+    Box(
+        modifier = Modifier
+            .fillMaxSize()
+            .background(Color.White),
+        contentAlignment = Alignment.Center
+    ) {
+        Text(
+            text = "Home",
+            fontSize = MaterialTheme.typography.h3.fontSize,
+            fontWeight = FontWeight.Bold,
+            color = Color.Black
+        )
+    }
+}
+
+
+@Composable
+@Preview
+fun HomeScreenPreview(){
+    HomeScreen()
+}

app/src/main/java/com/example/android_programming/Screens/LikeScreen.kt

@@ -0,0 +1,36 @@
+package com.example.android_programming.Screens;
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.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.text.font.FontWeight
+import androidx.compose.ui.tooling.preview.Preview
+
+@Composable
+fun LikeScreen() {
+    Box(
+        modifier = Modifier
+            .fillMaxSize()
+            .background(Color.White),
+        contentAlignment = Alignment.Center
+    ) {
+        Text(
+            text = "Like",
+            fontSize = MaterialTheme.typography.h3.fontSize,
+            fontWeight = FontWeight.Bold,
+            color = Color.Black
+        )
+    }
+}
+
+@Composable
+@Preview
+fun LikeScreenPreview(){
+    LikeScreen()
+}

app/src/main/java/com/example/android_programming/Screens/OrderScreen.kt

@@ -0,0 +1,36 @@
+package com.example.android_programming.Screens
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.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.text.font.FontWeight
+import androidx.compose.ui.tooling.preview.Preview
+
+@Composable
+fun OrderScreen() {
+    Box(
+        modifier = Modifier
+            .fillMaxSize()
+            .background(Color.White),
+        contentAlignment = Alignment.Center
+    ) {
+        Text(
+            text = "Order",
+            fontSize = MaterialTheme.typography.h3.fontSize,
+            fontWeight = FontWeight.Bold,
+            color = Color.Black
+        )
+    }
+}
+
+@Composable
+@Preview
+fun OrderScreenPreview(){
+    OrderScreen()
+}

app/src/main/java/com/example/android_programming/Screens/ProfileScreen.kt

@@ -0,0 +1,36 @@
+package com.example.android_programming.Screens;
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.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.text.font.FontWeight
+import androidx.compose.ui.tooling.preview.Preview
+
+@Composable
+fun ProfileScreen() {
+    Box(
+        modifier = Modifier
+            .fillMaxSize()
+            .background(Color.White),
+        contentAlignment = Alignment.Center
+    ) {
+        Text(
+            text = "Profile",
+            fontSize = MaterialTheme.typography.h3.fontSize,
+            fontWeight = FontWeight.Bold,
+            color = Color.Black
+        )
+    }
+}
+
+@Composable
+@Preview
+fun ProfileScreenPreview(){
+    ProfileScreen()
+}

app/src/main/java/com/example/android_programming/ui/theme/Theme.kt

@@ -1,13 +1,9 @@
+/*
 package com.example.android_programming.ui.theme
 
 import android.app.Activity
 import android.os.Build
 import androidx.compose.foundation.isSystemInDarkTheme
-import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.darkColorScheme
-import androidx.compose.material3.dynamicDarkColorScheme
-import androidx.compose.material3.dynamicLightColorScheme
-import androidx.compose.material3.lightColorScheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.SideEffect
 import androidx.compose.ui.graphics.toArgb
@@ -26,7 +22,8 @@ private val LightColorScheme = lightColorScheme(
     secondary = PurpleGrey40,
     tertiary = Pink40
 
-    /* Other default colors to override
+    */
+/* Other default colors to override
     background = Color(0xFFFFFBFE),
     surface = Color(0xFFFFFBFE),
     onPrimary = Color.White,
@@ -34,7 +31,8 @@ private val LightColorScheme = lightColorScheme(
     onTertiary = Color.White,
     onBackground = Color(0xFF1C1B1F),
     onSurface = Color(0xFF1C1B1F),
-    */
+    *//*
+
 )
 
 @Composable
@@ -67,4 +65,4 @@ fun AndroidProgrammingTheme(
         typography = Typography,
         content = content
     )
-}
+}*/

app/src/main/java/com/example/android_programming/ui/theme/Type.kt

@@ -1,6 +1,7 @@
+/*
 package com.example.android_programming.ui.theme
 
-import androidx.compose.material3.Typography
+import androidx.compose.material.Typography
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.font.FontFamily
 import androidx.compose.ui.text.font.FontWeight
@@ -15,7 +16,8 @@ val Typography = Typography(
         lineHeight = 24.sp,
         letterSpacing = 0.5.sp
     )
-    /* Other default text styles to override
+    */
+/* Other default text styles to override
     titleLarge = TextStyle(
         fontFamily = FontFamily.Default,
         fontWeight = FontWeight.Normal,
@@ -30,5 +32,6 @@ val Typography = Typography(
         lineHeight = 16.sp,
         letterSpacing = 0.5.sp
     )
-    */
+    *//*
-)
+
+)*/