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

Fix part of #140: Topic play animation #486

Closed
wants to merge 11 commits into from
Closed

Fix part of #140: Topic play animation #486

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
ddc950a
Topic play animation
Nov 28, 2019
9d560a2
Minor bug fixes
Nov 28, 2019
2632149
Minor optimisation
Nov 29, 2019
ae1fb63
Final topic play animation
Nov 29, 2019
16c18aa
Remove unused code
Nov 29, 2019
faf8229
Nit renaming
Nov 29, 2019
f8b35e6
Merge remote-tracking branch 'upstream/develop' into topic-play-anima…
Dec 2, 2019
f288b1b
Updated test cases
Dec 2, 2019
bff5d30
updated chapter_list_container as ExpandableLayout for expand and col…
nikitamarysolomanpvt Dec 12, 2019
0a856e0
nit
nikitamarysolomanpvt Dec 12, 2019
6b7cf74
nit
nikitamarysolomanpvt Dec 12, 2019
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
Prev Previous commit
Next Next commit
Minor optimisation
  • Loading branch information
Rajat Talesra committed Nov 29, 2019
commit 2632149294bd0cecf9f06f266dc5f68b4b5beedb
48 changes: 25 additions & 23 deletions app/src/main/java/org/oppia/app/topic/play/StorySummaryAdapter.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,17 @@
package org.oppia.app.topic.play

import android.content.Context
import android.util.Log
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.view.animation.Animation
import android.view.animation.AnimationUtils
import android.view.animation.Transformation
import android.widget.LinearLayout
import androidx.core.view.isVisible
import androidx.recyclerview.widget.RecyclerView
import org.oppia.app.R
import org.oppia.app.databinding.TopicPlayStorySummaryBinding
import org.oppia.app.databinding.TopicPlayTitleBinding
import org.oppia.app.model.ChapterPlayState
Expand All @@ -21,6 +25,7 @@ private const val ANIMATION_DURATION: Long = 400

/** Adapter to bind StorySummary to [RecyclerView] inside [TopicPlayFragment]. */
class StorySummaryAdapter(
private val context: Context,
private val itemList: MutableList<TopicPlayItemViewModel>,
private val chapterSummarySelector: ChapterSummarySelector,
private val expandedChapterListIndexListener: ExpandedChapterListIndexListener,
Expand Down Expand Up @@ -92,19 +97,6 @@ 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
Expand All @@ -124,27 +116,35 @@ class StorySummaryAdapter(
val chapterList = storySummaryViewModel.storySummary.chapterList
binding.chapterRecyclerView.adapter = ChapterSummaryAdapter(chapterList, chapterSummarySelector)

if (currentExpandedChapterListIndex != null && currentExpandedChapterListIndex == position) {
val aniRotate = AnimationUtils.loadAnimation(context, R.anim.rotation_clockwise_180)
binding.chapterListDropDownIcon.startAnimation(aniRotate)
expand(binding.chapterListContainer)
} else {
val aniRotate = AnimationUtils.loadAnimation(context, R.anim.rotation_anti_clockwise_180)
binding.chapterListDropDownIcon.startAnimation(aniRotate)
collapse(binding.chapterListContainer)
}

binding.root.setOnClickListener {
binding.isListExpanded = !binding.chapterListContainer.isVisible
val previousItem = currentExpandedChapterListIndex

if (!binding.chapterListContainer.isVisible) {
binding.chapterListDropDownIcon.animate().rotation(180F).setDuration(400).start()
expand(binding.chapterListContainer)
} else {
binding.chapterListDropDownIcon.animate().rotation(0F).setDuration(400).start()
collapse(binding.chapterListContainer)
}

if (binding.chapterListContainer.isVisible) {
currentExpandedChapterListIndex = position
} else {
currentExpandedChapterListIndex = null
} else {
currentExpandedChapterListIndex = position
}
expandedChapterListIndexListener.onExpandListIconClicked(currentExpandedChapterListIndex)
if (previousItem != null && previousItem != position) {
Copy link
Sponsor Member

Choose a reason for hiding this comment

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

This logic isn't trivial to follow. Can we add tests to make sure that the expand/collapse works as expected & stays working? We shouldn't test the animations, just that the state changes are being reflected correctly.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I have updated all test cases:

Check the following tests which checks this functionality:
testTopicPlayFragment_loadFragmentWithTopicTestId0_clickExpandListIconIndex0_clickExpandListIconIndex1_chapterListForIndex0IsNotDisplayed
testTopicPlayFragment_loadFragmentWithTopicTestId0_clickExpandListIconIndex1_clickExpandListIconIndex0_chapterListForIndex0IsNotDisplayed

notifyItemChanged(previousItem)
}
notifyItemChanged(position)
}
}

private fun expand(chapterListContainer: View) {
Copy link
Sponsor Member

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.

Copy link
Contributor Author

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:

  1. Make expand/collapse animation smooth.
  2. The animation time of expand, and arrow rotate all should be in sync.

I don't have much experience of automated animation, can you just give information regarding RecyclerView's item animator in more detail?
Thanks.

Copy link
Sponsor Member

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.

Copy link
Contributor Author

@rt4914 rt4914 Dec 11, 2019 •
edited
Loading

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.

Log.d("TAG", "expand")
chapterListContainer.clearAnimation()
val matchParentMeasureSpec =
View.MeasureSpec.makeMeasureSpec((chapterListContainer.parent as View).width, View.MeasureSpec.EXACTLY)
Expand Down Expand Up @@ -174,7 +174,9 @@ class StorySummaryAdapter(
}

private fun collapse(chapterListContainer: View) {
Log.d("TAG", "collapse")
chapterListContainer.clearAnimation()

val initialHeight = chapterListContainer.measuredHeight

val collapseAnimation = object : Animation() {
Expand Down
3 changes: 2 additions & 1 deletion app/src/main/java/org/oppia/app/topic/play/TopicPlayFragmentPresenter.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ import javax.inject.Inject
/** The presenter for [TopicPlayFragment]. */
@FragmentScope
class TopicPlayFragmentPresenter @Inject constructor(
activity: AppCompatActivity,
private val activity: AppCompatActivity,
private val fragment: Fragment,
private val logger: Logger,
private val explorationDataController: ExplorationDataController,
Expand Down Expand Up @@ -86,6 +86,7 @@ class TopicPlayFragmentPresenter @Inject constructor(
}
val storySummaryAdapter =
StorySummaryAdapter(
activity,
itemList,
this as ChapterSummarySelector,
expandedChapterListIndexListener,
Expand Down
8 changes: 8 additions & 0 deletions app/src/main/res/anim/rotation_anti_clockwise_180.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http:https://schemas.android.com/apk/res/android" android:interpolator="@android:anim/cycle_interpolator">
<rotate android:fromDegrees="180"
android:toDegrees="0"
android:pivotX="50%"
android:pivotY="50%"
android:duration="400" />
</set>
8 changes: 8 additions & 0 deletions app/src/main/res/anim/rotation_clockwise_180.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http:https://schemas.android.com/apk/res/android" android:interpolator="@android:anim/cycle_interpolator">
<rotate android:fromDegrees="0"
android:toDegrees="180"
android:pivotX="50%"
android:pivotY="50%"
android:duration="400" />
</set>
6 changes: 1 addition & 5 deletions app/src/main/res/layout/topic_play_story_summary.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,6 @@

<import type="android.view.View" />

<variable
name="isListExpanded"
type="Boolean" />

<variable
name="storyPercentage"
type="Integer" />
Expand Down Expand Up @@ -142,7 +138,7 @@
android:layout_height="wrap_content"
android:background="@color/whiteLight"
android:orientation="vertical"
android:visibility="@{isListExpanded? View.VISIBLE : View.GONE}">
android:visibility="gone">

<View
android:layout_width="match_parent"
Expand Down