Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Proposal] ♻️ Animate the bookmark button on the session details screen. #1114

Merged
merged 6 commits into from
Sep 8, 2023
Merged

[Proposal] ♻️ Animate the bookmark button on the session details screen. #1114

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
3ea885f
:recycle: Added animation when the bookmark button is tapped.
Corvus400 Sep 7, 2023
0380c41
:wrench: Fixed to separate processing for V31 or later and earlier.
Corvus400 Sep 7, 2023
a2214fb
:wrench: Make animated icons appear only in session details.
Corvus400 Sep 7, 2023
7f1cbcb
:wrench: ./gradlew detekt --auto-correct
Corvus400 Sep 7, 2023
262f2e2
:wastebasket: Removed unnecessary processing.
Corvus400 Sep 7, 2023
cd62912
Merge branch 'main' into feature/apply_animated_bookmark_icon
Corvus400 Sep 7, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions feature/sessions/build.gradle.kts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
62 changes: 48 additions & 14 deletions .../io/github/droidkaigi/confsched2023/sessions/component/TimetableItemDetailBottomAppBar.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -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
Expand Down Expand Up @@ -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
Expand Down
30 changes: 30 additions & 0 deletions feature/sessions/src/main/res/drawable/animated_bookmark_icon.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
30 changes: 30 additions & 0 deletions feature/sessions/src/main/res/drawable/animated_bookmark_icon_reverse.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
1 change: 1 addition & 0 deletions gradle/libs.versions.toml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" }
Expand Down
Loading