Bottom nav bar

app/build.gradle

@@ -5,12 +5,12 @@ plugins {
 
 android {
     namespace 'com.lahsuak.apps.jetpackcomposebasic'
-    compileSdk 33
+    compileSdk 34
 
     defaultConfig {
         applicationId "com.lahsuak.apps.jetpackcomposebasic"
         minSdk 23
-        targetSdk 33
+        targetSdk 34
         versionCode 1
         versionName "1.0"
 
@@ -27,17 +27,17 @@ android {
         }
     }
     compileOptions {
-        sourceCompatibility JavaVersion.VERSION_1_8
-        targetCompatibility JavaVersion.VERSION_1_8
+        sourceCompatibility JavaVersion.VERSION_17
+        targetCompatibility JavaVersion.VERSION_17
     }
     kotlinOptions {
-        jvmTarget = '1.8'
+        jvmTarget = '17'
     }
     buildFeatures {
         compose true
     }
     composeOptions {
-        kotlinCompilerExtensionVersion '1.1.1'
+        kotlinCompilerExtensionVersion '1.4.3'
     }
     packagingOptions {
         resources {
@@ -48,16 +48,18 @@ android {
 
 dependencies {
 
-    implementation 'androidx.core:core-ktx:1.9.0'
-    implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.5.1'
-    implementation 'androidx.activity:activity-compose:1.6.1'
+    implementation 'androidx.core:core-ktx:1.10.1'
+    implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.6.1'
+    implementation 'androidx.activity:activity-compose:1.7.2'
     implementation "androidx.compose.ui:ui:$compose_version"
     implementation "androidx.compose.ui:ui-tooling-preview:$compose_version"
-    implementation 'androidx.compose.material3:material3:1.1.0-alpha03'
+    implementation 'androidx.compose.material3:material3:1.2.0-alpha03'
+    implementation 'androidx.compose.material:material:1.4.3'
     testImplementation 'junit:junit:4.13.2'
-    androidTestImplementation 'androidx.test.ext:junit:1.1.4'
-    androidTestImplementation 'androidx.test.espresso:espresso-core:3.5.0'
+    androidTestImplementation 'androidx.test.ext:junit:1.1.5'
+    androidTestImplementation 'androidx.test.espresso:espresso-core:3.5.1'
     androidTestImplementation "androidx.compose.ui:ui-test-junit4:$compose_version"
     debugImplementation "androidx.compose.ui:ui-tooling:$compose_version"
     debugImplementation "androidx.compose.ui:ui-test-manifest:$compose_version"
+    implementation("androidx.navigation:navigation-compose:2.6.0")
 }

app/src/main/java/com/lahsuak/apps/jetpackcomposebasic/MainActivity.kt

@@ -1,15 +1,41 @@
 package com.lahsuak.apps.jetpackcomposebasic
 
 import android.os.Bundle
+import android.util.Log
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material.BottomNavigation
+import androidx.compose.material.BottomNavigationItem
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Email
+import androidx.compose.material.icons.filled.Home
+import androidx.compose.material.icons.filled.Settings
+import androidx.compose.material3.BadgedBox
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Scaffold
 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.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import androidx.navigation.NavController
+import androidx.navigation.NavHostController
+import androidx.navigation.compose.NavHost
+import androidx.navigation.compose.composable
+import androidx.navigation.compose.currentBackStackEntryAsState
+import androidx.navigation.compose.rememberNavController
+import com.lahsuak.apps.jetpackcomposebasic.model.BottomNavItem
 import com.lahsuak.apps.jetpackcomposebasic.ui.theme.JetPackComposeBasicTheme
 
 class MainActivity : ComponentActivity() {
@@ -22,29 +48,178 @@ class MainActivity : ComponentActivity() {
                     modifier = Modifier.fillMaxSize(),
                     color = MaterialTheme.colorScheme.background
                 ) {
-                    Greeting("Android")
+                    val navController = rememberNavController()
+                    Scaffold(
+                        bottomBar = {
+                            BottomNavigationBar(items = listOf(
+                                BottomNavItem(
+                                    "Home",
+                                    "home",
+                                    icon = Icons.Default.Home
+                                ),
+                                BottomNavItem(
+                                    "Chat",
+                                    "chat",
+                                    icon = Icons.Default.Email
+                                ),
+                                BottomNavItem(
+                                    "Settings",
+                                    "settings",
+                                    icon = Icons.Default.Settings
+                                )
+                            ),
+                                navController = navController,
+                                onItemClick = {
+                                    navController.navigate(it.route)
+                                }
+                            )
+                        }
+                    ) {
+                        Navigation(navController = navController, modifier = Modifier.padding(it))
+                    }
                 }
             }
         }
     }
 }
-/***
-Composable functions :
-A composable function is a regular function annotated with @Composable.
-This enables your function to call other @Composable functions within it.
-You can see how the Greeting function is marked as @Composable.
-This function will produce a piece of UI hierarchy displaying the given input,
-String. Text is a composable function provided by the library.
-***/
+
+
 @Composable
-fun Greeting(name: String) {
-    Text(text = "Hello $name!")
+fun Navigation(navController: NavHostController, modifier: Modifier) {
+    NavHost(navController = navController, startDestination = "Home") {
+        composable(route = "Home") {
+            HomeScreen()
+        }
+        composable(route = "Chat") {
+            ChatScreen()
+        }
+        composable(route = "Settings") {
+            SettingsScreen()
+        }
+    }
+}
+
+@Composable
+fun HomeScreen() {
+    Box(
+        modifier = Modifier.fillMaxSize(),
+        contentAlignment = Alignment.Center
+    ) {
+        Text(text = "Home screen", fontSize = 20.sp)
+    }
+}
+
+@Composable
+fun ChatScreen() {
+    Box(
+        modifier = Modifier.fillMaxSize(),
+        contentAlignment = Alignment.Center
+    ) {
+        Text(text = "Chat screen")
+    }
+}
+
+@Composable
+fun SettingsScreen() {
+    Box(
+        modifier = Modifier.fillMaxSize(),
+        contentAlignment = Alignment.Center
+    ) {
+        Text(text = "Settings screen")
+    }
+}
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun BottomNavigationBar(
+    items: List<BottomNavItem>,
+    navController: NavController,
+    modifier: Modifier = Modifier,
+    onItemClick: (BottomNavItem) -> Unit,
+) {
+    val backStackEntry = navController.currentBackStackEntryAsState()
+
+    BottomNavigation(
+        modifier = modifier,
+        elevation = 5.dp
+    ) {
+
+        items.forEach { item ->
+            val selected = item.route == backStackEntry.value?.destination?.route
+            BottomNavigationItem(
+                selected = selected,
+                onClick = { onItemClick(item) },
+                selectedContentColor = Color.Magenta,
+                unselectedContentColor = MaterialTheme.colorScheme.onBackground,
+                icon = {
+                    Column(horizontalAlignment = Alignment.CenterHorizontally) {
+                        Log.d("TAG", "BottomNavigationBar: ${item.badgeCount}")
+                        if (item.badgeCount > 0) {
+                            BadgedBox(badge = {
+                                Text(text = item.badgeCount.toString())
+                            }) {
+                                Icon(
+                                    imageVector = item.icon,
+                                    contentDescription = item.name
+                                )
+                            }
+                        } else {
+                            Icon(
+                                imageVector = item.icon,
+                                contentDescription = item.name
+                            )
+                        }
+
+                        if (selected) {
+                            Text(
+                                text = item.name,
+                                textAlign = TextAlign.Center,
+                                fontSize = 10.sp
+                            )
+                        }
+                    }
+                })
+        }
+    }
 }
 
 @Preview(showBackground = true)
 @Composable
 fun DefaultPreview() {
     JetPackComposeBasicTheme {
-        Greeting("Android")
+        Surface(
+            modifier = Modifier.fillMaxSize(),
+            color = MaterialTheme.colorScheme.background
+        ) {
+            val navController = rememberNavController()
+            Scaffold(
+                bottomBar = {
+                    BottomNavigationBar(items = listOf(
+                        BottomNavItem(
+                            "Home",
+                            "home",
+                            icon = Icons.Default.Home
+                        ),
+                        BottomNavItem(
+                            "Chat",
+                            "chat",
+                            icon = Icons.Default.Email
+                        ),
+                        BottomNavItem(
+                            "Settings",
+                            "settings",
+                            icon = Icons.Default.Settings
+                        )
+                    ),
+                        navController = navController,
+                        onItemClick = {
+                            navController.navigate(it.route)
+                        }
+                    )
+                }
+            ) {
+                Navigation(navController = navController, modifier = Modifier.padding(it))
+            }
+        }
     }
 }

app/src/main/java/com/lahsuak/apps/jetpackcomposebasic/model/BottomNavItem.kt

@@ -0,0 +1,10 @@
+package com.lahsuak.apps.jetpackcomposebasic.model
+
+import androidx.compose.ui.graphics.vector.ImageVector
+
+data class BottomNavItem(
+    val name: String,
+    val route: String,
+    val icon: ImageVector,
+    val badgeCount: Int = 0,
+)

build.gradle

@@ -1,10 +1,10 @@
 buildscript {
     ext {
-        compose_version = '1.3.2'
+        compose_version = '1.4.3'
     }
 }// Top-level build file where you can add configuration options common to all sub-projects/modules.
 plugins {
-    id 'com.android.application' version '7.3.0' apply false
-    id 'com.android.library' version '7.3.0' apply false
-    id 'org.jetbrains.kotlin.android' version '1.6.10' apply false
+    id 'com.android.application' version '8.0.2' apply false
+    id 'com.android.library' version '8.0.2' apply false
+    id 'org.jetbrains.kotlin.android' version '1.8.10' apply false
 }