made the bottom bar

app/build.gradle.kts

@@ -67,6 +67,8 @@ dependencies {
     implementation(libs.androidx.window)
     implementation(libs.androidx.work.runtime.ktx)
     implementation(libs.androidx.appcompat)
+    implementation(libs.androidx.navigation.runtime.ktx)
+    implementation(libs.androidx.navigation.compose)
     testImplementation(libs.junit)
     androidTestImplementation(libs.androidx.junit)
     androidTestImplementation(libs.androidx.espresso.core)

app/src/main/java/com/mensinator/app/CalendarScreen.kt

@@ -46,7 +46,7 @@ This file creates the calendar. A sort of "main screen".
  */
 
 @Composable
-fun CalendarScreen(onScreenProtectionChanged: (Boolean) -> Unit) {
+fun CalendarScreen() {
     val context = LocalContext.current
 
     // For accessing database functions
@@ -98,12 +98,6 @@ fun CalendarScreen(onScreenProtectionChanged: (Boolean) -> Unit) {
 
     val isScreenProtectionEnabled = remember { mutableStateOf(true) }
 
-    // If protectScreen is 1, it should protect the screen
-    // If protectScreen is 0, should not protect screen(allows prints and screen visibility in recent apps)
-    val protectScreen = dbHelper.getSettingByKey("screen_protection")?.value?.toIntOrNull()?:1
-    Log.d("screenProtectionUI", "protect screen value $protectScreen")
-    onScreenProtectionChanged(protectScreen != 0)
-
     // How many days before next period a notification should be sent to user
     // If set to 0, do not send notification
     // From app_settings in the database
@@ -230,7 +224,6 @@ fun CalendarScreen(onScreenProtectionChanged: (Boolean) -> Unit) {
         modifier = Modifier
             .fillMaxSize()
             .padding(16.dp)
-            .systemBarsPadding()
             .verticalScroll(rememberScrollState())
     )
     {

app/src/main/java/com/mensinator/app/MainActivity.kt

@@ -1,10 +1,10 @@
 package com.mensinator.app
 import android.os.Bundle
-import android.util.Log
 import android.view.WindowManager
 import androidx.activity.compose.setContent
 import androidx.activity.enableEdgeToEdge
 import androidx.appcompat.app.AppCompatActivity
+import com.mensinator.app.navigation.BottomBar
 import com.mensinator.app.ui.theme.MensinatorTheme
 
 class MainActivity : AppCompatActivity() {
@@ -13,9 +13,8 @@ class MainActivity : AppCompatActivity() {
         enableEdgeToEdge()
         setContent {
             MensinatorTheme {
-                // Call the CalendarScreen composable from the ui package
-                CalendarScreen{
-                    isScreenProtectionEnabled->
+                BottomBar {
+                    isScreenProtectionEnabled ->
                     // Sets the flags for screen protection if
                     // isScreenProtectionEnabled == true
                     // If isScreenProtectionEnabled == false it removes the flags
@@ -27,7 +26,6 @@ class MainActivity : AppCompatActivity() {
                     }else{
                         window?.clearFlags(WindowManager.LayoutParams.FLAG_SECURE)
                     }
-
                 }
             }
         }

app/src/main/java/com/mensinator/app/navigation/BarItem.kt

@@ -0,0 +1,9 @@
+package com.mensinator.app.navigation
+
+import androidx.annotation.StringRes
+
+data class BarItem(
+    @StringRes val title: Int,
+    val imageSelected: Int,
+    val imageUnSelected: Int
+)

app/src/main/java/com/mensinator/app/navigation/bottomBar.kt

@@ -0,0 +1,172 @@
+package com.mensinator.app.navigation
+
+import android.util.Log
+import androidx.compose.foundation.layout.padding
+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.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableIntStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.res.vectorResource
+import androidx.navigation.NavGraph.Companion.findStartDestination
+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.mensinator.app.CalendarScreen
+import com.mensinator.app.PeriodDatabaseHelper
+import com.mensinator.app.R
+
+enum class Screens {
+    Home,
+    Symptoms,
+    Statistic,
+    Settings
+}
+
+@Composable
+fun BottomBar(
+    navController: NavHostController = rememberNavController(),
+    onScreenProtectionChanged: (Boolean) -> Unit?,
+) {
+    val context = LocalContext.current
+    // For accessing database functions
+    val dbHelper = remember { PeriodDatabaseHelper(context) }
+    // If protectScreen is 1, it should protect the screen
+    // If protectScreen is 0, should not protect screen(allows prints and screen visibility in recent apps)
+    val protectScreen = dbHelper.getSettingByKey("screen_protection")?.value?.toIntOrNull() ?: 1
+    Log.d("screenProtectionUI", "protect screen value $protectScreen")
+    onScreenProtectionChanged(protectScreen != 0)
+
+    val backStackEntry by navController.currentBackStackEntryAsState()
+    val currentScreen = Screens.valueOf(
+        backStackEntry?.destination?.route ?: Screens.Home.name
+    )
+    var selectedItemIndex by rememberSaveable { mutableIntStateOf(0) }
+
+    LaunchedEffect(currentScreen) { //for navigating back with back phone arrow
+        val newIndex = when (currentScreen) {//this is not the best practise but works the same
+            Screens.Home -> 0
+            Screens.Statistic -> 1
+            Screens.Symptoms -> 2
+            Screens.Settings -> 3
+            else -> 0 // Default value
+        }
+
+        if (selectedItemIndex != newIndex) {
+            selectedItemIndex = newIndex
+        }
+    }
+
+    Scaffold(
+        bottomBar = {
+            val barItems = listOf(
+                BarItem(
+                    R.string.home_page,
+                    R.drawable.home_field,
+                    R.drawable.home_field //here you can add not_field icon if you want. when its not selected
+                ),
+                BarItem(
+                    R.string.statisic_page,
+                    R.drawable.outline_bar_chart_24,
+                    R.drawable.outline_bar_chart_24
+                ),
+                BarItem(
+                    R.string.symptoms_page,
+                    R.drawable.baseline_bloodtype_24,
+                    R.drawable.baseline_bloodtype_24
+                ),
+                BarItem(
+                    R.string.settings_page,
+                    R.drawable.settings_24px,
+                    R.drawable.settings_24px
+                ),
+            )
+            NavigationBar {
+                barItems.forEachIndexed { index, item ->
+                    NavigationBarItem(
+                        onClick = {
+                            if (selectedItemIndex != index) {
+                                when (index) {
+                                    0 -> navController.navigate(Screens.Home.name) {
+                                        popUpTo(navController.graph.findStartDestination().id) {
+                                            saveState = true
+                                        }
+                                        launchSingleTop = true
+                                        restoreState = true
+                                    }
+
+                                    1 -> navController.navigate(Screens.Statistic.name) {
+                                        popUpTo(navController.graph.findStartDestination().id) {
+                                            saveState = true
+                                        }
+                                        launchSingleTop = true
+                                        restoreState = true
+                                    }
+
+                                    2 -> navController.navigate(Screens.Symptoms.name) {
+                                        popUpTo(navController.graph.findStartDestination().id) {
+                                            saveState = true
+                                        }
+                                        launchSingleTop = true
+                                        restoreState = true
+                                    }
+
+                                    3 -> navController.navigate(Screens.Settings.name) {
+                                        popUpTo(navController.graph.findStartDestination().id) {
+                                            saveState = true
+                                        }
+                                        launchSingleTop = true
+                                        restoreState = true
+                                    }
+                                }
+                                selectedItemIndex = index
+                            }
+                        },
+                        selected = selectedItemIndex == index,
+                        label = { Text(text = stringResource(item.title)) },
+                        icon = {
+                            Icon(
+                                imageVector = if (index == selectedItemIndex) ImageVector.vectorResource(
+                                    id = item.imageSelected
+                                ) else ImageVector.vectorResource(id = item.imageUnSelected),
+                                contentDescription = stringResource(id = item.title)
+                            )
+                        }
+                    )
+                }
+            }
+        }
+    ) { paddingValues ->
+        NavHost(
+            navController = navController,
+            startDestination = Screens.Home.name,
+            modifier = Modifier.padding(paddingValues)
+        ) {
+            composable(route = Screens.Home.name) {//create a new file for every page and pass it inside the composable
+                CalendarScreen()
+            }
+            composable(route = Screens.Statistic.name) {
+                // here you add the page that you want to open(Statistic)
+            }
+            composable(route = Screens.Symptoms.name) {
+                // here you add the page that you want to open(Symptoms)
+            }
+            composable(route = Screens.Settings.name) {
+                // here you add the page that you want to open(Settings)
+            }
+        }
+    }
+}

app/src/main/res/drawable/bar_chart_24px.xml

@@ -0,0 +1,10 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="960"
+    android:viewportHeight="960"
+    android:tint="?attr/colorControlNormal">
+  <path
+      android:fillColor="@android:color/white"
+      android:pathData="M680,800Q663,800 651.5,788.5Q640,777 640,760L640,560Q640,543 651.5,531.5Q663,520 680,520L760,520Q777,520 788.5,531.5Q800,543 800,560L800,760Q800,777 788.5,788.5Q777,800 760,800L680,800ZM440,800Q423,800 411.5,788.5Q400,777 400,760L400,200Q400,183 411.5,171.5Q423,160 440,160L520,160Q537,160 548.5,171.5Q560,183 560,200L560,760Q560,777 548.5,788.5Q537,800 520,800L440,800ZM200,800Q183,800 171.5,788.5Q160,777 160,760L160,400Q160,383 171.5,371.5Q183,360 200,360L280,360Q297,360 308.5,371.5Q320,383 320,400L320,760Q320,777 308.5,788.5Q297,800 280,800L200,800Z"/>
+</vector>

app/src/main/res/drawable/home.xml

@@ -0,0 +1,10 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="960"
+    android:viewportHeight="960"
+    android:tint="?attr/colorControlNormal">
+  <path
+      android:fillColor="@android:color/white"
+      android:pathData="M240,760L360,760L360,560Q360,543 371.5,531.5Q383,520 400,520L560,520Q577,520 588.5,531.5Q600,543 600,560L600,760L720,760L720,400Q720,400 720,400Q720,400 720,400L480,220Q480,220 480,220Q480,220 480,220L240,400Q240,400 240,400Q240,400 240,400L240,760ZM160,760L160,400Q160,381 168.5,364Q177,347 192,336L432,156Q453,140 480,140Q507,140 528,156L768,336Q783,347 791.5,364Q800,381 800,400L800,760Q800,793 776.5,816.5Q753,840 720,840L560,840Q543,840 531.5,828.5Q520,817 520,800L520,600Q520,600 520,600Q520,600 520,600L440,600Q440,600 440,600Q440,600 440,600L440,800Q440,817 428.5,828.5Q417,840 400,840L240,840Q207,840 183.5,816.5Q160,793 160,760ZM480,490L480,490L480,490Q480,490 480,490Q480,490 480,490L480,490L480,490L480,490L480,490Q480,490 480,490Q480,490 480,490L480,490Q480,490 480,490Q480,490 480,490L480,490Z"/>
+</vector>

app/src/main/res/drawable/home_field.xml

@@ -0,0 +1,10 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="960"
+    android:viewportHeight="960"
+    android:tint="?attr/colorControlNormal">
+  <path
+      android:fillColor="@android:color/white"
+      android:pathData="M160,760L160,400Q160,381 168.5,364Q177,347 192,336L432,156Q453,140 480,140Q507,140 528,156L768,336Q783,347 791.5,364Q800,381 800,400L800,760Q800,793 776.5,816.5Q753,840 720,840L600,840Q583,840 571.5,828.5Q560,817 560,800L560,600Q560,583 548.5,571.5Q537,560 520,560L440,560Q423,560 411.5,571.5Q400,583 400,600L400,800Q400,817 388.5,828.5Q377,840 360,840L240,840Q207,840 183.5,816.5Q160,793 160,760Z"/>
+</vector>

app/src/main/res/drawable/settings_24px.xml

@@ -0,0 +1,10 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="960"
+    android:viewportHeight="960"
+    android:tint="?attr/colorControlNormal">
+  <path
+      android:fillColor="@android:color/white"
+      android:pathData="M433,880Q406,880 386.5,862Q367,844 363,818L354,752Q341,747 329.5,740Q318,733 307,725L245,751Q220,762 195,753Q170,744 156,721L109,639Q95,616 101,590Q107,564 128,547L181,507Q180,500 180,493.5Q180,487 180,480Q180,473 180,466.5Q180,460 181,453L128,413Q107,396 101,370Q95,344 109,321L156,239Q170,216 195,207Q220,198 245,209L307,235Q318,227 330,220Q342,213 354,208L363,142Q367,116 386.5,98Q406,80 433,80L527,80Q554,80 573.5,98Q593,116 597,142L606,208Q619,213 630.5,220Q642,227 653,235L715,209Q740,198 765,207Q790,216 804,239L851,321Q865,344 859,370Q853,396 832,413L779,453Q780,460 780,466.5Q780,473 780,480Q780,487 780,493.5Q780,500 778,507L831,547Q852,564 858,590Q864,616 850,639L802,721Q788,744 763,753Q738,762 713,751L653,725Q642,733 630,740Q618,747 606,752L597,818Q593,844 573.5,862Q554,880 527,880L433,880ZM482,620Q540,620 581,579Q622,538 622,480Q622,422 581,381Q540,340 482,340Q423,340 382.5,381Q342,422 342,480Q342,538 382.5,579Q423,620 482,620Z"/>
+</vector>

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

@@ -16,6 +16,9 @@
     <string name="success_saved_ovulation">ওভুলেশন সফলভাবে সংরক্ষিত হয়েছে</string>
     <string name="no_date_selected_ovulation">ওভুলেশনের জন্য কোনো তারিখ নির্বাচিত হয়নি</string>
 
+    <!-- navigation -->
+    <string name="home_page">হোম পেজ</string>
+    <string name="statisic_page">পরিসংখ্যান</string>
 
     <!-- Settings -->
     <string name="app_settings">অ্যাপ সেটিংস</string>