Fix part of #140: Topic play animation #486
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,7 +1,11 @@ | ||
| package org.oppia.app.topic.play | ||
|
|
||
| import android.view.LayoutInflater | ||
| import android.view.View | ||
| import android.view.ViewGroup | ||
| import android.view.animation.Animation | ||
| import android.view.animation.Transformation | ||
| import android.widget.LinearLayout | ||
| import androidx.recyclerview.widget.RecyclerView | ||
| import org.oppia.app.databinding.TopicPlayStorySummaryBinding | ||
| import org.oppia.app.databinding.TopicPlayTitleBinding | ||
|
|
@@ -12,6 +16,7 @@ import org.oppia.app.model.ChapterSummary | |
|
|
||
| private const val VIEW_TYPE_TITLE_TEXT = 1 | ||
| private const val VIEW_TYPE_STORY_ITEM = 2 | ||
| private const val ANIMATION_DURATION: Long = 400 | ||
|
|
||
| /** Adapter to bind StorySummary to [RecyclerView] inside [TopicPlayFragment]. */ | ||
| class StorySummaryAdapter( | ||
|
|
@@ -86,11 +91,20 @@ class StorySummaryAdapter( | |
| inner class StorySummaryViewHolder(private val binding: TopicPlayStorySummaryBinding) : | ||
| RecyclerView.ViewHolder(binding.root) { | ||
| internal fun bind(storySummaryViewModel: StorySummaryViewModel, position: Int) { | ||
| if (currentExpandedChapterListIndex != null && currentExpandedChapterListIndex==position) { | ||
| binding.isListExpanded = true | ||
|
|
||
| if (currentExpandedChapterListIndex == position) { | ||
| binding.chapterListDropDownIcon.animate().rotation(180F).setDuration(400).start() | ||
| expand(binding.chapterListContainer) | ||
| } else { | ||
| binding.chapterListDropDownIcon.animate().rotation(0F).setDuration(400).start() | ||
| collapse(binding.chapterListContainer) | ||
| } | ||
| } | ||
| else { | ||
| binding.isListExpanded = false | ||
| } | ||
| binding.viewModel = storySummaryViewModel | ||
|
|
||
| val chapterSummaries = storySummaryViewModel.storySummary.chapterList | ||
|
|
@@ -111,25 +125,75 @@ class StorySummaryAdapter( | |
| binding.chapterRecyclerView.adapter = ChapterSummaryAdapter(chapterList, chapterSummarySelector) | ||
|
|
||
| binding.root.setOnClickListener { | ||
| currentExpandedChapterListIndex = | ||
| if (currentExpandedChapterListIndex != null && currentExpandedChapterListIndex == position) { | ||
| null | ||
| } else { | ||
| position | ||
| } | ||
| expandedChapterListIndexListener.onExpandListIconClicked(currentExpandedChapterListIndex) | ||
|
|
||
| binding.isListExpanded = currentExpandedChapterListIndex == position | ||
|
|
||
| if (currentExpandedChapterListIndex == position) { | ||
| binding.chapterListDropDownIcon.animate().rotation(180F).setDuration(400).start() | ||
| expand(binding.chapterListContainer) | ||
| } else { | ||
| binding.chapterListDropDownIcon.animate().rotation(0F).setDuration(400).start() | ||
| collapse(binding.chapterListContainer) | ||
| } | ||
| } | ||
| } | ||
|
|
||
| private fun expand(chapterListContainer: View) { | ||
| chapterListContainer.clearAnimation() | ||
| val matchParentMeasureSpec = | ||
| View.MeasureSpec.makeMeasureSpec((chapterListContainer.parent as View).width, View.MeasureSpec.EXACTLY) | ||
| val wrapContentMeasureSpec = View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED) | ||
| chapterListContainer.measure(matchParentMeasureSpec, wrapContentMeasureSpec) | ||
| val targetHeight = chapterListContainer.measuredHeight | ||
|
|
||
| // Older versions of android (pre API 21) cancel animations for views with a height of 0. | ||
| chapterListContainer.layoutParams.height = 1 | ||
| chapterListContainer.visibility = View.VISIBLE | ||
| val expandAnimation = object : Animation() { | ||
| override fun applyTransformation(interpolatedTime: Float, t: Transformation) { | ||
| if (interpolatedTime == 1f) { | ||
|
There was a problem hiding this comment. We shouldn't ever do direct equality with floats due to precision error. Suggest instead using Float.approximatelyEquals (in our own FloatExtensions file). There was a problem hiding this comment. Are you referring to something like this: https://alvinalexander.com/source-code/java-approximately-equals-method-function Also, what exactly do you mean by |
||
| chapterListContainer.layoutParams.height = LinearLayout.LayoutParams.WRAP_CONTENT | ||
| } else { | ||
| chapterListContainer.layoutParams.height = (targetHeight * interpolatedTime).toInt() | ||
| } | ||
| chapterListContainer.requestLayout() | ||
| } | ||
|
|
||
| override fun willChangeBounds(): Boolean { | ||
| return true | ||
| } | ||
| } | ||
| expandAnimation.duration = ANIMATION_DURATION | ||
| chapterListContainer.startAnimation(expandAnimation) | ||
| } | ||
|
|
||
| private fun collapse(chapterListContainer: View) { | ||
| chapterListContainer.clearAnimation() | ||
| val initialHeight = chapterListContainer.measuredHeight | ||
|
|
||
| val collapseAnimation = object : Animation() { | ||
| override fun applyTransformation(interpolatedTime: Float, t: Transformation?) { | ||
| if (interpolatedTime == 1f) { | ||
| chapterListContainer.visibility = View.GONE | ||
| } else { | ||
| chapterListContainer.layoutParams.height = initialHeight - (initialHeight * interpolatedTime).toInt() | ||
| } | ||
| chapterListContainer.requestLayout() | ||
| } | ||
|
|
||
| override fun willChangeBounds(): Boolean { | ||
| return true | ||
| } | ||
| } | ||
| collapseAnimation.duration = ANIMATION_DURATION | ||
| chapterListContainer.startAnimation(collapseAnimation) | ||
| } | ||
| } | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm a bit confused by this. Why can't we rely on RecyclerView's own item animator for this? These animations seem a bit complex, and should really be tested directly since if they regress it will be hard for us to detect. I'd rather we rely on existing animation systems rather than creating our own Animation classes, if possible.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I am actually not able to understand how can we do this using RecyclerView's animator?
Also, the main point behind introducing these animations were two fold:
I don't have much experience of automated animation, can you just give information regarding RecyclerView's item animator in more detail?
Thanks.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Sure. I was thinking specifically DefaultItemAnimator, but I'm guessing that might not do the right thing. In which case, maybe something like https://stackoverflow.com/a/37453839 or another animator library might make this a bit easier if it's possible.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This animation is applicable on recyclerview item. But here we want to expand and contract a linear layout, which is again within a recyclerview item.