Merge pull request #1114 from Corvus400/feature/apply_animated_bookma…

…rk_icon [Proposal] ♻️ Animate the bookmark button on the session details screen.
DroidKaigi · Sep 8, 2023 · 761d195 · 761d195
2 parents d1b2cdd + cd62912
commit 761d195
Show file tree

Hide file tree

Showing 5 changed files with 110 additions and 14 deletions.
diff --git a/feature/sessions/build.gradle.kts b/feature/sessions/build.gradle.kts
@@ -8,6 +8,7 @@ dependencies {
     implementation(projects.core.designsystem)
     implementation(projects.core.ui)
     implementation(projects.core.model)
+    implementation(libs.animation.graphics.android)
     testImplementation(projects.core.testing)
 
     implementation(libs.composeHiltNavigtation)

diff --git a/.../io/github/droidkaigi/confsched2023/sessions/component/TimetableItemDetailBottomAppBar.kt b/.../io/github/droidkaigi/confsched2023/sessions/component/TimetableItemDetailBottomAppBar.kt
@@ -1,8 +1,11 @@
 package io.github.droidkaigi.confsched2023.sessions.component
 
+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.clickable
 import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.Bookmark
-import androidx.compose.material.icons.filled.BookmarkBorder
 import androidx.compose.material.icons.filled.Share
 import androidx.compose.material3.BottomAppBar
 import androidx.compose.material3.BottomAppBarDefaults
@@ -12,6 +15,10 @@ import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.Surface
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.res.painterResource
@@ -53,27 +60,54 @@ fun TimetableItemDetailBottomAppBar(
         },
         floatingActionButton = {
             FloatingActionButton(
-                onClick = { onBookmarkClick(timetableItem) },
+                onClick = {
+                    // NOOP ,
+                },
                 modifier = Modifier.testTag(TimetableItemDetailBookmarkIconTestTag),
                 containerColor = BottomAppBarDefaults.bottomAppBarFabColor,
                 elevation = FloatingActionButtonDefaults.bottomAppBarFabElevation(),
             ) {
-                if (isBookmarked) {
-                    Icon(
-                        imageVector = Icons.Filled.Bookmark,
-                        contentDescription = SessionsStrings.RemoveFromFavorites.asString(),
-                    )
-                } else {
-                    Icon(
-                        imageVector = Icons.Filled.BookmarkBorder,
-                        contentDescription = SessionsStrings.AddToFavorites.asString(),
-                    )
-                }
+                AnimatedBookmarkIcon(
+                    isBookmarked = isBookmarked,
+                    timetableItem = timetableItem,
+                    onClick = onBookmarkClick,
+                )
             }
         },
     )
 }
 
+@OptIn(ExperimentalAnimationGraphicsApi::class)
+@Composable
+fun AnimatedBookmarkIcon(
+    isBookmarked: Boolean,
+    timetableItem: TimetableItem,
+    onClick: (TimetableItem) -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    var atEnd by remember { mutableStateOf(false) }
+    val animatedBookmarkIcon = AnimatedImageVector.animatedVectorResource(
+        id = if (isBookmarked) {
+            R.drawable.animated_bookmark_icon_reverse
+        } else {
+            R.drawable.animated_bookmark_icon
+        },
+    )
+    Icon(
+        painter = rememberAnimatedVectorPainter(animatedBookmarkIcon, atEnd),
+        contentDescription = if (isBookmarked) {
+            SessionsStrings.RemoveFromFavorites.asString()
+        } else {
+            SessionsStrings.AddToFavorites.asString()
+        },
+        modifier = modifier
+            .clickable {
+                atEnd = atEnd.not()
+                onClick(timetableItem)
+            },
+    )
+}
+
 @MultiThemePreviews
 @MultiLanguagePreviews
 @Composable

diff --git a/feature/sessions/src/main/res/drawable/animated_bookmark_icon.xml b/feature/sessions/src/main/res/drawable/animated_bookmark_icon.xml
@@ -0,0 +1,30 @@
+<animated-vector
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:aapt="http://schemas.android.com/aapt">
+    <aapt:attr name="android:drawable">
+        <vector
+            android:name="vector"
+            android:width="14dp"
+            android:height="18dp"
+            android:viewportWidth="14"
+            android:viewportHeight="18">
+            <path
+                android:name="path"
+                android:pathData="M 2 0 L 12 0 C 13.1 0 14 0.9 14 2 L 14 18 L 7 15 L 0 18 L 0 2 C 0 0.9 0.9 0 2 0 Z M 7 12.82 L 12 15 L 12 2 L 2 2 L 2 15 L 7 12.82 Z"
+                android:fillColor="#191c1a"
+                android:strokeWidth="1"
+                android:fillType="evenOdd"/>
+        </vector>
+    </aapt:attr>
+    <target android:name="path">
+        <aapt:attr name="android:animation">
+            <objectAnimator
+                android:propertyName="pathData"
+                android:duration="100"
+                android:valueFrom="M 12 0 L 2 0 L 2 0 C 0.9 0 0 0.9 0 2 L 0 18 L 7 15 L 14 18 L 14 2 C 14 1.45 13.775 0.95 13.412 0.588 C 13.05 0.225 12.55 0 12 0 M 7 12.82 L 2 15 L 2 2 L 12 2 L 12 15 L 7 12.82 L 7 12.82"
+                android:valueTo="M 12 0 L 7 0 L 2 0 C 0.9 0 0 0.9 0 2 L 0 18 L 7 15 L 14 18 L 14 2 C 14 0.9 13.1 0 12 0 C 12 0 12 0 12 0 M 7 7 L 7 7 L 7 7 L 7 7 L 7 7 L 7 7 L 7 7"
+                android:valueType="pathType"
+                android:interpolator="@android:interpolator/fast_out_slow_in"/>
+        </aapt:attr>
+    </target>
+</animated-vector>
diff --git a/feature/sessions/src/main/res/drawable/animated_bookmark_icon_reverse.xml b/feature/sessions/src/main/res/drawable/animated_bookmark_icon_reverse.xml
@@ -0,0 +1,30 @@
+<animated-vector
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:aapt="http://schemas.android.com/aapt">
+    <aapt:attr name="android:drawable">
+        <vector
+            android:name="vector"
+            android:width="14dp"
+            android:height="18dp"
+            android:viewportWidth="14"
+            android:viewportHeight="18">
+            <path
+                android:name="path"
+                android:pathData="M 2 0 L 12 0 C 13.1 0 14 0.9 14 2 L 14 18 L 7 15 L 0 18 L 0 2 C 0 0.9 0.9 0 2 0 Z M 7 12.82 L 12 15 L 12 2 L 2 2 L 2 15 L 7 12.82 Z"
+                android:fillColor="#191c1a"
+                android:strokeWidth="1"
+                android:fillType="evenOdd"/>
+        </vector>
+    </aapt:attr>
+    <target android:name="path">
+        <aapt:attr name="android:animation">
+            <objectAnimator
+                android:propertyName="pathData"
+                android:duration="100"
+                android:valueFrom="M 12 0 L 7 0 L 2 0 C 0.9 0 0 0.9 0 2 L 0 18 L 7 15 L 14 18 L 14 2 C 14 0.9 13.1 0 12 0 C 12 0 12 0 12 0 M 7 7 L 7 7 L 7 7 L 7 7 L 7 7 L 7 7 L 7 7"
+                android:valueTo="M 12 0 L 2 0 L 2 0 C 0.9 0 0 0.9 0 2 L 0 18 L 7 15 L 14 18 L 14 2 C 14 1.45 13.775 0.95 13.412 0.588 C 13.05 0.225 12.55 0 12 0 M 7 12.82 L 2 15 L 2 2 L 12 2 L 12 15 L 7 12.82 L 7 12.82"
+                android:valueType="pathType"
+                android:interpolator="@android:interpolator/fast_out_slow_in"/>
+        </aapt:attr>
+    </target>
+</animated-vector>
diff --git a/gradle/libs.versions.toml b/gradle/libs.versions.toml
@@ -93,6 +93,7 @@ composeCoil = { module = "io.coil-kt:coil-compose", version = "2.4.0" }
 composeImageLoader = { module = "io.github.qdsfdhvh:image-loader", version = "1.6.4" }
 composeShimmer = { module = "com.valentinilk.shimmer:compose-shimmer", version = "1.0.5" }
 lottieCompose = { module = "com.airbnb.android:lottie-compose", version.ref = "lottie" }
+animation-graphics-android = { group = "androidx.compose.animation", name = "animation-graphics-android", version = "1.5.1" }
 
 androidxFragment = { module = "androidx.fragment:fragment", version.ref = "androidxFragment" }
 androidxCoreKtx = { module = "androidx.core:core-ktx", version.ref = "androidxCore" }