Add UI for Progress Indicator and Postview

- UI to show the processing progress indicator - this will animate the progress on each progress update - UI to show the postview Test: manually tested using S24
android · May 18, 2024 · 2e47ccb · 2e47ccb
1 parent 0b6ce4b
commit 2e47ccb
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 0 deletions.
diff --git a/...ions/app/src/main/java/com/example/android/cameraxextensions/ui/CameraExtensionsScreen.kt b/...ions/app/src/main/java/com/example/android/cameraxextensions/ui/CameraExtensionsScreen.kt
@@ -18,8 +18,10 @@ package com.example.android.cameraxextensions.ui
 
 import android.animation.Animator
 import android.animation.AnimatorListenerAdapter
+import android.animation.ObjectAnimator
 import android.annotation.SuppressLint
 import android.content.Context
+import android.graphics.Bitmap
 import android.net.Uri
 import android.util.TypedValue
 import android.view.GestureDetector.SimpleOnGestureListener
@@ -46,9 +48,11 @@ import com.example.android.cameraxextensions.model.CameraUiAction
 import com.example.android.cameraxextensions.viewstate.CameraPreviewScreenViewState
 import com.example.android.cameraxextensions.viewstate.CaptureScreenViewState
 import com.example.android.cameraxextensions.viewstate.PostCaptureScreenViewState
+import com.google.android.material.progressindicator.CircularProgressIndicator
 import kotlinx.coroutines.flow.Flow
 import kotlinx.coroutines.flow.MutableSharedFlow
 import kotlinx.coroutines.launch
+import kotlin.math.max
 
 /**
  * Displays the camera preview and captured photo.
@@ -63,6 +67,7 @@ class CameraExtensionsScreen(private val root: View) {
         private const val SPRING_STIFFNESS_ALPHA_OUT = 100f
         private const val SPRING_STIFFNESS = 800f
         private const val SPRING_DAMPING_RATIO = 0.35f
+        private const val MAX_PROGRESS_ANIM_DURATION_MS = 3000
     }
 
     private val context: Context = root.context
@@ -79,6 +84,9 @@ class CameraExtensionsScreen(private val root: View) {
     private val permissionsRationale: TextView = root.findViewById(R.id.permissionsRationale)
     private val permissionsRequestButton: TextView =
         root.findViewById(R.id.permissionsRequestButton)
+    private val photoPostview: ImageView = root.findViewById(R.id.photoPostview)
+    private val processProgressIndicator: CircularProgressIndicator =
+        root.findViewById(R.id.processProgressIndicator)
 
     val previewView: PreviewView = root.findViewById(R.id.previewView)
 
@@ -216,6 +224,30 @@ class CameraExtensionsScreen(private val root: View) {
         }
     }
 
+    private fun showPostview(bitmap: Bitmap) {
+        if (photoPostview.isVisible) return
+        photoPostview.isVisible = true
+        photoPostview.load(bitmap)
+    }
+
+    private fun hidePostview() {
+        photoPostview.isVisible = false
+    }
+
+    private fun showProcessProgressIndicator(progress: Int) {
+        processProgressIndicator.isVisible = true
+        ObjectAnimator.ofInt(processProgressIndicator, "progress", progress).apply {
+            val currentProgress = processProgressIndicator.progress
+            val progressStep = max(0, progress - currentProgress)
+            duration = (progressStep / 100f * MAX_PROGRESS_ANIM_DURATION_MS).toLong()
+            start()
+        }
+    }
+
+    private fun hideProcessProgressIndicator() {
+        processProgressIndicator.isVisible = false
+    }
+
     private fun showPhoto(uri: Uri?) {
         if (uri == null) return
         photoPreview.isVisible = true
@@ -237,6 +269,18 @@ class CameraExtensionsScreen(private val root: View) {
 
         extensionSelector.isVisible = state.extensionsSelectorViewState.isVisible
         extensionsAdapter.submitList(state.extensionsSelectorViewState.extensions)
+
+        if (state.postviewViewState.isVisible) {
+            showPostview(state.postviewViewState.bitmap!!)
+        } else {
+            hidePostview()
+        }
+
+        if (state.processProgressViewState.isVisible) {
+            showProcessProgressIndicator(state.processProgressViewState.progress)
+        } else {
+            hideProcessProgressIndicator()
+        }
     }
 
     private fun onItemClick(view: View) {

diff --git a/CameraXExtensions/app/src/main/res/layout/activity_main.xml b/CameraXExtensions/app/src/main/res/layout/activity_main.xml
@@ -73,6 +73,17 @@
         app:srcCompat="@drawable/ic_flip_camera_android"
         app:tint="@color/button" />
 
+    <androidx.appcompat.widget.AppCompatImageView
+        android:id="@+id/photoPostview"
+        android:layout_width="0dp"
+        android:layout_height="0dp"
+        android:visibility="gone"
+        android:scaleType="centerCrop"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toTopOf="parent" />
+
     <androidx.appcompat.widget.AppCompatImageView
         android:id="@+id/photoPreview"
         android:layout_width="0dp"
@@ -97,6 +108,21 @@
         app:srcCompat="@drawable/ic_close"
         app:tint="@color/button" />
 
+    <com.google.android.material.progressindicator.CircularProgressIndicator
+        android:id="@+id/processProgressIndicator"
+        android:layout_width="80dp"
+        android:layout_height="80dp"
+        android:visibility="gone"
+        app:indicatorSize="80dp"
+        app:indicatorColor="#FFBE0B"
+        app:trackColor="#272727"
+        app:trackThickness="4dp"
+        app:trackCornerRadius="2dp"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toTopOf="parent" />
+
     <androidx.appcompat.widget.LinearLayoutCompat
         android:id="@+id/permissionsRationaleContainer"
         android:layout_width="0dp"