add select finger animation and rounded corners to preview

Author: UrAvgCode

app/src/main/java/com/uravgcode/chooser/tutorial/presentation/page/ModePage.kt

@@ -5,14 +5,20 @@ import androidx.compose.animation.graphics.ExperimentalAnimationGraphicsApi
 import androidx.compose.animation.graphics.res.animatedVectorResource
 import androidx.compose.animation.graphics.res.rememberAnimatedVectorPainter
 import androidx.compose.animation.graphics.vector.AnimatedImageVector
+import androidx.compose.foundation.BorderStroke
 import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.aspectRatio
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Card
+import androidx.compose.material3.CardColors
+import androidx.compose.material3.CardDefaults
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
@@ -24,6 +30,7 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.font.FontWeight
@@ -77,14 +84,29 @@ fun ModePage(
             textAlign = TextAlign.Center
         )
 
-        Image(
-            painter = rememberAnimatedVectorPainter(image, atEnd),
-            contentDescription = null,
-            modifier = Modifier
-                .fillMaxWidth(0.8f)
-                .aspectRatio(1f),
-            contentScale = ContentScale.Crop
-        )
+        Card(
+            modifier = Modifier.padding(8.dp),
+            shape = RoundedCornerShape(24.dp),
+            colors = CardColors(
+                containerColor = Color.Black,
+                contentColor = Color.White,
+                disabledContainerColor = Color.Black,
+                disabledContentColor = Color.White
+            ),
+            border = BorderStroke(
+                width = 2.dp,
+                color = MaterialTheme.colorScheme.outlineVariant
+            )
+        ) {
+            Image(
+                painter = rememberAnimatedVectorPainter(image, atEnd),
+                contentDescription = null,
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .aspectRatio(1f),
+                contentScale = ContentScale.Crop
+            )
+        }
 
         Text(
             text = previewDescription,

app/src/main/res/animator/fade_in_shrinking.xml

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<set xmlns:android="http://schemas.android.com/apk/res/android">
+    <objectAnimator
+        android:duration="250"
+        android:interpolator="@android:interpolator/accelerate_quad"
+        android:propertyName="scaleX"
+        android:valueFrom="4.1875"
+        android:valueTo="1.0"
+        android:valueType="floatType" />
+    <objectAnimator
+        android:duration="250"
+        android:interpolator="@android:interpolator/accelerate_quad"
+        android:propertyName="scaleY"
+        android:valueFrom="4.1875"
+        android:valueTo="1.0"
+        android:valueType="floatType" />
+</set>

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

@@ -3,6 +3,17 @@
     android:height="108dp"
     android:viewportWidth="108"
     android:viewportHeight="108">
+    <path
+        android:fillColor="#2988cc"
+        android:pathData="M-0,0h108v108h-108z" />
+    <group
+        android:name="black_radius"
+        android:pivotX="75"
+        android:pivotY="41">
+        <path
+            android:fillColor="#000"
+            android:pathData="M75,41m-24,0a24,24 0,1 1,48 0a24,24 0,1 1,-48 0" />
+    </group>
     <group
         android:name="disappearing_circle"
         android:pivotX="75"

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

@@ -3,4 +3,7 @@
     <target
         android:name="disappearing_circle"
         android:animation="@animator/fade_out_shrinking" />
+    <target
+        android:name="black_radius"
+        android:animation="@animator/fade_in_shrinking" />
 </animated-vector>