diff --git a/app/src/main/java/com/f1rq/lifemap/MainActivity.kt b/app/src/main/java/com/f1rq/lifemap/MainActivity.kt index 6b1d68b..6fbbb4a 100644 --- a/app/src/main/java/com/f1rq/lifemap/MainActivity.kt +++ b/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 { - NavigationBar( - onWorldViewTapped = {}, - onListViewTapped = {} - ) + Scaffold( + topBar = { + TopBar() + }, + bottomBar = { + NavigationBar( + onWorldViewTapped = {}, + onListViewTapped = {} + ) + } + ) { innerPadding -> + MapView(Modifier.padding(innerPadding)) + } } } \ No newline at end of file diff --git a/app/src/main/java/com/f1rq/lifemap/components/AddEventCard.kt b/app/src/main/java/com/f1rq/lifemap/components/AddEventCard.kt index bb8c10c..f16275f 100644 --- a/app/src/main/java/com/f1rq/lifemap/components/AddEventCard.kt +++ b/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( diff --git a/app/src/main/java/com/f1rq/lifemap/components/NavBar.kt b/app/src/main/java/com/f1rq/lifemap/components/NavBar.kt index 6ecea4d..3d742eb 100644 --- a/app/src/main/java/com/f1rq/lifemap/components/NavBar.kt +++ b/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 + ) + } + } } } diff --git a/app/src/main/java/com/f1rq/lifemap/components/TopBar.kt b/app/src/main/java/com/f1rq/lifemap/components/TopBar.kt index 34cf6f2..1e8ccf9 100644 --- a/app/src/main/java/com/f1rq/lifemap/components/TopBar.kt +++ b/app/src/main/java/com/f1rq/lifemap/components/TopBar.kt @@ -29,8 +29,9 @@ fun TopBar( ) { Card( modifier = Modifier - .fillMaxWidth(), - shape = RoundedCornerShape( + .fillMaxWidth() + .padding(top = WindowInsets.statusBars.asPaddingValues().calculateTopPadding()), + shape = RoundedCornerShape( topStart = 0.dp, topEnd = 0.dp, bottomStart = 16.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 ), diff --git a/app/src/main/java/com/f1rq/lifemap/screens/ListView.kt b/app/src/main/java/com/f1rq/lifemap/screens/ListView.kt index e3d1513..43d03b2 100644 --- a/app/src/main/java/com/f1rq/lifemap/screens/ListView.kt +++ b/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") diff --git a/app/src/main/java/com/f1rq/lifemap/screens/MapView.kt b/app/src/main/java/com/f1rq/lifemap/screens/MapView.kt index f08f4cb..ede48a4 100644 --- a/app/src/main/java/com/f1rq/lifemap/screens/MapView.kt +++ b/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", diff --git a/app/src/main/res/drawable/navbar_worldview_button.xml b/app/src/main/res/drawable/navbar_mapview_button.xml similarity index 100% rename from app/src/main/res/drawable/navbar_worldview_button.xml rename to app/src/main/res/drawable/navbar_mapview_button.xml diff --git a/app/src/main/res/values/themes.xml b/app/src/main/res/values/themes.xml index 7a07302..c26f54f 100644 --- a/app/src/main/res/values/themes.xml +++ b/app/src/main/res/values/themes.xml @@ -1,5 +1,10 @@ - \ No newline at end of file