Fix #3406: [RTL] High-fi Recently- Played Activity List (#3466)

* Update selection_interaction_item.xml * Update selection_interaction_item.xml * Update return_to_topic_button_item.xml * Update return_to_topic_button_item.xml * fix rtl support in ongoing story card * Update ongoing_story_card.xml * Update MarginBindingAdapters.java * Update OngoingStoryViewModel.kt * Update MarginBindingAdapters.java * Update OngoingListAdapter.kt * Update OngoingListAdapter.kt * added testcases * Fixed testcases * Update RecentlyPlayedFragmentTest.kt * Update app/src/sharedTest/java/org/oppia/android/app/home/RecentlyPlayedFragmentTest.kt Co-authored-by: Ben Henning <[email protected]> * Update RecentlyPlayedFragmentTest.kt * fixed nits * Update BUILD.bazel * Update BUILD.bazel * Update RecentlyPlayedFragmentTest.kt Co-authored-by: Ben Henning <[email protected]>
oppia · Aug 12, 2021 · 86d0d1f · 86d0d1f
1 parent 77ff836
commit 86d0d1f
Show file tree

Hide file tree

Showing 9 changed files with 383 additions and 111 deletions.
diff --git a/app/BUILD.bazel b/app/BUILD.bazel
@@ -146,6 +146,7 @@ VIEW_MODELS_WITH_RESOURCE_IMPORTS = [
     "src/main/java/org/oppia/android/app/home/promotedlist/ComingSoonTopicsViewModel.kt",
     "src/main/java/org/oppia/android/app/home/promotedlist/PromotedStoryListViewModel.kt",
     "src/main/java/org/oppia/android/app/home/promotedlist/PromotedStoryViewModel.kt",
+    "src/main/java/org/oppia/android/app/home/recentlyplayed/OngoingStoryViewModel.kt",
     "src/main/java/org/oppia/android/app/home/topiclist/TopicSummaryViewModel.kt",
     "src/main/java/org/oppia/android/app/onboarding/OnboadingSlideViewModel.kt",
     "src/main/java/org/oppia/android/app/onboarding/OnboardingViewModel.kt",
@@ -207,7 +208,6 @@ VIEW_MODELS = [
     "src/main/java/org/oppia/android/app/hintsandsolution/SolutionViewModel.kt",
     "src/main/java/org/oppia/android/app/home/HomeItemViewModel.kt",
     "src/main/java/org/oppia/android/app/home/promotedlist/ComingSoonTopicListViewModel.kt",
-    "src/main/java/org/oppia/android/app/home/recentlyplayed/OngoingStoryViewModel.kt",
     "src/main/java/org/oppia/android/app/home/recentlyplayed/RecentlyPlayedItemViewModel.kt",
     "src/main/java/org/oppia/android/app/home/recentlyplayed/SectionTitleViewModel.kt",
     "src/main/java/org/oppia/android/app/home/topiclist/AllTopicsViewModel.kt",

diff --git a/app/src/main/java/org/oppia/android/app/home/recentlyplayed/OngoingListAdapter.kt b/app/src/main/java/org/oppia/android/app/home/recentlyplayed/OngoingListAdapter.kt
@@ -1,13 +1,10 @@
 package org.oppia.android.app.home.recentlyplayed
 
-import android.content.Context
-import android.content.res.Configuration
 import android.content.res.Resources
 import android.view.LayoutInflater
 import android.view.ViewGroup
 import androidx.appcompat.app.AppCompatActivity
 import androidx.recyclerview.widget.RecyclerView
-import org.oppia.android.R
 import org.oppia.android.databinding.OngoingStoryCardBinding
 import org.oppia.android.databinding.SectionTitleBinding
 
@@ -61,102 +58,6 @@ class OngoingListAdapter(
       VIEW_TYPE_SECTION_STORY_ITEM -> {
         storyGridPosition = position - titleIndex
         (holder as OngoingStoryViewHolder).bind(itemList[position] as OngoingStoryViewModel)
-        val marginMin =
-          (activity as Context).resources.getDimensionPixelSize(R.dimen.recently_played_margin_min)
-        val marginMax =
-          (activity as Context).resources.getDimensionPixelSize(R.dimen.recently_played_margin_max)
-        val params =
-          holder.binding.ongoingStoryCardView.layoutParams as (ViewGroup.MarginLayoutParams)
-        val marginTop = if (activity.resources.getBoolean(R.bool.isTablet)) {
-          (activity as Context).resources
-            .getDimensionPixelSize(R.dimen.ongoing_story_card_view_is_tablet_margin_top)
-        } else {
-          if (orientation == Configuration.ORIENTATION_PORTRAIT) {
-            if (storyGridPosition > 2) {
-              (activity as Context).resources
-                .getDimensionPixelSize(R.dimen.ongoing_story_card_view_margin_top_portrait)
-            } else {
-              (activity as Context).resources
-                .getDimensionPixelSize(
-                  R.dimen.ongoing_story_card_view_margin_top_portrait_story_grid_greater_then_2
-                )
-            }
-          } else {
-            (activity as Context).resources
-              .getDimensionPixelSize(R.dimen.ongoing_story_card_view_margin_top_landscape)
-          }
-        }
-        val marginBottom = 0
-        when (spanCount) {
-          2 -> {
-            when {
-              storyGridPosition % spanCount == 0 -> params.setMargins(
-                marginMin,
-                marginTop,
-                marginMax,
-                marginBottom
-              )
-              else -> params.setMargins(
-                marginMax,
-                marginTop,
-                marginMin,
-                marginBottom
-              )
-            }
-          }
-          3 -> {
-            when {
-              storyGridPosition % spanCount == 1 -> params.setMargins(
-                marginMax,
-                marginTop,
-                /* right= */ 0,
-                marginBottom
-              )
-              storyGridPosition % spanCount == 2 -> params.setMargins(
-                marginMin,
-                marginTop,
-                marginMin,
-                marginBottom
-              )
-              storyGridPosition % spanCount == 0 -> params.setMargins(
-                /* left= */ 0,
-                marginTop,
-                marginMax,
-                marginBottom
-              )
-            }
-          }
-          4 -> {
-            when {
-              (storyGridPosition) % spanCount == 1 -> params.setMargins(
-                marginMax,
-                marginTop,
-                /* right= */ 0,
-                marginBottom
-              )
-              (storyGridPosition) % spanCount == 2 -> params.setMargins(
-                marginMin,
-                marginTop,
-                marginMin / 2,
-                marginBottom
-              )
-              (storyGridPosition) % spanCount == 3 -> params.setMargins(
-                marginMin / 2,
-                marginTop,
-                marginMin,
-                marginBottom
-              )
-              (storyGridPosition) % spanCount == 0 -> params.setMargins(
-                /* left= */ 0,
-                marginTop,
-                marginMax,
-                marginBottom
-              )
-            }
-          }
-        }
-        holder.binding.ongoingStoryCardView.layoutParams = params
-        holder.binding.ongoingStoryCardView.requestLayout()
       }
       else -> throw IllegalArgumentException("Invalid item view type: ${holder.itemViewType}")
     }

diff --git a/app/src/main/java/org/oppia/android/app/home/recentlyplayed/OngoingStoryViewModel.kt b/app/src/main/java/org/oppia/android/app/home/recentlyplayed/OngoingStoryViewModel.kt
@@ -1,18 +1,100 @@
 package org.oppia.android.app.home.recentlyplayed
 
 import android.view.View
+import androidx.appcompat.app.AppCompatActivity
 import androidx.lifecycle.ViewModel
+import org.oppia.android.R
 import org.oppia.android.app.model.PromotedStory
 
 // TODO(#297): Add download status information to promoted-story-card.
 
 /** [ViewModel] for displaying a promoted story. */
 class OngoingStoryViewModel(
+  private val activity: AppCompatActivity,
   val ongoingStory: PromotedStory,
   val entityType: String,
-  private val ongoingStoryClickListener: OngoingStoryClickListener
+  private val ongoingStoryClickListener: OngoingStoryClickListener,
+  private val position: Int
 ) : RecentlyPlayedItemViewModel() {
   fun clickOnOngoingStoryTile(@Suppress("UNUSED_PARAMETER") v: View) {
     ongoingStoryClickListener.onOngoingStoryClicked(ongoingStory)
   }
+
+  private val outerMargin by lazy {
+    activity.resources.getDimensionPixelSize(R.dimen.recently_played_margin_max)
+  }
+  private val innerMargin by lazy {
+    activity.resources.getDimensionPixelSize(R.dimen.recently_played_margin_min)
+  }
+  private val spanCount by lazy {
+    activity.resources.getInteger(R.integer.recently_played_span_count)
+  }
+
+  /**
+   * Determines the start margin for an individual TopicSummary relative to the grid columns laid out on the
+   * HomeActivity. GridLayout columns are evenly spread out across the entire activity screen but the
+   * Topic Summaries are positioned towards the center, so start margins are calculated to stagger inside each
+   * fixed column but centered on the activity's layout, as shown below.
+   *
+   *  |        _____|      _____   |   _____      |_____        |
+   *  |       |     |     |     |  |  |     |     |     |       |
+   *  |       |     |     |     |  |  |     |     |     |       |
+   *  |       |_____|     |_____|  |  |_____|     |_____|       |
+   *  |             |              |              |             |
+   *  |        _____       _____       _____       _____        |
+   *  |       |     |     |     |     |     |     |     |       |
+   *  |       |     |     |     |     |     |     |     |       |
+   *  |       |_____|     |_____|     |_____|     |_____|       |
+   *  |                                                         |
+   */
+  fun computeStartMargin(): Int {
+    return when (spanCount) {
+      2 -> when (position % spanCount) {
+        0 -> outerMargin
+        else -> innerMargin
+      }
+      3 -> when (position % spanCount) {
+        0 -> outerMargin
+        1 -> innerMargin
+        2 -> 0
+        else -> 0
+      }
+      4 -> when (position % spanCount) {
+        0 -> outerMargin
+        1 -> innerMargin
+        2 -> innerMargin / 2
+        3 -> 0
+        else -> 0
+      }
+      else -> 0
+    }
+  }
+
+  /**
+   * Determines the end margin for an individual TopicSummary relative to the grid columns laid out on the
+   * HomeActivity. The end margins are calculated to stagger inside each fixed column but centered on the
+   * activity's layout (see [computeStartMargin]).
+   */
+  fun computeEndMargin(): Int {
+    return when (spanCount) {
+      2 -> when (position % spanCount) {
+        0 -> innerMargin
+        else -> outerMargin
+      }
+      3 -> when (position % spanCount) {
+        0 -> 0
+        1 -> innerMargin
+        2 -> outerMargin
+        else -> 0
+      }
+      4 -> when (position % spanCount) {
+        0 -> 0
+        1 -> innerMargin / 2
+        2 -> innerMargin
+        3 -> outerMargin
+        else -> 0
+      }
+      else -> 0
+    }
+  }
 }
diff --git a/...rc/main/java/org/oppia/android/app/home/recentlyplayed/RecentlyPlayedFragmentPresenter.kt b/...rc/main/java/org/oppia/android/app/home/recentlyplayed/RecentlyPlayedFragmentPresenter.kt
@@ -110,17 +110,22 @@ class RecentlyPlayedFragmentPresenter @Inject constructor(
     val recentSectionTitleViewModel =
       SectionTitleViewModel(activity.getString(R.string.ongoing_story_last_week), false)
     itemList.add(recentSectionTitleViewModel)
-    for (promotedStory in recentlyPlayedStoryList) {
-      val ongoingStoryViewModel = getOngoingStoryViewModel(promotedStory)
+    recentlyPlayedStoryList.forEachIndexed { index, promotedStory ->
+      val ongoingStoryViewModel = getOngoingStoryViewModel(promotedStory, index)
       itemList.add(ongoingStoryViewModel)
     }
   }
 
-  private fun getOngoingStoryViewModel(promotedStory: PromotedStory): RecentlyPlayedItemViewModel {
+  private fun getOngoingStoryViewModel(
+    promotedStory: PromotedStory,
+    index: Int
+  ): RecentlyPlayedItemViewModel {
     return OngoingStoryViewModel(
+      activity,
       promotedStory,
       entityType,
-      fragment as OngoingStoryClickListener
+      fragment as OngoingStoryClickListener,
+      index
     )
   }
 
@@ -132,8 +137,8 @@ class RecentlyPlayedFragmentPresenter @Inject constructor(
         showDivider
       )
     itemList.add(olderSectionTitleViewModel)
-    for (promotedStory in olderPlayedStoryList) {
-      val ongoingStoryViewModel = getOngoingStoryViewModel(promotedStory)
+    olderPlayedStoryList.forEachIndexed { index, promotedStory ->
+      val ongoingStoryViewModel = getOngoingStoryViewModel(promotedStory, index)
       itemList.add(ongoingStoryViewModel)
     }
   }
@@ -146,8 +151,8 @@ class RecentlyPlayedFragmentPresenter @Inject constructor(
         showDivider
       )
     itemList.add(recommendedSectionTitleViewModel)
-    for (suggestedStory in suggestedStoryList) {
-      val ongoingStoryViewModel = getOngoingStoryViewModel(suggestedStory)
+    suggestedStoryList.forEachIndexed { index, suggestedStory ->
+      val ongoingStoryViewModel = getOngoingStoryViewModel(suggestedStory, index)
       itemList.add(ongoingStoryViewModel)
     }
   }

diff --git a/app/src/main/res/layout-land/ongoing_story_card.xml b/app/src/main/res/layout-land/ongoing_story_card.xml
@@ -16,6 +16,10 @@
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     app:cardBackgroundColor="@color/white"
+    app:layoutMarginTop="@{@dimen/topic_list_item_margin_top_bottom}"
+    app:layoutMarginBottom="@{@dimen/topic_list_item_margin_top_bottom}"
+    app:layoutMarginStart="@{viewModel.computeStartMargin()}"
+    app:layoutMarginEnd="@{viewModel.computeEndMargin()}"
     app:cardCornerRadius="4dp"
     app:cardElevation="4dp">
 
@@ -59,8 +63,9 @@
           android:layout_marginTop="8dp"
           android:layout_marginEnd="8dp"
           android:ellipsize="end"
-          android:maxLines="1"
+          android:lines="2"
           android:text="@{viewModel.ongoingStory.storyName}"
+          android:textStyle="bold"
           app:layout_constraintEnd_toEndOf="parent"
           app:layout_constraintStart_toStartOf="parent"
           app:layout_constraintTop_toTopOf="parent" />

diff --git a/app/src/main/res/layout-sw600dp-land/ongoing_story_card.xml b/app/src/main/res/layout-sw600dp-land/ongoing_story_card.xml
@@ -16,6 +16,10 @@
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     app:cardBackgroundColor="@color/white"
+    app:layoutMarginTop="@{@dimen/topic_list_item_margin_top_bottom}"
+    app:layoutMarginBottom="@{@dimen/topic_list_item_margin_top_bottom}"
+    app:layoutMarginStart="@{viewModel.computeStartMargin()}"
+    app:layoutMarginEnd="@{viewModel.computeEndMargin()}"
     app:cardCornerRadius="4dp"
     app:cardElevation="4dp">
 

diff --git a/app/src/main/res/layout-sw600dp-port/ongoing_story_card.xml b/app/src/main/res/layout-sw600dp-port/ongoing_story_card.xml
@@ -16,6 +16,10 @@
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     app:cardBackgroundColor="@color/white"
+    app:layoutMarginTop="@{@dimen/topic_list_item_margin_top_bottom}"
+    app:layoutMarginBottom="@{@dimen/topic_list_item_margin_top_bottom}"
+    app:layoutMarginStart="@{viewModel.computeStartMargin()}"
+    app:layoutMarginEnd="@{viewModel.computeEndMargin()}"
     app:cardCornerRadius="4dp"
     app:cardElevation="4dp">
 

diff --git a/app/src/main/res/layout/ongoing_story_card.xml b/app/src/main/res/layout/ongoing_story_card.xml
@@ -16,6 +16,10 @@
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     app:cardBackgroundColor="@color/white"
+    app:layoutMarginTop="@{@dimen/topic_list_item_margin_top_bottom}"
+    app:layoutMarginBottom="@{@dimen/topic_list_item_margin_top_bottom}"
+    app:layoutMarginStart="@{viewModel.computeStartMargin()}"
+    app:layoutMarginEnd="@{viewModel.computeEndMargin()}"
     app:cardCornerRadius="4dp"
     app:cardElevation="4dp">