rebuilding components

app/src/main/java/com/f1rq/lifemap/MainActivity.kt

@@ -4,10 +4,12 @@ import android.os.Bundle
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.systemBarsPadding
 import androidx.compose.material3.Scaffold
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.core.view.WindowCompat
 import androidx.navigation.compose.NavHost
 import androidx.navigation.compose.composable
 import androidx.navigation.compose.currentBackStackEntryAsState
@@ -21,14 +23,15 @@ import com.f1rq.lifemap.ui.theme.LifeMapTheme
 import com.f1rq.lifemap.ui.theme.ActiveNavColor
 import com.f1rq.lifemap.ui.theme.InactiveNavColor
 import com.f1rq.lifemap.components.TopBar
+import com.f1rq.lifemap.components.NavBar
 
 class MainActivity : ComponentActivity() {
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
+        WindowCompat.setDecorFitsSystemWindows(window, false)
         setContent {
             LifeMapTheme {
                 val navController = rememberNavController()
-
                 Scaffold(
                     topBar = {
                           TopBar(
@@ -40,10 +43,10 @@ class MainActivity : ComponentActivity() {
                         val navBackStackEntry = navController.currentBackStackEntryAsState()
                         val currentRoute = navBackStackEntry.value?.destination?.route
 
-                        NavigationBar(
-                            onWorldViewTapped = { navController.navigate("mapview") },
-                            onListViewTapped = { navController.navigate("listview") },
-                            worldViewBackgroundColor = if (currentRoute == "mapview") ActiveNavColor else InactiveNavColor,
+                        NavBar(
+                            onMapViewClicked = { navController.navigate("mapview") },
+                            onListViewClicked = { navController.navigate("listview") },
+                            mapViewBackgroundColor = if (currentRoute == "mapview") ActiveNavColor else InactiveNavColor,
                             listViewBackgroundColor = if (currentRoute == "listview") ActiveNavColor else InactiveNavColor
                         )
                     }
@@ -68,9 +71,18 @@ class MainActivity : ComponentActivity() {
 @Composable
 fun GreetingPreview() {
     LifeMapTheme {
+        Scaffold(
+            topBar = {
+                TopBar()
+            },
+            bottomBar = {
                 NavigationBar(
                     onWorldViewTapped = {},
                     onListViewTapped = {}
                 )
             }
+        ) { innerPadding ->
+            MapView(Modifier.padding(innerPadding))
+        }
+    }
 }

app/src/main/java/com/f1rq/lifemap/components/AddEventCard.kt

@@ -30,7 +30,7 @@ fun AddEventCard(
     Card(
         modifier = modifier
             .fillMaxWidth()
-            .padding(16.dp),
+            .padding(8.dp),
         shape = RoundedCornerShape(16.dp),
         elevation = CardDefaults.cardElevation(defaultElevation = 6.dp),
         colors = CardDefaults.cardColors(

app/src/main/java/com/f1rq/lifemap/components/NavBar.kt

@@ -1,26 +1,100 @@
 package com.f1rq.lifemap.components
 
-
-import android.graphics.Color
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.requiredHeight
-import androidx.compose.foundation.layout.requiredWidth
+import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.tooling.preview.Preview
-
+import com.f1rq.lifemap.ui.theme.MainBG
+import com.f1rq.lifemap.ui.theme.InactiveNavColor
+import com.f1rq.lifemap.ui.theme.ActiveNavColor
+import com.f1rq.lifemap.ui.theme.ButtonColor
+import com.f1rq.lifemap.R.drawable.navbar_listview_button
+import com.f1rq.lifemap.R.drawable.navbar_mapview_button
 
 @Composable
 fun NavBar(
-    onWorldViewTapped: () -> Unit = {},
-    onListViewTapped: () -> Unit = {},
+    onMapViewClicked: () -> Unit = {},
+    onListViewClicked: () -> Unit = {},
+    mapViewBackgroundColor: Color = ActiveNavColor,
+    listViewBackgroundColor: Color = InactiveNavColor,
 ) {
-    Box(modifier = Modifier
-        .requiredWidth(24.0.dp)
-        .requiredHeight(24.0.dp)
+    Row(
+        modifier = Modifier
+            .fillMaxWidth()
+            .background(
+                color = MainBG,
+                shape = RoundedCornerShape(
+                    topStart = 16.dp,
+                    topEnd = 16.dp,
+                    bottomStart = 0.dp,
+                    bottomEnd = 0.dp
+                )
+            )
+            .padding(
+                top = 12.dp,
+                bottom = WindowInsets.navigationBars.asPaddingValues().calculateBottomPadding() + 6.dp,
+            ),
+        verticalAlignment = Alignment.CenterVertically
     ) {
+        // Left Half - Map View Button
+        Box(
+            modifier = Modifier
+                .weight(1f),
+            contentAlignment = Alignment.Center
+        ) {
+            IconButton(
+                onClick = onMapViewClicked,
+                modifier = Modifier
+                    .size(48.dp)
+                    .background(
+                        color = mapViewBackgroundColor,
+                        shape = RoundedCornerShape(16.dp)
+                    )
+            ) {
+                Icon(
+                    painter = painterResource(id = navbar_mapview_button),
+                    contentDescription = "Map View",
+                    modifier = Modifier
+                        .requiredSize(24.dp),
+                    tint = ButtonColor
+                )
+            }
+        }
 
+        // Right Half - List View Button
+        Box(
+            modifier = Modifier
+                .weight(1f),
+            contentAlignment = Alignment.Center
+        ) {
+            IconButton(
+                onClick = onListViewClicked,
+                modifier = Modifier
+                    .size(48.dp)
+                    .background(
+                        color = listViewBackgroundColor,
+                        shape = RoundedCornerShape(16.dp)
+                    )
+            ) {
+                Icon(
+                    painter = painterResource(id = navbar_listview_button),
+                    contentDescription = "List View",
+                    modifier = Modifier
+                        .requiredSize(24.dp),
+                    tint = ButtonColor
+                )
+            }
+        }
     }
 }
 

app/src/main/java/com/f1rq/lifemap/components/TopBar.kt

@@ -29,7 +29,8 @@ fun TopBar(
 ) {
     Card(
         modifier = Modifier
-            .fillMaxWidth(),
+            .fillMaxWidth()
+            .padding(top = WindowInsets.statusBars.asPaddingValues().calculateTopPadding()),
     shape = RoundedCornerShape(
             topStart = 0.dp,
             topEnd = 0.dp,
@@ -45,7 +46,7 @@ fun TopBar(
             modifier = Modifier
                 .padding(
                     start = 20.0.dp,
-                    top = 65.0.dp,
+                    top = 10.0.dp,
                     end = 20.0.dp,
                     bottom = 15.0.dp
                 ),

app/src/main/java/com/f1rq/lifemap/screens/ListView.kt

@@ -2,6 +2,7 @@ package com.f1rq.lifemap.screens
 
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.systemBarsPadding
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
@@ -10,7 +11,9 @@ import androidx.compose.ui.Modifier
 @Composable
 fun ListView(modifier: Modifier = Modifier) {
     Box(
-        modifier = Modifier.fillMaxSize(),
+        modifier = Modifier
+            .fillMaxSize()
+            .systemBarsPadding(),
         contentAlignment = Alignment.Center
     ) {
         Text("List view")

app/src/main/java/com/f1rq/lifemap/screens/MapView.kt

@@ -1,18 +1,23 @@
 package com.f1rq.lifemap.screens
 
+import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.systemBarsPadding
 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.tooling.preview.Preview
 import com.f1rq.lifemap.components.AddEventCard
 
 @Composable
 fun MapView(modifier: Modifier = Modifier) {
     Box(
-        modifier = Modifier.fillMaxSize()
+        modifier = Modifier
+            .fillMaxSize()
+            .systemBarsPadding()
     ) {
         Text(
             text = "Map view",

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

@@ -1,5 +1,10 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
 
-    <style name="Theme.LifeMap" parent="android:Theme.Material.Light.NoActionBar" />
+    <style name="Theme.LifeMap" parent="android:Theme.Material.Light.NoActionBar">
+        <item name="android:statusBarColor">@android:color/transparent</item>
+        <item name="android:navigationBarColor">@android:color/transparent</item>
+        <item name="android:windowTranslucentStatus">true</item>
+        <item name="android:windowTranslucentNavigation">true</item>
+    </style>
 </resources>