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.

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

introducing confetti animation using konfetti library #1743

Closed
wants to merge 6 commits into from

Conversation

gokulk16
Copy link

@gokulk16 gokulk16 commented Jun 16, 2023

Test cases when confetti will be shown for habit type - boolean(Yes/No):

  • Toggling with the short press
  • Toggling inside the checkmark pop-up

Test cases when confetti will be shown for habit type - measurable:

  • Adding an entry using the number pop-up. animation shows even when the number doesn't match the target for the day respecting the progress made on the day for the user.

Settings combinations tested with:

  • skip days disabled; toggle with short press disabled
  • skip days disabled; toggle with short press enabled
  • skip days enabled; toggle with short press disabled
  • skip days enabled; toggle with short press enabled

Screen recording of confetti animation:

Confetti.recording.in.nexus.4.mp4

@gokulk16 gokulk16 marked this pull request as draft June 18, 2023 12:52
@gokulk16 gokulk16 marked this pull request as ready for review June 18, 2023 12:54
Copy link
Collaborator

@hiqua hiqua left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just a superficial look at the code for now.

@@ -100,5 +102,11 @@ class NumberDialog : AppCompatDialogFragment() {
val notes = view.notes.text.toString()
onToggle(value, notes)
requireDialog().dismiss()
val v = requireActivity().findViewById<LinearLayout>(R.id.konfettiLayout)
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

v is called konfettiView above, consistency?

@@ -100,5 +102,11 @@ class NumberDialog : AppCompatDialogFragment() {
val notes = view.notes.text.toString()
onToggle(value, notes)
requireDialog().dismiss()
val v = requireActivity().findViewById<LinearLayout>(R.id.konfettiLayout)

if (value > 0.0) {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe it should be on completion rather than for any value? Not sure.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

added a code comment.

Reason: I thought it would be motivating for users to at least add some value rather than not doing the habit. 😸

@@ -88,25 +89,28 @@ class CheckmarkButtonView(
setOnLongClickListener(this)
}

fun performToggle() {
fun performToggle(v: View) {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same remark about this v variable, make it more explicit so that it's easier to understand.

}

fun showConfetti(view: View) {
val viewId = R.id.konfetttiView
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
val viewId = R.id.konfetttiView
val viewId = R.id.konfettiView

Is this a typo or is there a reason to have 3 t?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

not typo, i was just using 3 t to differentiate the variables in kt files and in XML. Just a minor naming convention

<nl.dionsegijn.konfetti.xml.KonfettiView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/konfetttiView"/>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
android:id="@+id/konfetttiView"/>
android:id="@+id/konfettiView"/>

Copy link
Author

@gokulk16 gokulk16 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

fixed few comments, fixed conflicts and responded to some comments

@@ -100,5 +102,11 @@ class NumberDialog : AppCompatDialogFragment() {
val notes = view.notes.text.toString()
onToggle(value, notes)
requireDialog().dismiss()
val v = requireActivity().findViewById<LinearLayout>(R.id.konfettiLayout)

if (value > 0.0) {
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

added a code comment.

Reason: I thought it would be motivating for users to at least add some value rather than not doing the habit. 😸

}

fun showConfetti(view: View) {
val viewId = R.id.konfetttiView
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

not typo, i was just using 3 t to differentiate the variables in kt files and in XML. Just a minor naming convention

@hiqua
Copy link
Collaborator

hiqua commented Aug 10, 2023

  1. I think we'd need a new setting to allow users to disable this if they don't want this
  2. what happens if you interact with the UI while the animation is working, does it still work? Does it interrupt the animation?
  3. maybe something a bit more discrete would be better

I don't want to tell you to do 1. yet because I'm still not sure @iSoron is open to this new UI feature, better to wait for a confirmation first. @iSoron can you give us your opinion (e.g. based on the video) before @gokulk16 continues working on this?

@neube3
Copy link

neube3 commented Jan 1, 2024

Just wanted to chip in that the lack of a strong blue colour (e.g. 0000FF) in that confetti would make me not use it. It's not confetti without all primary colours. (Only half-joking)

@iSoron
Copy link
Owner

iSoron commented Apr 3, 2024

Thank you for the PR, @gokulk16. I have merged it to dev (06090e2) with the following major changes:

  • Move the Konfetti code to ListHabitsScreen
  • Make the confetti originate from the button, instead of the center of the screen
  • Use the color of the habit as the base color for the confetti, but add some randomization, so we still get multiple colors
  • Tweak some animations, layout and the conditions in which the confetti is shown.

Feel free to submit other PRs to tweak it further or fix any remaining issues. At this point, I think the animation is subtle enough for it to be enable by default. If users complain about it, we can add an option in the settings to disable it, or even make it opt-in.

@iSoron iSoron closed this Apr 3, 2024
@gokulk16
Copy link
Author

gokulk16 commented Apr 3, 2024

@iSoron Thanks for the tweaks and also merging the PR. 🙏

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants