Update edge to edge

Author: Elforama

app/src/main/java/org/greenstand/android/TreeTracker/activities/TreeTrackerActivity.kt

@@ -17,7 +17,9 @@ package org.greenstand.android.TreeTracker.activities
 
 import android.os.Bundle
 import androidx.activity.ComponentActivity
+import androidx.activity.SystemBarStyle
 import androidx.activity.compose.setContent
+import androidx.activity.enableEdgeToEdge
 import androidx.compose.runtime.ExperimentalComposeApi
 import org.greenstand.android.TreeTracker.models.LanguageSwitcher
 import org.greenstand.android.TreeTracker.models.TreeTrackerViewModelFactory
@@ -37,6 +39,15 @@ class TreeTrackerActivity : ComponentActivity() {
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
 
+        enableEdgeToEdge(
+            statusBarStyle = SystemBarStyle.dark(
+                scrim = android.graphics.Color.argb(128, 0, 0, 0) // 50% black scrim
+            ),
+            navigationBarStyle = SystemBarStyle.dark(
+                scrim = android.graphics.Color.argb(128, 0, 0, 0)
+            )
+        )
+
         languageSwitcher.applyCurrentLanguage(this)
 
         setContent {

app/src/main/java/org/greenstand/android/TreeTracker/camera/ImageReviewScreen.kt

@@ -18,7 +18,12 @@ package org.greenstand.android.TreeTracker.camera
 import android.app.Activity
 import android.content.Intent
 import androidx.appcompat.app.AppCompatActivity
-import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.navigationBarsPadding
+import androidx.compose.foundation.layout.padding
 import androidx.compose.material.Scaffold
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
@@ -28,7 +33,8 @@ import androidx.compose.ui.unit.dp
 import org.greenstand.android.TreeTracker.activities.CaptureImageContract
 import org.greenstand.android.TreeTracker.models.NavRoute
 import org.greenstand.android.TreeTracker.root.LocalNavHostController
-import org.greenstand.android.TreeTracker.view.*
+import org.greenstand.android.TreeTracker.view.ApprovalButton
+import org.greenstand.android.TreeTracker.view.LocalImage
 
 @Composable
 fun ImageReviewScreen(photoPath: String) {
@@ -41,6 +47,7 @@ fun ImageReviewScreen(photoPath: String) {
             Row(
                 modifier = Modifier
                     .fillMaxWidth()
+                    .navigationBarsPadding()
                     .padding(bottom = 12.dp),
                 horizontalArrangement = Arrangement.Center,
             ) {

app/src/main/java/org/greenstand/android/TreeTracker/camera/SelfieScreen.kt

@@ -19,7 +19,9 @@ import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.aspectRatio
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.navigationBarsPadding
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.statusBarsPadding
 import androidx.compose.material.Scaffold
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
@@ -49,13 +51,15 @@ fun SelfieScreen() {
     Scaffold(
         topBar = {
             ActionBar(
+                modifier = Modifier.statusBarsPadding(),
                 centerAction = {
                     TopBarTitle()
                 },
             )
         },
         bottomBar = {
             ActionBar(
+                modifier = Modifier.navigationBarsPadding(),
                 rightAction = {
                     InfoButton(
                         modifier = Modifier.align(Alignment.Center),
@@ -80,6 +84,7 @@ fun SelfieScreen() {
         Box(
             modifier = Modifier
                 .fillMaxSize()
+                .padding(it)
                 .padding(bottom = 10.dp),
             contentAlignment = Alignment.BottomCenter
         ) {

app/src/main/java/org/greenstand/android/TreeTracker/capture/TreeCaptureScreen.kt

@@ -26,8 +26,10 @@ import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.navigationBarsPadding
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.statusBarsPadding
 import androidx.compose.foundation.layout.wrapContentHeight
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.CircularProgressIndicator
@@ -95,7 +97,9 @@ fun TreeCaptureScreen(
     Scaffold(
         bottomBar = {
             ActionBar(
-                modifier = Modifier.background(color = AppColors.Gray),
+                modifier = Modifier
+                    .navigationBarsPadding()
+                    .background(color = AppColors.Gray),
                 leftAction = {
                     ArrowButton(
                         isLeft = true,
@@ -129,7 +133,7 @@ fun TreeCaptureScreen(
                 }
             )
         }
-    ) {
+    ) { padding ->
         if (state.isLocationAvailable == false) {
             CustomDialog(
                 dialogIcon = painterResource(id = R.drawable.error_outline),
@@ -162,6 +166,7 @@ fun TreeCaptureScreen(
             }
         )
         ActionBar(
+            modifier = Modifier.background(Color.Black).statusBarsPadding(),
             leftAction = {
                 UserImageButton(
                     onClick = {
@@ -204,15 +209,18 @@ fun TreeCaptureScreen(
 }
 
 @Composable
-fun CaptureCustomLoading(isLoading: Boolean, progress: Float) {
+fun CaptureCustomLoading(
+    modifier: Modifier = Modifier,
+    isLoading: Boolean,
+    progress: Float
+) {
     if (isLoading) {
         Box(
-            modifier = Modifier
+            modifier = modifier
                 .padding(bottom = 90.dp)
                 .fillMaxSize(),
             contentAlignment = Alignment.BottomCenter
         ) {
-
             Column(
                 modifier = Modifier
                     .align(Alignment.BottomCenter)

app/src/main/java/org/greenstand/android/TreeTracker/capture/TreeImageReviewScreen.kt

@@ -19,8 +19,10 @@ import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.navigationBarsPadding
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.statusBarsPadding
 import androidx.compose.material.Scaffold
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
@@ -57,8 +59,10 @@ fun TreeImageReviewScreen(
     val scope = rememberCoroutineScope()
 
     Scaffold(
+        modifier = Modifier,
         topBar = {
             ActionBar(
+                modifier = Modifier.statusBarsPadding(),
                 centerAction = {
                     TreeTrackerButton(
                         modifier = Modifier
@@ -77,6 +81,7 @@ fun TreeImageReviewScreen(
             Row(
                 modifier = Modifier
                     .fillMaxWidth()
+                    .navigationBarsPadding()
                     .padding(bottom = 12.dp),
                 horizontalArrangement = Arrangement.Center,
             ) {
@@ -117,7 +122,7 @@ fun TreeImageReviewScreen(
             )
         }
         LocalImage(
-            modifier = Modifier.fillMaxSize(),
+            modifier = Modifier.fillMaxSize().navigationBarsPadding(),
             imagePath = state.treeImagePath ?: "",
             contentDescription = null,
             contentScale = ContentScale.Fit

app/src/main/java/org/greenstand/android/TreeTracker/dashboard/DashboardScreen.kt

@@ -15,6 +15,7 @@
  */
 package org.greenstand.android.TreeTracker.dashboard
 
+import androidx.compose.animation.core.animateFloatAsState
 import androidx.compose.foundation.Canvas
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.clickable
@@ -27,18 +28,27 @@ import androidx.compose.foundation.layout.aspectRatio
 import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.navigationBarsPadding
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.statusBarsPadding
 import androidx.compose.foundation.layout.wrapContentHeight
 import androidx.compose.foundation.progressSemantics
 import androidx.compose.material.ButtonColors
+import androidx.compose.material.ProgressIndicatorDefaults
 import androidx.compose.material.Scaffold
 import androidx.compose.material.Snackbar
 import androidx.compose.material.SnackbarHost
 import androidx.compose.material.Text
 import androidx.compose.material.rememberScaffoldState
-import androidx.compose.runtime.*
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.ExperimentalComposeApi
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
 import androidx.compose.runtime.livedata.observeAsState
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Alignment.Companion.CenterVertically
 import androidx.compose.ui.Modifier
@@ -154,11 +164,9 @@ fun Dashboard(
                 }
             }
         }
-    ) {
+    ) { padding ->
         Column(
-            modifier = Modifier
-                .fillMaxSize()
-                .padding(bottom = 20.dp),
+            modifier = Modifier.fillMaxSize().navigationBarsPadding(),
             horizontalAlignment = Alignment.CenterHorizontally,
             verticalArrangement = Arrangement.Center,
         ) {
@@ -199,8 +207,7 @@ fun Dashboard(
                     verticalArrangement = Arrangement.SpaceBetween,
                 ) {
                     DashboardUploadProgressBar(
-                        progress = (state.treesRemainingToSync)
-                            .toFloat() / (state.totalTreesToSync),
+                        progress = state.uploadProgress,
                         modifier = Modifier.weight(1f),
                     )
                     Text(
@@ -254,6 +261,7 @@ fun Dashboard(
 fun DashboardTopBar(state: DashboardState,
                     onSettingsClicked: () -> Unit = { }, onOrgClicked: () -> Unit) {
     ActionBar(
+        modifier = Modifier.statusBarsPadding(),
         leftAction = {
             Box(modifier = Modifier
                 .padding( 10.dp)
@@ -304,10 +312,14 @@ fun DashboardUploadProgressBar(
     val stroke = with(LocalDensity.current) {
         Stroke(width = strokeWidth.toPx(), cap = StrokeCap.Butt)
     }
+    val animatedProgress by animateFloatAsState(
+        targetValue = progress,
+        animationSpec = ProgressIndicatorDefaults.ProgressAnimationSpec
+    )
 
     Canvas(
         modifier = modifier
-            .progressSemantics(progress)
+            .progressSemantics(animatedProgress)
             .fillMaxWidth()
     ) {
         val diameterOffset = stroke.width / 2
@@ -328,7 +340,7 @@ fun DashboardUploadProgressBar(
         )
 
         drawProgress(AppColors.MediumGray, 180f) // Background progress.
-        drawProgress(AppColors.Orange, progress * 180f) // Foreground progress.
+        drawProgress(AppColors.Orange, animatedProgress * 180f) // Foreground progress.
     }
 }
 
@@ -403,4 +415,4 @@ fun DashboardScreen_Preview(
     @PreviewParameter(DashboardPreviewParameter::class) viewModel: DashboardViewModel
 ) {
     DashboardScreen(viewModel = viewModel)
-}
+}

app/src/main/java/org/greenstand/android/TreeTracker/dashboard/DashboardViewModel.kt

@@ -52,7 +52,9 @@ data class DashboardState(
     val isOrgButtonEnabled: Boolean = false,
     val showUnreadMessageNotification: Boolean = false,
     val showTreeSyncReminderDialog: Boolean = false
-)
+) {
+    val uploadProgress: Float = treesRemainingToSync.toFloat() / totalTreesToSync
+}
 
 class DashboardViewModel(
     private val dao: TreeTrackerDAO,