feat(ui): update and animate switch camera button (#162)

* feat(ui): animate and update switch camera button

* refactor: remove empty function override

* feat(ui): use strokes around image preview and flip camera button

* docs: update changelog

Author: naveensingh

CHANGELOG.md

@@ -7,6 +7,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [Unreleased]
 ### Changed
 - Swapped positions of camera switch and image preview buttons ([#157])
+- Updated and animated the switch camera button
 
 ## [1.2.0] - 2025-09-09
 ### Added

app/src/main/kotlin/org/fossify/camera/activities/MainActivity.kt

@@ -1,7 +1,7 @@
 package org.fossify.camera.activities
 
+import android.animation.ObjectAnimator
 import android.annotation.SuppressLint
-import android.app.Activity
 import android.content.Intent
 import android.content.res.ColorStateList
 import android.graphics.Bitmap
@@ -15,6 +15,7 @@ import android.widget.LinearLayout
 import androidx.constraintlayout.widget.ConstraintSet
 import androidx.core.content.ContextCompat
 import androidx.core.view.*
+import androidx.interpolator.view.animation.FastOutSlowInInterpolator
 import androidx.transition.*
 import com.bumptech.glide.Glide
 import com.bumptech.glide.load.engine.DiskCacheStrategy
@@ -45,11 +46,12 @@ import kotlin.math.abs
 
 class MainActivity : SimpleActivity(), PhotoProcessor.MediaSavedListener, CameraXPreviewListener {
     private companion object {
-        const val CAPTURE_ANIMATION_DURATION = 500L
-        const val PHOTO_MODE_INDEX = 1
-        const val VIDEO_MODE_INDEX = 0
+        private const val ANIMATION_DURATION = 500L
+        private const val PHOTO_MODE_INDEX = 1
+        private const val VIDEO_MODE_INDEX = 0
         private const val MIN_SWIPE_DISTANCE_X = 100
         private const val TIMER_2_SECONDS = 2001
+        private const val SWITCH_CAMERA_ROTATION_ANGLE = 180f
     }
 
     private val binding by viewBinding(ActivityMainBinding::inflate)
@@ -372,7 +374,11 @@ class MainActivity : SimpleActivity(), PhotoProcessor.MediaSavedListener, Camera
 
     private fun initButtons() = binding.apply {
         timerText.setFactory { layoutInflater.inflate(R.layout.timer_text, null) }
-        toggleCamera.setOnClickListener { mPreview!!.toggleFrontBackCamera() }
+        toggleCamera.setOnClickListener {
+            animateCameraToggle()
+            mPreview!!.toggleFrontBackCamera()
+        }
+
         lastPhotoVideoPreview.setOnClickListener { showLastMediaPreview() }
 
         layoutTop.apply {
@@ -423,6 +429,15 @@ class MainActivity : SimpleActivity(), PhotoProcessor.MediaSavedListener, Camera
         setTimerModeIcon(config.timerMode)
     }
 
+    private fun animateCameraToggle() {
+        ObjectAnimator.ofFloat(binding.toggleCamera, "rotation", 0f, SWITCH_CAMERA_ROTATION_ANGLE)
+            .apply {
+                duration = ANIMATION_DURATION
+                interpolator = FastOutSlowInInterpolator()
+                start()
+            }
+    }
+
     private fun selectTimerMode(timerMode: TimerMode) {
         config.timerMode = timerMode
         setTimerModeIcon(timerMode)
@@ -565,7 +580,7 @@ class MainActivity : SimpleActivity(), PhotoProcessor.MediaSavedListener, Camera
         runOnUiThread {
             if (!isDestroyed) {
                 val options = RequestOptions()
-                    .centerCrop()
+                    .circleCrop()
                     .diskCacheStrategy(DiskCacheStrategy.NONE)
 
                 Glide.with(this)
@@ -685,10 +700,6 @@ class MainActivity : SimpleActivity(), PhotoProcessor.MediaSavedListener, Camera
         }
     }
 
-    override fun onChangeCamera(frontCamera: Boolean) {
-        binding.toggleCamera.setImageResource(if (frontCamera) R.drawable.ic_camera_rear_vector else R.drawable.ic_camera_front_vector)
-    }
-
     override fun onPhotoCaptureStart() {
         toggleActionButtons(enabled = false)
     }
@@ -709,7 +720,7 @@ class MainActivity : SimpleActivity(), PhotoProcessor.MediaSavedListener, Camera
 
     override fun shutterAnimation() {
         binding.shutterAnimation.alpha = 1.0f
-        binding.shutterAnimation.animate().alpha(0f).setDuration(CAPTURE_ANIMATION_DURATION).start()
+        binding.shutterAnimation.animate().alpha(0f).setDuration(ANIMATION_DURATION).start()
     }
 
     override fun onMediaSaved(uri: Uri) {
@@ -719,14 +730,14 @@ class MainActivity : SimpleActivity(), PhotoProcessor.MediaSavedListener, Camera
             Intent().apply {
                 data = uri
                 flags = Intent.FLAG_GRANT_READ_URI_PERMISSION
-                setResult(Activity.RESULT_OK, this)
+                setResult(RESULT_OK, this)
             }
             finish()
         } else if (isVideoCaptureIntent()) {
             Intent().apply {
                 data = uri
                 flags = Intent.FLAG_GRANT_READ_URI_PERMISSION
-                setResult(Activity.RESULT_OK, this)
+                setResult(RESULT_OK, this)
             }
             finish()
         }
@@ -736,7 +747,7 @@ class MainActivity : SimpleActivity(), PhotoProcessor.MediaSavedListener, Camera
         if (isImageCaptureIntent()) {
             Intent().apply {
                 putExtra("data", bitmap)
-                setResult(Activity.RESULT_OK, this)
+                setResult(RESULT_OK, this)
             }
             finish()
         }
@@ -967,7 +978,7 @@ class MainActivity : SimpleActivity(), PhotoProcessor.MediaSavedListener, Camera
         }
 
         if (isImageCaptureIntent()) {
-            setResult(Activity.RESULT_OK)
+            setResult(RESULT_OK)
             finish()
         }
     }

app/src/main/kotlin/org/fossify/camera/implementations/CameraXPreviewListener.kt

@@ -10,7 +10,7 @@ interface CameraXPreviewListener {
     fun setCameraAvailable(available: Boolean) {}
     fun setHasFrontAndBackCamera(hasFrontAndBack: Boolean)
     fun setFlashAvailable(available: Boolean)
-    fun onChangeCamera(frontCamera: Boolean)
+    fun onChangeCamera(frontCamera: Boolean) {}
     fun shutterAnimation()
     fun onMediaSaved(uri: Uri)
     fun onImageCaptured(bitmap: Bitmap)

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

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<ripple xmlns:android="http://schemas.android.com/apk/res/android"
+    android:color="#80FFFFFF">
+    <item android:id="@android:id/mask">
+        <shape android:shape="rectangle">
+            <corners android:radius="100dp" />
+            <solid android:color="#FFFFFFFF" />
+        </shape>
+    </item>
+
+    <item>
+        <shape android:shape="rectangle">
+            <solid android:color="@android:color/transparent" />
+            <corners android:radius="100dp" />
+            <stroke
+                android:width="2dp"
+                android:color="#FFFFFFFF" />
+        </shape>
+    </item>
+</ripple>

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

@@ -0,0 +1,3 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="24dp" android:height="24dp" android:viewportWidth="960" android:viewportHeight="960">
+    <path android:pathData="M480 880q-128 0-230.5-73T104 616q-5-15 3-28t24-18q16-5 30.5 3.5T182 597q36 91 117 147t181 56q86 0 160-42.5T756 640h-76q-17 0-28.5-11.5T640 600q0-17 11.5-28.5T680 560h160q17 0 28.5 11.5T880 600v160q0 17-11.5 28.5T840 800q-17 0-28.5-11.5T800 760v-40q-57 76-141 118t-179 42zm0-720q-86 0-160 42.5T204 320h76q17 0 28.5 11.5T320 360q0 17-11.5 28.5T280 400H120q-17 0-28.5-11.5T80 360V200q0-17 11.5-28.5T120 160q17 0 28.5 11.5T160 200v40q57-76 141-118t179-42q128 0 230.5 73T856 344q5 15-3 28t-24 18q-16 5-30.5-3.5T778 363q-36-91-117-147t-181-56zm0 440q-50 0-85-35t-35-85q0-50 35-85t85-35q50 0 85 35t35 85q0 50-35 85t-85 35z" android:fillColor="#FFFFFFFF"/>
+</vector>

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

@@ -112,13 +112,13 @@
         tools:text="00:00"
         tools:visibility="visible" />
 
-
     <ImageView
         android:id="@+id/last_photo_video_preview"
         android:layout_width="@dimen/icon_size"
         android:layout_height="@dimen/icon_size"
+        android:background="@drawable/camera_button_background"
         android:contentDescription="@string/view_last_media"
-        android:padding="@dimen/medium_margin"
+        android:padding="@dimen/tiny_margin"
         app:layout_constraintBottom_toBottomOf="@id/shutter"
         app:layout_constraintEnd_toStartOf="@id/shutter"
         app:layout_constraintHorizontal_chainStyle="spread"
@@ -142,9 +142,10 @@
         android:id="@+id/toggle_camera"
         android:layout_width="@dimen/icon_size"
         android:layout_height="@dimen/icon_size"
+        android:background="@drawable/camera_button_background"
         android:contentDescription="@string/toggle_camera"
-        android:padding="@dimen/normal_margin"
-        android:src="@drawable/ic_camera_front_vector"
+        android:padding="@dimen/medium_margin"
+        android:src="@drawable/ic_flip_camera_vector"
         app:layout_constraintBottom_toBottomOf="@id/shutter"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toEndOf="@id/shutter"

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

@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
-    <dimen name="icon_size">64dp</dimen>
+    <dimen name="icon_size">56dp</dimen>
 </resources>

app/src/main/res/layout/activity_main.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
-    <dimen name="icon_size">56dp</dimen>
+    <dimen name="icon_size">48dp</dimen>
     <dimen name="large_icon_size">72dp</dimen>
     <dimen name="top_icon_size">48dp</dimen>
     <dimen name="toggle_icon_size">24dp</dimen>