From f096b1d3260319bb0599692b29e9beb330841d92 Mon Sep 17 00:00:00 2001
From: Jishnu <64526117+JishnuGoyal@users.noreply.github.com>
Date: Mon, 3 Oct 2022 05:38:04 +0530
Subject: [PATCH] Fix #4450: Add next and previous card options on revision
 screen (#4554)

* add functionality for next/prev navigation for revision cards

* update according to changes from develop

* fix bad merge with develop

* make toolbar orange

* refactor code + add tests

* lint/shorten test name

* lint/shorten test name

* add all refactor jobs

* requested changes

* add 'scroll to' to tests

* add min height and width

* remove accidentally added code that led to test failure

* pre-load subtopic list size

* lint

* piping was not correct

* lint

* lint

* disable accessibility checks

* finish up small left bits

* lint

* commit before checkout

* partial: Add changes requested in review.

* lint

* partial: suggested changes

* kt to binding

* kt to xml binding

* change colors of status bar and toolbar color without using logic

* lint

* fix todo spacing

* wrap up with review comments and fix CI

* lint

* text alignment should be right when only next card is visible

* add kdocs

* finish up kdocs
---
 app/src/main/AndroidManifest.xml              |   2 +-
 .../customview/LessonThumbnailImageView.kt    |   8 +-
 .../app/testing/TopicRevisionTestActivity.kt  |  10 +-
 .../android/app/testing/TopicTestActivity.kt  |   9 +-
 .../app/testing/TopicTestActivityForStory.kt  |   9 +-
 .../app/topic/RouteToRevisionCardListener.kt  |   7 +-
 .../oppia/android/app/topic/TopicActivity.kt  |  10 +-
 .../TopicRevisionFragmentPresenter.kt         |  12 +-
 .../revisioncard/RevisionCardActivity.kt      |  33 +++-
 .../RevisionCardActivityPresenter.kt          |   9 +-
 .../revisioncard/RevisionCardFragment.kt      |  20 ++-
 .../RevisionCardFragmentPresenter.kt          |  49 +++---
 .../revisioncard/RevisionCardViewModel.kt     | 150 +++++++++++++++--
 .../layout-sw600dp/revision_card_fragment.xml | 149 +++++++++++++++--
 .../res/layout/revision_card_activity.xml     |   2 +-
 .../res/layout/revision_card_fragment.xml     | 155 ++++++++++++++++--
 app/src/main/res/values/color_defs.xml        |   1 +
 app/src/main/res/values/color_palette.xml     |   1 +
 app/src/main/res/values/component_colors.xml  |   2 +-
 app/src/main/res/values/strings.xml           |   1 +
 app/src/main/res/values/themes.xml            |   4 +
 .../revisioncard/RevisionCardActivityTest.kt  |   8 +-
 .../revisioncard/RevisionCardFragmentTest.kt  | 153 +++++++++++++----
 .../RevisionCardActivityLocalTest.kt          |   4 +-
 .../assets/kdoc_validity_exemptions.textproto |   1 -
 25 files changed, 670 insertions(+), 139 deletions(-)

diff --git a/app/src/main/AndroidManifest.xml b/app/src/main/AndroidManifest.xml
index 19049fee697..1f2250c4152 100644
--- a/app/src/main/AndroidManifest.xml
+++ b/app/src/main/AndroidManifest.xml
@@ -236,7 +236,7 @@
     <activity
       android:name=".app.topic.revisioncard.RevisionCardActivity"
       android:label="@string/revision_card_activity_title"
-      android:theme="@style/OppiaThemeWithoutActionBar" />
+      android:theme="@style/RevisionCardActivityTheme" />
     <activity android:name=".app.testing.SplashTestActivity" />
     <activity
       android:name=".app.topic.TopicActivity"
diff --git a/app/src/main/java/org/oppia/android/app/customview/LessonThumbnailImageView.kt b/app/src/main/java/org/oppia/android/app/customview/LessonThumbnailImageView.kt
index 1ba3c2198da..c167ca87414 100644
--- a/app/src/main/java/org/oppia/android/app/customview/LessonThumbnailImageView.kt
+++ b/app/src/main/java/org/oppia/android/app/customview/LessonThumbnailImageView.kt
@@ -66,9 +66,11 @@ class LessonThumbnailImageView @JvmOverloads constructor(
     checkIfLoadingIsPossible()
   }
 
-  fun setLessonThumbnail(lessonThumbnail: LessonThumbnail) {
-    this.lessonThumbnail = lessonThumbnail
-    checkIfLoadingIsPossible()
+  fun setLessonThumbnail(lessonThumbnail: LessonThumbnail?) {
+    if (lessonThumbnail != null) {
+      this.lessonThumbnail = lessonThumbnail
+      checkIfLoadingIsPossible()
+    }
   }
 
   fun setIsBlurred(isBlurred: Boolean) {
diff --git a/app/src/main/java/org/oppia/android/app/testing/TopicRevisionTestActivity.kt b/app/src/main/java/org/oppia/android/app/testing/TopicRevisionTestActivity.kt
index 186ac654c47..1cd70a79afd 100644
--- a/app/src/main/java/org/oppia/android/app/testing/TopicRevisionTestActivity.kt
+++ b/app/src/main/java/org/oppia/android/app/testing/TopicRevisionTestActivity.kt
@@ -20,13 +20,19 @@ class TopicRevisionTestActivity : InjectableAppCompatActivity(), RouteToRevision
     topicRevisionTestActivityPresenter.handleOnCreate()
   }
 
-  override fun routeToRevisionCard(internalProfileId: Int, topicId: String, subtopicId: Int) {
+  override fun routeToRevisionCard(
+    internalProfileId: Int,
+    topicId: String,
+    subtopicId: Int,
+    subtopicListSize: Int
+  ) {
     startActivity(
       RevisionCardActivity.createRevisionCardActivityIntent(
         this,
         internalProfileId,
         topicId,
-        subtopicId
+        subtopicId,
+        subtopicListSize
       )
     )
   }
diff --git a/app/src/main/java/org/oppia/android/app/testing/TopicTestActivity.kt b/app/src/main/java/org/oppia/android/app/testing/TopicTestActivity.kt
index 292dbb8138a..f710fb8adae 100644
--- a/app/src/main/java/org/oppia/android/app/testing/TopicTestActivity.kt
+++ b/app/src/main/java/org/oppia/android/app/testing/TopicTestActivity.kt
@@ -79,10 +79,15 @@ class TopicTestActivity :
     )
   }
 
-  override fun routeToRevisionCard(internalProfileId: Int, topicId: String, subtopicId: Int) {
+  override fun routeToRevisionCard(
+    internalProfileId: Int,
+    topicId: String,
+    subtopicId: Int,
+    subtopicListSize: Int
+  ) {
     startActivity(
       RevisionCardActivity.createRevisionCardActivityIntent(
-        this, internalProfileId, topicId, subtopicId
+        this, internalProfileId, topicId, subtopicId, subtopicListSize
       )
     )
   }
diff --git a/app/src/main/java/org/oppia/android/app/testing/TopicTestActivityForStory.kt b/app/src/main/java/org/oppia/android/app/testing/TopicTestActivityForStory.kt
index a5216c51ec2..278a4bfc8ee 100644
--- a/app/src/main/java/org/oppia/android/app/testing/TopicTestActivityForStory.kt
+++ b/app/src/main/java/org/oppia/android/app/testing/TopicTestActivityForStory.kt
@@ -105,10 +105,15 @@ class TopicTestActivityForStory :
     )
   }
 
-  override fun routeToRevisionCard(internalProfileId: Int, topicId: String, subtopicId: Int) {
+  override fun routeToRevisionCard(
+    internalProfileId: Int,
+    topicId: String,
+    subtopicId: Int,
+    subtopicListSize: Int
+  ) {
     startActivity(
       RevisionCardActivity.createRevisionCardActivityIntent(
-        this, internalProfileId, topicId, subtopicId
+        this, internalProfileId, topicId, subtopicId, subtopicListSize
       )
     )
   }
diff --git a/app/src/main/java/org/oppia/android/app/topic/RouteToRevisionCardListener.kt b/app/src/main/java/org/oppia/android/app/topic/RouteToRevisionCardListener.kt
index 58ed7a5a47e..ad544ccdfff 100755
--- a/app/src/main/java/org/oppia/android/app/topic/RouteToRevisionCardListener.kt
+++ b/app/src/main/java/org/oppia/android/app/topic/RouteToRevisionCardListener.kt
@@ -2,5 +2,10 @@ package org.oppia.android.app.topic
 
 /** Listener for when an [TopicActivity] should route to a [RevisionCardFragment]. */
 interface RouteToRevisionCardListener {
-  fun routeToRevisionCard(internalProfileId: Int, topicId: String, subtopicId: Int)
+  fun routeToRevisionCard(
+    internalProfileId: Int,
+    topicId: String,
+    subtopicId: Int,
+    subtopicListSize: Int
+  )
 }
diff --git a/app/src/main/java/org/oppia/android/app/topic/TopicActivity.kt b/app/src/main/java/org/oppia/android/app/topic/TopicActivity.kt
index eab78d074a9..a65e6668e4a 100755
--- a/app/src/main/java/org/oppia/android/app/topic/TopicActivity.kt
+++ b/app/src/main/java/org/oppia/android/app/topic/TopicActivity.kt
@@ -72,13 +72,19 @@ class TopicActivity :
     )
   }
 
-  override fun routeToRevisionCard(internalProfileId: Int, topicId: String, subtopicId: Int) {
+  override fun routeToRevisionCard(
+    internalProfileId: Int,
+    topicId: String,
+    subtopicId: Int,
+    subtopicListSize: Int
+  ) {
     startActivity(
       RevisionCardActivity.createRevisionCardActivityIntent(
         this,
         internalProfileId,
         topicId,
-        subtopicId
+        subtopicId,
+        subtopicListSize
       )
     )
   }
diff --git a/app/src/main/java/org/oppia/android/app/topic/revision/TopicRevisionFragmentPresenter.kt b/app/src/main/java/org/oppia/android/app/topic/revision/TopicRevisionFragmentPresenter.kt
index 2d8e37227c6..bf342d0af9d 100755
--- a/app/src/main/java/org/oppia/android/app/topic/revision/TopicRevisionFragmentPresenter.kt
+++ b/app/src/main/java/org/oppia/android/app/topic/revision/TopicRevisionFragmentPresenter.kt
@@ -27,6 +27,7 @@ class TopicRevisionFragmentPresenter @Inject constructor(
   private var internalProfileId: Int = -1
   private lateinit var topicId: String
   private val routeToReviewListener = activity as RouteToRevisionCardListener
+  private var subtopicListSize: Int? = null
 
   fun handleCreateView(
     inflater: LayoutInflater,
@@ -55,11 +56,20 @@ class TopicRevisionFragmentPresenter @Inject constructor(
       this.viewModel = this@TopicRevisionFragmentPresenter.viewModel
       lifecycleOwner = fragment
     }
+
+    viewModel.subtopicLiveData.observe(fragment) {
+      this.subtopicListSize = it.size
+    }
     return binding.root
   }
 
   override fun onTopicRevisionSummaryClicked(subtopic: Subtopic) {
-    routeToReviewListener.routeToRevisionCard(internalProfileId, topicId, subtopic.subtopicId)
+    routeToReviewListener.routeToRevisionCard(
+      internalProfileId,
+      topicId,
+      subtopic.subtopicId,
+      checkNotNull(subtopicListSize) { "Subtopic list size not found." }
+    )
   }
 
   private fun createRecyclerViewAdapter(): BindableAdapter<TopicRevisionItemViewModel> {
diff --git a/app/src/main/java/org/oppia/android/app/topic/revisioncard/RevisionCardActivity.kt b/app/src/main/java/org/oppia/android/app/topic/revisioncard/RevisionCardActivity.kt
index cff4ff50cc5..27a94b1a706 100644
--- a/app/src/main/java/org/oppia/android/app/topic/revisioncard/RevisionCardActivity.kt
+++ b/app/src/main/java/org/oppia/android/app/topic/revisioncard/RevisionCardActivity.kt
@@ -7,6 +7,7 @@ import org.oppia.android.app.activity.ActivityComponentImpl
 import org.oppia.android.app.activity.InjectableAppCompatActivity
 import org.oppia.android.app.model.ScreenName.REVISION_CARD_ACTIVITY
 import org.oppia.android.app.player.exploration.BottomSheetOptionsMenuItemClickListener
+import org.oppia.android.app.topic.RouteToRevisionCardListener
 import org.oppia.android.app.topic.conceptcard.ConceptCardListener
 import org.oppia.android.util.logging.CurrentAppScreenNameIntentDecorator.decorateWithScreenName
 import javax.inject.Inject
@@ -16,6 +17,7 @@ class RevisionCardActivity :
   InjectableAppCompatActivity(),
   ReturnToTopicClickListener,
   ConceptCardListener,
+  RouteToRevisionCardListener,
   BottomSheetOptionsMenuItemClickListener {
 
   @Inject
@@ -30,7 +32,13 @@ class RevisionCardActivity :
         "Expected topic ID to be included in intent for RevisionCardActivity."
       }
       val subtopicId = intent.getIntExtra(SUBTOPIC_ID_EXTRA_KEY, -1)
-      revisionCardActivityPresenter.handleOnCreate(internalProfileId, topicId, subtopicId)
+      val subtopicListSize = intent.getIntExtra(SUBTOPIC_LIST_SIZE_EXTRA_KEY, -1)
+      revisionCardActivityPresenter.handleOnCreate(
+        internalProfileId,
+        topicId,
+        subtopicId,
+        subtopicListSize
+      )
     }
   }
 
@@ -42,23 +50,44 @@ class RevisionCardActivity :
     internal const val INTERNAL_PROFILE_ID_EXTRA_KEY = "RevisionCardActivity.internal_profile_id"
     internal const val TOPIC_ID_EXTRA_KEY = "RevisionCardActivity.topic_id"
     internal const val SUBTOPIC_ID_EXTRA_KEY = "RevisionCardActivity.subtopic_id"
+    internal const val SUBTOPIC_LIST_SIZE_EXTRA_KEY = "RevisionCardActivity.subtopic_list_size"
 
     /** Returns a new [Intent] to route to [RevisionCardActivity]. */
     fun createRevisionCardActivityIntent(
       context: Context,
       internalProfileId: Int,
       topicId: String,
-      subtopicId: Int
+      subtopicId: Int,
+      subtopicListSize: Int
     ): Intent {
       return Intent(context, RevisionCardActivity::class.java).apply {
         putExtra(INTERNAL_PROFILE_ID_EXTRA_KEY, internalProfileId)
         putExtra(TOPIC_ID_EXTRA_KEY, topicId)
         putExtra(SUBTOPIC_ID_EXTRA_KEY, subtopicId)
+        putExtra(SUBTOPIC_LIST_SIZE_EXTRA_KEY, subtopicListSize)
         decorateWithScreenName(REVISION_CARD_ACTIVITY)
       }
     }
   }
 
+  override fun routeToRevisionCard(
+    internalProfileId: Int,
+    topicId: String,
+    subtopicId: Int,
+    subtopicListSize: Int
+  ) {
+    startActivity(
+      createRevisionCardActivityIntent(
+        this,
+        internalProfileId,
+        topicId,
+        subtopicId,
+        subtopicListSize
+      )
+    )
+    this.finish()
+  }
+
   override fun onReturnToTopicClicked() {
     onBackPressed()
   }
diff --git a/app/src/main/java/org/oppia/android/app/topic/revisioncard/RevisionCardActivityPresenter.kt b/app/src/main/java/org/oppia/android/app/topic/revisioncard/RevisionCardActivityPresenter.kt
index 9fb6a2e4094..1c612583774 100644
--- a/app/src/main/java/org/oppia/android/app/topic/revisioncard/RevisionCardActivityPresenter.kt
+++ b/app/src/main/java/org/oppia/android/app/topic/revisioncard/RevisionCardActivityPresenter.kt
@@ -38,7 +38,12 @@ class RevisionCardActivityPresenter @Inject constructor(
   private lateinit var topicId: String
   private var subtopicId: Int = 0
 
-  fun handleOnCreate(internalProfileId: Int, topicId: String, subtopicId: Int) {
+  fun handleOnCreate(
+    internalProfileId: Int,
+    topicId: String,
+    subtopicId: Int,
+    subtopicListSize: Int
+  ) {
     val binding = DataBindingUtil.setContentView<RevisionCardActivityBinding>(
       activity,
       R.layout.revision_card_activity
@@ -72,7 +77,7 @@ class RevisionCardActivityPresenter @Inject constructor(
     if (getReviewCardFragment() == null) {
       activity.supportFragmentManager.beginTransaction().add(
         R.id.revision_card_fragment_placeholder,
-        RevisionCardFragment.newInstance(topicId, subtopicId, profileId)
+        RevisionCardFragment.newInstance(topicId, subtopicId, profileId, subtopicListSize)
       ).commitNow()
     }
   }
diff --git a/app/src/main/java/org/oppia/android/app/topic/revisioncard/RevisionCardFragment.kt b/app/src/main/java/org/oppia/android/app/topic/revisioncard/RevisionCardFragment.kt
index 1f663756944..61975b04d27 100755
--- a/app/src/main/java/org/oppia/android/app/topic/revisioncard/RevisionCardFragment.kt
+++ b/app/src/main/java/org/oppia/android/app/topic/revisioncard/RevisionCardFragment.kt
@@ -18,21 +18,24 @@ class RevisionCardFragment : InjectableDialogFragment() {
   companion object {
     private const val TOPIC_ID_ARGUMENT_KEY = "RevisionCardFragment.topic_id"
     private const val SUBTOPIC_ID_ARGUMENT_KEY = "RevisionCardFragment.subtopic_id"
+    private const val SUBTOPIC_LIST_SIZE_ARGUMENT_KEY = "RevisionCardFragment.subtopic_list_size"
     private const val PROFILE_ID_ARGUMENT_KEY = "RevisionCardFragment.profile_id"
 
     /**
      * Returns a new [RevisionCardFragment] to display the specific subtopic for the given topic &
      * profile.
      */
-    fun newInstance(topicId: String, subtopicId: Int, profileId: ProfileId): RevisionCardFragment {
-      return RevisionCardFragment().apply {
-        arguments = Bundle().apply {
-          putString(TOPIC_ID_ARGUMENT_KEY, topicId)
-          putInt(SUBTOPIC_ID_ARGUMENT_KEY, subtopicId)
-          putProto(PROFILE_ID_ARGUMENT_KEY, profileId)
+    fun newInstance(topicId: String, subtopicId: Int, profileId: ProfileId, subtopicListSize: Int):
+      RevisionCardFragment {
+        return RevisionCardFragment().apply {
+          arguments = Bundle().apply {
+            putString(TOPIC_ID_ARGUMENT_KEY, topicId)
+            putInt(SUBTOPIC_ID_ARGUMENT_KEY, subtopicId)
+            putProto(PROFILE_ID_ARGUMENT_KEY, profileId)
+            putInt(SUBTOPIC_LIST_SIZE_ARGUMENT_KEY, subtopicListSize)
+          }
         }
       }
-    }
   }
 
   @Inject
@@ -58,8 +61,9 @@ class RevisionCardFragment : InjectableDialogFragment() {
       }
     val subtopicId = args.getInt(SUBTOPIC_ID_ARGUMENT_KEY, -1)
     val profileId = args.getProto(PROFILE_ID_ARGUMENT_KEY, ProfileId.getDefaultInstance())
+    val subtopicListSize = args.getInt(SUBTOPIC_LIST_SIZE_ARGUMENT_KEY, -1)
     return revisionCardFragmentPresenter.handleCreateView(
-      inflater, container, topicId, subtopicId, profileId
+      inflater, container, topicId, subtopicId, profileId, subtopicListSize
     )
   }
 
diff --git a/app/src/main/java/org/oppia/android/app/topic/revisioncard/RevisionCardFragmentPresenter.kt b/app/src/main/java/org/oppia/android/app/topic/revisioncard/RevisionCardFragmentPresenter.kt
index 35d2c496e22..57931980e48 100755
--- a/app/src/main/java/org/oppia/android/app/topic/revisioncard/RevisionCardFragmentPresenter.kt
+++ b/app/src/main/java/org/oppia/android/app/topic/revisioncard/RevisionCardFragmentPresenter.kt
@@ -9,7 +9,6 @@ import org.oppia.android.app.model.ProfileId
 import org.oppia.android.app.topic.conceptcard.ConceptCardFragment
 import org.oppia.android.app.topic.conceptcard.ConceptCardFragment.Companion.CONCEPT_CARD_DIALOG_FRAGMENT_TAG
 import org.oppia.android.app.translation.AppLanguageResourceHandler
-import org.oppia.android.app.viewmodel.ViewModelProvider
 import org.oppia.android.databinding.RevisionCardFragmentBinding
 import org.oppia.android.domain.oppialogger.OppiaLogger
 import org.oppia.android.domain.translation.TranslationController
@@ -26,9 +25,9 @@ class RevisionCardFragmentPresenter @Inject constructor(
   private val htmlParserFactory: HtmlParser.Factory,
   @DefaultResourceBucketName private val resourceBucketName: String,
   @TopicHtmlParserEntityType private val entityType: String,
-  private val viewModelProvider: ViewModelProvider<RevisionCardViewModel>,
   private val translationController: TranslationController,
-  private val appLanguageResourceHandler: AppLanguageResourceHandler
+  private val appLanguageResourceHandler: AppLanguageResourceHandler,
+  private val revisionCardViewModelFactory: RevisionCardViewModel.Factory
 ) : HtmlParser.CustomOppiaTagActionListener {
   private lateinit var profileId: ProfileId
 
@@ -37,7 +36,8 @@ class RevisionCardFragmentPresenter @Inject constructor(
     container: ViewGroup?,
     topicId: String,
     subtopicId: Int,
-    profileId: ProfileId
+    profileId: ProfileId,
+    subtopicListSize: Int
   ): View? {
     this.profileId = profileId
 
@@ -48,9 +48,13 @@ class RevisionCardFragmentPresenter @Inject constructor(
         /* attachToRoot= */ false
       )
     val view = binding.revisionCardExplanationText
-    val viewModel = getReviewCardViewModel()
+    val viewModel = revisionCardViewModelFactory.create(
+      topicId,
+      subtopicId,
+      profileId,
+      subtopicListSize
+    )
 
-    viewModel.initialize(topicId, subtopicId, profileId)
     logRevisionCardEvent(topicId, subtopicId)
 
     binding.let {
@@ -59,22 +63,21 @@ class RevisionCardFragmentPresenter @Inject constructor(
     }
 
     viewModel.revisionCardLiveData.observe(
-      fragment,
-      { ephemeralRevisionCard ->
-        val pageContentsHtml =
-          translationController.extractString(
-            ephemeralRevisionCard.revisionCard.pageContents,
-            ephemeralRevisionCard.writtenTranslationContext
-          )
-        view.text = htmlParserFactory.create(
-          resourceBucketName, entityType, topicId, imageCenterAlign = true,
-          customOppiaTagActionListener = this,
-          displayLocale = appLanguageResourceHandler.getDisplayLocale()
-        ).parseOppiaHtml(
-          pageContentsHtml, view, supportsLinks = true, supportsConceptCards = true
+      fragment
+    ) { ephemeralRevisionCard ->
+      val pageContentsHtml =
+        translationController.extractString(
+          ephemeralRevisionCard.revisionCard.pageContents,
+          ephemeralRevisionCard.writtenTranslationContext
         )
-      }
-    )
+      view.text = htmlParserFactory.create(
+        resourceBucketName, entityType, topicId, imageCenterAlign = true,
+        customOppiaTagActionListener = this,
+        displayLocale = appLanguageResourceHandler.getDisplayLocale()
+      ).parseOppiaHtml(
+        pageContentsHtml, view, supportsLinks = true, supportsConceptCards = true
+      )
+    }
 
     return binding.root
   }
@@ -88,10 +91,6 @@ class RevisionCardFragmentPresenter @Inject constructor(
     }
   }
 
-  private fun getReviewCardViewModel(): RevisionCardViewModel {
-    return viewModelProvider.getForFragment(fragment, RevisionCardViewModel::class.java)
-  }
-
   private fun logRevisionCardEvent(topicId: String, subTopicId: Int) {
     oppiaLogger.logImportantEvent(oppiaLogger.createOpenRevisionCardContext(topicId, subTopicId))
   }
diff --git a/app/src/main/java/org/oppia/android/app/topic/revisioncard/RevisionCardViewModel.kt b/app/src/main/java/org/oppia/android/app/topic/revisioncard/RevisionCardViewModel.kt
index 01e859e2d1a..78117b3b9d5 100755
--- a/app/src/main/java/org/oppia/android/app/topic/revisioncard/RevisionCardViewModel.kt
+++ b/app/src/main/java/org/oppia/android/app/topic/revisioncard/RevisionCardViewModel.kt
@@ -1,46 +1,131 @@
 package org.oppia.android.app.topic.revisioncard
 
-import android.view.View
 import androidx.appcompat.app.AppCompatActivity
 import androidx.lifecycle.LiveData
 import androidx.lifecycle.Transformations
-import org.oppia.android.app.fragment.FragmentScope
 import org.oppia.android.app.model.EphemeralRevisionCard
+import org.oppia.android.app.model.EphemeralSubtopic
+import org.oppia.android.app.model.EphemeralTopic
 import org.oppia.android.app.model.ProfileId
+import org.oppia.android.app.topic.RouteToRevisionCardListener
 import org.oppia.android.app.viewmodel.ObservableViewModel
 import org.oppia.android.domain.oppialogger.OppiaLogger
 import org.oppia.android.domain.topic.TopicController
+import org.oppia.android.domain.translation.TranslationController
 import org.oppia.android.util.data.AsyncResult
 import org.oppia.android.util.data.DataProviders.Companion.toLiveData
+import org.oppia.android.util.parser.html.TopicHtmlParserEntityType
 import javax.inject.Inject
 
-/** [ObservableViewModel] for revision card, providing rich text and worked examples */
-@FragmentScope
-class RevisionCardViewModel @Inject constructor(
+/**
+ * [ObservableViewModel] for revision card, providing rich text and worked examples
+ *
+ * @property entityType the entity type corresponding to loaded images
+ * @property topicId the ID of the topic containing the subtopic being viewed
+ * @property subtopicId the ID of the subtopic being viewed
+ * @property profileId the ID of the user profile
+ * @property subtopicListSize the number of subtopics in the parent topic. This is used to determine
+ *     whether or not to show the next/previous cards.
+ */
+class RevisionCardViewModel private constructor(
   activity: AppCompatActivity,
   private val topicController: TopicController,
-  private val oppiaLogger: OppiaLogger
+  private val oppiaLogger: OppiaLogger,
+  val entityType: String,
+  private val translationController: TranslationController,
+  val topicId: String,
+  val subtopicId: Int,
+  val profileId: ProfileId,
+  val subtopicListSize: Int
 ) : ObservableViewModel() {
-  private lateinit var topicId: String
-  private var subtopicId: Int = 0
-  private lateinit var profileId: ProfileId
 
-  private val returnToTopicClickListener: ReturnToTopicClickListener =
-    activity as ReturnToTopicClickListener
+  private val routeToReviewListener = activity as RouteToRevisionCardListener
 
+  /** Called when the previous navigation card is clicked. */
+  fun onPreviousCardClicked() {
+    routeToReviewListener.routeToRevisionCard(
+      profileId.internalId,
+      topicId,
+      subtopicId - 1,
+      subtopicListSize
+    )
+  }
+
+  /** Called when the next navigation card is clicked. */
+  fun onNextCardClicked() {
+    routeToReviewListener.routeToRevisionCard(
+      profileId.internalId,
+      topicId,
+      subtopicId + 1,
+      subtopicListSize
+    )
+  }
+
+  /** The [LiveData] corresponding to the [EphemeralRevisionCard] that is currently being viewed. */
   val revisionCardLiveData: LiveData<EphemeralRevisionCard> by lazy {
     processRevisionCardLiveData()
   }
 
-  fun clickReturnToTopic(@Suppress("UNUSED_PARAMETER") v: View) {
-    returnToTopicClickListener.onReturnToTopicClicked()
+  private val topicLiveData: LiveData<AsyncResult<EphemeralTopic>> by lazy {
+    getTopicResultLiveData()
+  }
+
+  private fun getTopicResultLiveData(): LiveData<AsyncResult<EphemeralTopic>> {
+    return topicController.getTopic(profileId, topicId).toLiveData()
   }
 
-  /** Initializes this view model with necessary identifiers. */
-  fun initialize(topicId: String, subtopicId: Int, profileId: ProfileId) {
-    this.topicId = topicId
-    this.subtopicId = subtopicId
-    this.profileId = profileId
+  /**
+   * The [LiveData] that will correspond to the next revision card that may be navigated to (as a
+   * [EphemeralSubtopic]), or default instance of there isn't one.
+   */
+  val nextSubtopicLiveData: LiveData<EphemeralSubtopic> by lazy {
+    Transformations.map(topicLiveData, ::processNextSubtopicData)
+  }
+
+  /**
+   * The [LiveData] that will correspond to the previous revision card that may be navigated to (as
+   * a [EphemeralSubtopic]), or default instance of there isn't one.
+   */
+  val previousSubtopicLiveData: LiveData<EphemeralSubtopic> by lazy {
+    Transformations.map(topicLiveData, ::processPreviousSubtopicData)
+  }
+
+  /** Returns the localised title of the subtopic. */
+  fun computeTitleText(subtopic: EphemeralSubtopic?): String {
+    return subtopic?.let {
+      translationController.extractString(
+        subtopic.subtopic.title,
+        subtopic.writtenTranslationContext
+      )
+    } ?: ""
+  }
+
+  private fun processPreviousSubtopicData(
+    topicLiveData: AsyncResult<EphemeralTopic>
+  ): EphemeralSubtopic {
+    return when (topicLiveData) {
+      is AsyncResult.Success -> {
+        val topic = topicLiveData.value
+        topic.subtopicsList.find {
+          it.subtopic.subtopicId == subtopicId - 1
+        } ?: EphemeralSubtopic.getDefaultInstance()
+      }
+      else -> EphemeralSubtopic.getDefaultInstance()
+    }
+  }
+
+  private fun processNextSubtopicData(
+    topicLiveData: AsyncResult<EphemeralTopic>
+  ): EphemeralSubtopic {
+    return when (topicLiveData) {
+      is AsyncResult.Success -> {
+        val topic = topicLiveData.value
+        topic.subtopicsList.find {
+          it.subtopic.subtopicId == subtopicId + 1
+        } ?: EphemeralSubtopic.getDefaultInstance()
+      }
+      else -> EphemeralSubtopic.getDefaultInstance()
+    }
   }
 
   private val revisionCardResultLiveData: LiveData<AsyncResult<EphemeralRevisionCard>> by lazy {
@@ -65,4 +150,33 @@ class RevisionCardViewModel @Inject constructor(
       is AsyncResult.Success -> revisionCardResult.value
     }
   }
+
+  /** Factory to create new [RevisionCardViewModel]s. */
+  class Factory @Inject constructor(
+    private val activity: AppCompatActivity,
+    private val topicController: TopicController,
+    private val oppiaLogger: OppiaLogger,
+    @TopicHtmlParserEntityType private val entityType: String,
+    private val translationController: TranslationController
+  ) {
+    /** Returns a new [RevisionCardViewModel]. */
+    fun create(
+      topicId: String,
+      subtopicId: Int,
+      profileId: ProfileId,
+      subtopicListSize: Int
+    ): RevisionCardViewModel {
+      return RevisionCardViewModel(
+        activity,
+        topicController,
+        oppiaLogger,
+        entityType,
+        translationController,
+        topicId,
+        subtopicId,
+        profileId,
+        subtopicListSize
+      )
+    }
+  }
 }
diff --git a/app/src/main/res/layout-sw600dp/revision_card_fragment.xml b/app/src/main/res/layout-sw600dp/revision_card_fragment.xml
index c982805e7ae..81e4600ac43 100644
--- a/app/src/main/res/layout-sw600dp/revision_card_fragment.xml
+++ b/app/src/main/res/layout-sw600dp/revision_card_fragment.xml
@@ -1,4 +1,5 @@
-<layout xmlns:android="http://schemas.android.com/apk/res/android">
+<layout xmlns:android="http://schemas.android.com/apk/res/android"
+  xmlns:app="http://schemas.android.com/apk/res-auto">
 
   <data>
 
@@ -34,21 +35,139 @@
           style="@style/Body"
           android:layout_marginTop="@dimen/revision_card_fragment_layout_text_margin_top" />
 
-        <Button
-          android:id="@+id/revision_card_return_button"
-          style="@style/StateButtonActive"
-          android:layout_width="wrap_content"
+        <androidx.constraintlayout.widget.ConstraintLayout
+          android:id="@+id/revision_card_fragment_navigation_card_container"
+          android:layout_width="match_parent"
           android:layout_height="wrap_content"
-          android:layout_gravity="end"
-          android:layout_marginTop="@dimen/revision_card_fragment_layout_button_margin_top"
-          android:background="@drawable/state_button_primary_background"
-          android:onClick="@{viewModel::clickReturnToTopic}"
-          android:paddingStart="32dp"
-          android:paddingEnd="32dp"
-          android:text="@string/return_to_topic"
-          android:textAllCaps="true"
-          android:textColor="@color/color_def_white"
-          android:textSize="14sp" />
+          android:layout_marginTop="50dp">
+
+          <TextView
+            android:id="@+id/continue_studying_text_view"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:layout_marginStart="28dp"
+            android:layout_marginEnd="28dp"
+            android:text="@string/revision_navigation_cards_header"
+            android:textAlignment="@{viewModel.subtopicId == 1 ? View.TEXT_ALIGNMENT_TEXT_END : View.TEXT_ALIGNMENT_TEXT_START}"
+            android:textColor="@color/color_def_black"
+            android:textSize="20sp"
+            android:textStyle="bold"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toTopOf="parent" />
+
+          <com.google.android.material.card.MaterialCardView
+            android:id="@+id/previous_navigation_card"
+            android:layout_width="144dp"
+            android:layout_height="wrap_content"
+            android:layout_marginStart="28dp"
+            android:layout_marginTop="16dp"
+            android:layout_marginEnd="28dp"
+            android:layout_marginBottom="@dimen/topic_revision_summary_view_container_margin_bottom"
+            android:clipToPadding="true"
+            android:onClick="@{() -> viewModel.onPreviousCardClicked()}"
+            android:visibility="@{viewModel.subtopicId == 1 ? View.GONE : View.VISIBLE}"
+            app:cardBackgroundColor="@color/color_def_white"
+            app:cardCornerRadius="4dp"
+            app:cardElevation="4dp"
+            app:cardMaxElevation="4dp"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toBottomOf="@id/continue_studying_text_view">
+
+            <androidx.constraintlayout.widget.ConstraintLayout
+              android:layout_width="match_parent"
+              android:layout_height="wrap_content">
+
+              <org.oppia.android.app.customview.LessonThumbnailImageView
+                android:id="@+id/prev_subtopic_image_view"
+                android:layout_width="0dp"
+                android:layout_height="0dp"
+                android:importantForAccessibility="no"
+                app:entityId="@{viewModel.topicId}"
+                app:entityType="@{viewModel.entityType}"
+                app:layout_constraintDimensionRatio="H,4:3"
+                app:layout_constraintEnd_toEndOf="parent"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintTop_toTopOf="parent"
+                app:lessonThumbnail="@{viewModel.previousSubtopicLiveData.subtopic.subtopicThumbnail}" />
+
+              <TextView
+                android:id="@+id/prev_subtopic_title"
+                style="@style/TextViewStart"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:background="@color/color_def_oppia_brown_dark"
+                android:ellipsize="end"
+                android:fontFamily="sans-serif"
+                android:lines="3"
+                android:paddingStart="@dimen/topic_revision_summary_view_subtopic_title_text_view_padding_start"
+                android:paddingTop="8dp"
+                android:paddingEnd="@dimen/topic_revision_summary_view_subtopic_title_text_view_padding_end"
+                android:paddingBottom="16dp"
+                android:text="@{viewModel.computeTitleText(viewModel.previousSubtopicLiveData)}"
+                android:textColor="@color/color_def_white"
+                android:textSize="14sp"
+                android:textStyle="bold"
+                app:layout_constraintTop_toBottomOf="@id/prev_subtopic_image_view" />
+            </androidx.constraintlayout.widget.ConstraintLayout>
+          </com.google.android.material.card.MaterialCardView>
+
+          <com.google.android.material.card.MaterialCardView
+            android:id="@+id/next_navigation_card"
+            android:layout_width="144dp"
+            android:layout_height="wrap_content"
+            android:layout_marginStart="28dp"
+            android:layout_marginTop="16dp"
+            android:layout_marginEnd="28dp"
+            android:layout_marginBottom="@dimen/topic_revision_summary_view_container_margin_bottom"
+            android:clipToPadding="true"
+            android:onClick="@{() -> viewModel.onNextCardClicked()}"
+            android:visibility="@{viewModel.subtopicId &lt; viewModel.subtopicListSize ? View.VISIBLE : View.GONE}"
+            app:cardBackgroundColor="@color/color_def_white"
+            app:cardCornerRadius="4dp"
+            app:cardElevation="4dp"
+            app:cardMaxElevation="4dp"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintTop_toBottomOf="@id/continue_studying_text_view">
+
+            <androidx.constraintlayout.widget.ConstraintLayout
+              android:layout_width="match_parent"
+              android:layout_height="wrap_content">
+
+              <org.oppia.android.app.customview.LessonThumbnailImageView
+                android:id="@+id/next_subtopic_image_view"
+                android:layout_width="0dp"
+                android:layout_height="0dp"
+                android:importantForAccessibility="no"
+                app:entityId="@{viewModel.topicId}"
+                app:entityType="@{viewModel.entityType}"
+                app:layout_constraintDimensionRatio="H,4:3"
+                app:layout_constraintEnd_toEndOf="parent"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintTop_toTopOf="parent"
+                app:lessonThumbnail="@{viewModel.nextSubtopicLiveData.subtopic.subtopicThumbnail}" />
+
+              <TextView
+                android:id="@+id/next_subtopic_title"
+                style="@style/TextViewStart"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:background="@color/color_def_oppia_brown_dark"
+                android:ellipsize="end"
+                android:fontFamily="sans-serif"
+                android:lines="3"
+                android:paddingStart="@dimen/topic_revision_summary_view_subtopic_title_text_view_padding_start"
+                android:paddingTop="8dp"
+                android:paddingEnd="@dimen/topic_revision_summary_view_subtopic_title_text_view_padding_end"
+                android:paddingBottom="16dp"
+                android:text="@{viewModel.computeTitleText(viewModel.nextSubtopicLiveData)}"
+                android:textColor="@color/color_def_white"
+                android:textSize="14sp"
+                android:textStyle="bold"
+                app:layout_constraintTop_toBottomOf="@id/next_subtopic_image_view" />
+            </androidx.constraintlayout.widget.ConstraintLayout>
+          </com.google.android.material.card.MaterialCardView>
+        </androidx.constraintlayout.widget.ConstraintLayout>
       </LinearLayout>
     </LinearLayout>
   </ScrollView>
diff --git a/app/src/main/res/layout/revision_card_activity.xml b/app/src/main/res/layout/revision_card_activity.xml
index 47059fe22df..0728b1029bd 100644
--- a/app/src/main/res/layout/revision_card_activity.xml
+++ b/app/src/main/res/layout/revision_card_activity.xml
@@ -22,7 +22,7 @@
         android:id="@+id/revision_card_toolbar"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:background="@color/component_color_revision_card_activity_toolbar_color"
+        android:background="@color/component_color_concept_card_fragment_toolbar_color"
         android:gravity="center_vertical"
         android:minHeight="?attr/actionBarSize"
         android:theme="@style/Widget.AppCompat.ActionBar"
diff --git a/app/src/main/res/layout/revision_card_fragment.xml b/app/src/main/res/layout/revision_card_fragment.xml
index 2edaf5c6393..51a3b837774 100644
--- a/app/src/main/res/layout/revision_card_fragment.xml
+++ b/app/src/main/res/layout/revision_card_fragment.xml
@@ -1,4 +1,5 @@
-<layout xmlns:android="http://schemas.android.com/apk/res/android">
+<layout xmlns:android="http://schemas.android.com/apk/res/android"
+  xmlns:app="http://schemas.android.com/apk/res-auto">
 
   <data>
 
@@ -27,25 +28,143 @@
         style="@style/Body"
         android:layout_marginStart="@dimen/revision_card_fragment_layout_margin_start"
         android:layout_marginTop="@dimen/revision_card_fragment_layout_text_margin_top"
-        android:layout_marginEnd="@dimen/revision_card_fragment_layout_margin_end" />
+        android:layout_marginEnd="@dimen/revision_card_fragment_layout_margin_end"
+        android:minWidth="48dp"
+        android:minHeight="48dp" />
 
-      <Button
-        android:id="@+id/revision_card_return_button"
-        style="@style/StateButtonActive"
-        android:layout_width="wrap_content"
+      <androidx.constraintlayout.widget.ConstraintLayout
+        android:id="@+id/revision_card_fragment_navigation_card_container"
+        android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:layout_gravity="end"
-        android:layout_marginStart="@dimen/revision_card_fragment_layout_margin_start"
-        android:layout_marginTop="@dimen/revision_card_fragment_layout_button_margin_top"
-        android:layout_marginEnd="@dimen/revision_card_fragment_layout_margin_end"
-        android:background="@drawable/state_button_primary_background"
-        android:onClick="@{viewModel::clickReturnToTopic}"
-        android:paddingStart="32dp"
-        android:paddingEnd="32dp"
-        android:text="@string/return_to_topic"
-        android:textAllCaps="true"
-        android:textColor="@color/color_def_white"
-        android:textSize="14sp" />
+        android:layout_marginTop="50dp">
+
+        <TextView
+          android:id="@+id/continue_studying_text_view"
+          android:layout_width="match_parent"
+          android:layout_height="wrap_content"
+          android:layout_marginStart="28dp"
+          android:layout_marginEnd="28dp"
+          android:text="@string/revision_navigation_cards_header"
+          android:textAlignment="@{viewModel.subtopicId == 1 ? View.TEXT_ALIGNMENT_TEXT_END : View.TEXT_ALIGNMENT_TEXT_START}"
+          android:textColor="@color/color_def_black"
+          android:textSize="20sp"
+          android:textStyle="bold"
+          app:layout_constraintEnd_toEndOf="parent"
+          app:layout_constraintStart_toStartOf="parent"
+          app:layout_constraintTop_toTopOf="parent" />
+
+        <com.google.android.material.card.MaterialCardView
+          android:id="@+id/previous_navigation_card"
+          android:layout_width="144dp"
+          android:layout_height="wrap_content"
+          android:layout_marginStart="28dp"
+          android:layout_marginTop="16dp"
+          android:layout_marginEnd="28dp"
+          android:layout_marginBottom="@dimen/topic_revision_summary_view_container_margin_bottom"
+          android:clipToPadding="true"
+          android:onClick="@{() -> viewModel.onPreviousCardClicked()}"
+          android:visibility="@{viewModel.subtopicId == 1 ? View.GONE : View.VISIBLE}"
+          app:cardBackgroundColor="@color/color_def_white"
+          app:cardCornerRadius="4dp"
+          app:cardElevation="4dp"
+          app:cardMaxElevation="4dp"
+          app:layout_constraintStart_toStartOf="parent"
+          app:layout_constraintTop_toBottomOf="@id/continue_studying_text_view">
+
+          <androidx.constraintlayout.widget.ConstraintLayout
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content">
+
+            <org.oppia.android.app.customview.LessonThumbnailImageView
+              android:id="@+id/prev_subtopic_image_view"
+              android:layout_width="0dp"
+              android:layout_height="0dp"
+              android:importantForAccessibility="no"
+              app:entityId="@{viewModel.topicId}"
+              app:entityType="@{viewModel.entityType}"
+              app:layout_constraintDimensionRatio="H,4:3"
+              app:layout_constraintEnd_toEndOf="parent"
+              app:layout_constraintStart_toStartOf="parent"
+              app:layout_constraintTop_toTopOf="parent"
+              app:lessonThumbnail="@{viewModel.previousSubtopicLiveData.subtopic.subtopicThumbnail}" />
+
+            <TextView
+              android:id="@+id/prev_subtopic_title"
+              style="@style/TextViewStart"
+              android:layout_width="match_parent"
+              android:layout_height="wrap_content"
+              android:background="@color/color_def_oppia_brown_dark"
+              android:ellipsize="end"
+              android:fontFamily="sans-serif"
+              android:lines="3"
+              android:paddingStart="@dimen/topic_revision_summary_view_subtopic_title_text_view_padding_start"
+              android:paddingTop="8dp"
+              android:paddingEnd="@dimen/topic_revision_summary_view_subtopic_title_text_view_padding_end"
+              android:paddingBottom="16dp"
+              android:text="@{viewModel.computeTitleText(viewModel.previousSubtopicLiveData)}"
+              android:textColor="@color/color_def_white"
+              android:textSize="14sp"
+              android:textStyle="bold"
+              app:layout_constraintTop_toBottomOf="@id/prev_subtopic_image_view" />
+          </androidx.constraintlayout.widget.ConstraintLayout>
+        </com.google.android.material.card.MaterialCardView>
+
+        <com.google.android.material.card.MaterialCardView
+          android:id="@+id/next_navigation_card"
+          android:layout_width="144dp"
+          android:layout_height="wrap_content"
+          android:layout_marginStart="28dp"
+          android:layout_marginTop="16dp"
+          android:layout_marginEnd="28dp"
+          android:layout_marginBottom="@dimen/topic_revision_summary_view_container_margin_bottom"
+          android:clipToPadding="true"
+          android:onClick="@{() -> viewModel.onNextCardClicked()}"
+          android:visibility="@{viewModel.subtopicId &lt; viewModel.subtopicListSize ? View.VISIBLE : View.GONE}"
+          app:cardBackgroundColor="@color/color_def_white"
+          app:cardCornerRadius="4dp"
+          app:cardElevation="4dp"
+          app:cardMaxElevation="4dp"
+          app:layout_constraintEnd_toEndOf="parent"
+          app:layout_constraintTop_toBottomOf="@id/continue_studying_text_view">
+
+          <androidx.constraintlayout.widget.ConstraintLayout
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content">
+
+            <org.oppia.android.app.customview.LessonThumbnailImageView
+              android:id="@+id/next_subtopic_image_view"
+              android:layout_width="0dp"
+              android:layout_height="0dp"
+              android:importantForAccessibility="no"
+              app:entityId="@{viewModel.topicId}"
+              app:entityType="@{viewModel.entityType}"
+              app:layout_constraintDimensionRatio="H,4:3"
+              app:layout_constraintEnd_toEndOf="parent"
+              app:layout_constraintStart_toStartOf="parent"
+              app:layout_constraintTop_toTopOf="parent"
+              app:lessonThumbnail="@{viewModel.nextSubtopicLiveData.subtopic.subtopicThumbnail}" />
+
+            <TextView
+              android:id="@+id/next_subtopic_title"
+              style="@style/TextViewStart"
+              android:layout_width="match_parent"
+              android:layout_height="wrap_content"
+              android:background="@color/color_def_oppia_brown_dark"
+              android:ellipsize="end"
+              android:fontFamily="sans-serif"
+              android:lines="3"
+              android:paddingStart="@dimen/topic_revision_summary_view_subtopic_title_text_view_padding_start"
+              android:paddingTop="8dp"
+              android:paddingEnd="@dimen/topic_revision_summary_view_subtopic_title_text_view_padding_end"
+              android:paddingBottom="16dp"
+              android:text="@{viewModel.computeTitleText(viewModel.nextSubtopicLiveData)}"
+              android:textColor="@color/color_def_white"
+              android:textSize="14sp"
+              android:textStyle="bold"
+              app:layout_constraintTop_toBottomOf="@id/next_subtopic_image_view" />
+          </androidx.constraintlayout.widget.ConstraintLayout>
+        </com.google.android.material.card.MaterialCardView>
+      </androidx.constraintlayout.widget.ConstraintLayout>
     </LinearLayout>
   </ScrollView>
 </layout>
diff --git a/app/src/main/res/values/color_defs.xml b/app/src/main/res/values/color_defs.xml
index 81d31955958..58a698527dd 100644
--- a/app/src/main/res/values/color_defs.xml
+++ b/app/src/main/res/values/color_defs.xml
@@ -6,6 +6,7 @@
   <color name="color_def_oppia_light_green">#F0FFFF</color>
   <color name="color_def_oppia_light_yellow">#FFFFF0</color>
   <color name="color_def_oppia_brown_dark">#BE563C</color>
+  <color name="color_def_oppia_reddish_brown">#882814</color>
   <color name="color_def_oppia_brown">#C55F45</color>
   <color name="color_def_oppia_light_brown">#E76F51</color>
   <color name="color_def_oppia_stroke_blue">#4D395FD0</color>
diff --git a/app/src/main/res/values/color_palette.xml b/app/src/main/res/values/color_palette.xml
index fea31cf25b0..a41db0cb20e 100644
--- a/app/src/main/res/values/color_palette.xml
+++ b/app/src/main/res/values/color_palette.xml
@@ -31,6 +31,7 @@
   <color name="color_palette_arrow_color">@color/color_def_accessible_grey</color>
   <color name="color_palette_exploration_background_color">@color/color_def_oppia_light_green</color>
   <color name="color_palette_revision_card_background_color">@color/color_def_oppia_light_green</color>
+  <color name="color_palette_revision_card_fragment_status_bar_color">@color/color_def_oppia_reddish_brown</color>
   <color name="color_palette_content_background_solid_color">@color/color_def_oppia_solid_blue</color>
   <color name="color_palette_content_background_stroke_color">@color/color_def_oppia_stroke_blue</color>
   <color name="color_palette_rounded_rect_background_color">@color/color_def_white</color>
diff --git a/app/src/main/res/values/component_colors.xml b/app/src/main/res/values/component_colors.xml
index 5896bdb1115..e5f8b9b2d3a 100644
--- a/app/src/main/res/values/component_colors.xml
+++ b/app/src/main/res/values/component_colors.xml
@@ -157,7 +157,7 @@
   <!-- Revision Card Activity -->
   <color name="component_color_revision_card_activity_background_color">@color/color_palette_revision_card_background_color</color>
   <color name="component_color_revision_card_activity_layout_background_color">@color/color_palette_revision_card_layout_background_color</color>
-  <color name="component_color_revision_card_activity_toolbar_color">@color/color_palette_secondary_toolbar_color</color>
+  <color name="component_color_revision_card_activity_toolbar_color">@color/color_palette_revision_card_fragment_status_bar_color</color>
   <!-- Third Party Dependency List Activity -->
   <color name="component_color_third_party_dependency_list_activity_background_color">@color/color_palette_dark_background_color</color>
   <color name="component_color_third_party_dependency_list_activity_dependency_name_text_view_color">@color/color_palette_dark_text_color</color>
diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml
index 3c7e1b201e4..4754785c4a9 100755
--- a/app/src/main/res/values/strings.xml
+++ b/app/src/main/res/values/strings.xml
@@ -572,4 +572,5 @@
   <string name="profile_edit_fragment_test_activity_label">Profile Edit Fragment Test Activity</string>
   <string name="administrator_controls_fragment_test_activity_label">Administrator Controls Fragment Test Activity</string>
   <string name="select_a_topic_to_start">Select a Topic to Start</string>
+  <string name="revision_navigation_cards_header">Continue Studying</string>
 </resources>
diff --git a/app/src/main/res/values/themes.xml b/app/src/main/res/values/themes.xml
index 91650c8fc40..e582878b6bc 100644
--- a/app/src/main/res/values/themes.xml
+++ b/app/src/main/res/values/themes.xml
@@ -18,6 +18,10 @@
     <item name="android:windowAnimationStyle">@style/Animation.Activity</item>
   </style>
 
+  <style name="RevisionCardActivityTheme" parent="Theme.MaterialComponents.Light.NoActionBar.Bridge">
+    <item name="colorPrimaryDark">@color/component_color_revision_card_activity_toolbar_color</item>
+  </style>
+
   <style name="OppiaThemeWithoutActionBarColorAccentColorPrimary" parent="Theme.MaterialComponents.Light.NoActionBar.Bridge">
     <item name="colorPrimary">@color/color_palette_primary_color</item>
     <item name="colorPrimaryDark">@color/color_palette_primary_dark_color</item>
diff --git a/app/src/sharedTest/java/org/oppia/android/app/topic/revisioncard/RevisionCardActivityTest.kt b/app/src/sharedTest/java/org/oppia/android/app/topic/revisioncard/RevisionCardActivityTest.kt
index 6005cfcaea4..81782910e0c 100644
--- a/app/src/sharedTest/java/org/oppia/android/app/topic/revisioncard/RevisionCardActivityTest.kt
+++ b/app/src/sharedTest/java/org/oppia/android/app/topic/revisioncard/RevisionCardActivityTest.kt
@@ -107,6 +107,8 @@ import org.robolectric.annotation.LooperMode
 import javax.inject.Inject
 import javax.inject.Singleton
 
+private const val FRACTIONS_SUBTOPIC_LIST_SIZE = 4
+
 /** Tests for [RevisionCardActivity]. */
 @RunWith(AndroidJUnit4::class)
 @LooperMode(LooperMode.Mode.PAUSED)
@@ -149,7 +151,7 @@ class RevisionCardActivityTest {
   @Test
   fun testActivity_createIntent_verifyScreenNameInIntent() {
     val currentScreenName = RevisionCardActivity.createRevisionCardActivityIntent(
-      context, 1, FRACTIONS_TOPIC_ID, 1
+      context, 1, FRACTIONS_TOPIC_ID, 1, FRACTIONS_SUBTOPIC_LIST_SIZE
     ).extractCurrentAppScreenName()
 
     assertThat(currentScreenName).isEqualTo(ScreenName.REVISION_CARD_ACTIVITY)
@@ -263,9 +265,9 @@ class RevisionCardActivityTest {
   private fun createRevisionCardActivityIntent(
     internalProfileId: Int,
     topicId: String,
-    subtopicId: Int
+    subtopicId: Int,
   ) = RevisionCardActivity.createRevisionCardActivityIntent(
-    context, internalProfileId, topicId, subtopicId
+    context, internalProfileId, topicId, subtopicId, FRACTIONS_SUBTOPIC_LIST_SIZE
   )
 
   private fun updateContentLanguage(profileId: ProfileId, language: OppiaLanguage) {
diff --git a/app/src/sharedTest/java/org/oppia/android/app/topic/revisioncard/RevisionCardFragmentTest.kt b/app/src/sharedTest/java/org/oppia/android/app/topic/revisioncard/RevisionCardFragmentTest.kt
index 9f7bf8e9acd..819453de52f 100644
--- a/app/src/sharedTest/java/org/oppia/android/app/topic/revisioncard/RevisionCardFragmentTest.kt
+++ b/app/src/sharedTest/java/org/oppia/android/app/topic/revisioncard/RevisionCardFragmentTest.kt
@@ -13,6 +13,7 @@ import androidx.test.espresso.Espresso.onView
 import androidx.test.espresso.UiController
 import androidx.test.espresso.ViewAction
 import androidx.test.espresso.action.ViewActions.click
+import androidx.test.espresso.action.ViewActions.scrollTo
 import androidx.test.espresso.assertion.ViewAssertions.doesNotExist
 import androidx.test.espresso.assertion.ViewAssertions.matches
 import androidx.test.espresso.intent.Intents
@@ -29,6 +30,7 @@ import dagger.Component
 import dagger.Module
 import dagger.Provides
 import org.hamcrest.CoreMatchers.containsString
+import org.hamcrest.CoreMatchers.not
 import org.hamcrest.Description
 import org.hamcrest.Matcher
 import org.hamcrest.TypeSafeMatcher
@@ -94,6 +96,7 @@ import org.oppia.android.domain.topic.SUBTOPIC_TOPIC_ID_2
 import org.oppia.android.domain.translation.TranslationController
 import org.oppia.android.domain.workmanager.WorkManagerConfigurationModule
 import org.oppia.android.testing.BuildEnvironment
+import org.oppia.android.testing.DisableAccessibilityChecks
 import org.oppia.android.testing.OppiaTestRule
 import org.oppia.android.testing.RunOn
 import org.oppia.android.testing.TestLogReportingModule
@@ -127,6 +130,12 @@ import org.robolectric.annotation.LooperMode
 import javax.inject.Inject
 import javax.inject.Singleton
 
+private const val FRACTIONS_SUBTOPIC_TOPIC_ID_0 = 1
+private const val FRACTIONS_SUBTOPIC_TOPIC_ID_1 = 2
+private const val FRACTIONS_SUBTOPIC_TOPIC_ID_2 = 3
+private const val FRACTIONS_SUBTOPIC_TOPIC_ID_3 = 4
+private const val FRACTIONS_SUBTOPIC_LIST_SIZE = 4
+
 /** Tests for [RevisionCardActivity]. */
 @RunWith(AndroidJUnit4::class)
 @LooperMode(LooperMode.Mode.PAUSED)
@@ -155,6 +164,8 @@ class RevisionCardFragmentTest {
 
   private val profileId = ProfileId.newBuilder().apply { internalId = 1 }.build()
 
+  private val SUBTOPIC_ID_EXTRA_KEY = "RevisionCardActivity.subtopic_id"
+
   @Before
   fun setUp() {
     Intents.init()
@@ -175,7 +186,8 @@ class RevisionCardFragmentTest {
         context,
         profileId.internalId,
         FRACTIONS_TOPIC_ID,
-        SUBTOPIC_TOPIC_ID
+        SUBTOPIC_TOPIC_ID,
+        FRACTIONS_SUBTOPIC_LIST_SIZE
       )
     ).use {
       testCoroutineDispatchers.runCurrent()
@@ -195,7 +207,8 @@ class RevisionCardFragmentTest {
         context,
         profileId.internalId,
         FRACTIONS_TOPIC_ID,
-        SUBTOPIC_TOPIC_ID
+        SUBTOPIC_TOPIC_ID,
+        FRACTIONS_SUBTOPIC_LIST_SIZE
       )
     ).use {
       testCoroutineDispatchers.runCurrent()
@@ -221,7 +234,8 @@ class RevisionCardFragmentTest {
         context,
         profileId.internalId,
         FRACTIONS_TOPIC_ID,
-        SUBTOPIC_TOPIC_ID
+        SUBTOPIC_TOPIC_ID,
+        FRACTIONS_SUBTOPIC_LIST_SIZE
       )
     ).use {
       testCoroutineDispatchers.runCurrent()
@@ -248,7 +262,8 @@ class RevisionCardFragmentTest {
         context,
         profileId.internalId,
         FRACTIONS_TOPIC_ID,
-        SUBTOPIC_TOPIC_ID
+        SUBTOPIC_TOPIC_ID,
+        FRACTIONS_SUBTOPIC_LIST_SIZE
       )
     ).use {
       testCoroutineDispatchers.runCurrent()
@@ -270,7 +285,8 @@ class RevisionCardFragmentTest {
         context,
         profileId.internalId,
         FRACTIONS_TOPIC_ID,
-        SUBTOPIC_TOPIC_ID
+        SUBTOPIC_TOPIC_ID,
+        FRACTIONS_SUBTOPIC_LIST_SIZE
       )
     ).use {
       testCoroutineDispatchers.runCurrent()
@@ -287,7 +303,8 @@ class RevisionCardFragmentTest {
         context,
         profileId.internalId,
         FRACTIONS_TOPIC_ID,
-        SUBTOPIC_TOPIC_ID_2
+        SUBTOPIC_TOPIC_ID_2,
+        FRACTIONS_SUBTOPIC_LIST_SIZE
       )
     ).use {
       testCoroutineDispatchers.runCurrent()
@@ -297,51 +314,119 @@ class RevisionCardFragmentTest {
     }
   }
 
+  // TODO(#4631): Remove this once #4235 is resolved.
+  @DisableAccessibilityChecks
   @Test
-  fun testRevisionCardTestActivity_fractionSubtopicId1_checkReturnToTopicButtonIsDisplayedSuccessfully() { // ktlint-disable max-line-length
+  fun testRevisionCardTestActivity_fractionSubtopicId0_checkOnlyPreviousNavCardIsNotDisplayed() {
     launch<RevisionCardActivity>(
       createRevisionCardActivityIntent(
         context,
         profileId.internalId,
         FRACTIONS_TOPIC_ID,
-        SUBTOPIC_TOPIC_ID
+        FRACTIONS_SUBTOPIC_TOPIC_ID_0,
+        FRACTIONS_SUBTOPIC_LIST_SIZE
       )
     ).use {
       testCoroutineDispatchers.runCurrent()
+      onView(withId(R.id.revision_card_fragment_navigation_card_container)).perform(scrollTo())
+      onView(withId(R.id.next_navigation_card)).check(matches(isDisplayed()))
+      onView(withId(R.id.previous_navigation_card)).check(matches(not((isDisplayed()))))
+    }
+  }
 
-      onView(withId(R.id.revision_card_return_button))
-        .check(matches(withText(R.string.return_to_topic)))
+  // TODO(#4631): Remove this once #4235 is resolved.
+  @DisableAccessibilityChecks
+  @Test
+  fun testRevisionCardTestActivity_fractionSubtopicId1_checkPreviousAndNextNavCardsDisplayed() {
+    launch<RevisionCardActivity>(
+      createRevisionCardActivityIntent(
+        context,
+        profileId.internalId,
+        FRACTIONS_TOPIC_ID,
+        FRACTIONS_SUBTOPIC_TOPIC_ID_1,
+        FRACTIONS_SUBTOPIC_LIST_SIZE
+      )
+    ).use {
+      testCoroutineDispatchers.runCurrent()
+      onView(withId(R.id.revision_card_fragment_navigation_card_container)).perform(scrollTo())
+      onView(withId(R.id.previous_navigation_card)).check(matches(isDisplayed()))
+      onView(withId(R.id.next_navigation_card)).check(matches(isDisplayed()))
     }
   }
 
+  // TODO(#4631): Remove this once #4235 is resolved.
+  @DisableAccessibilityChecks
   @Test
-  fun testRevisionCardTestActivity_configurationChange_toolbarTitle_fractionSubtopicId1_isDisplayedCorrectly() { // ktlint-disable max-line-length
+  fun testRevisionCardTestActivity_fractionSubtopicId3_checkOnlyNextNavCardIsNotDisplayed() {
     launch<RevisionCardActivity>(
       createRevisionCardActivityIntent(
         context,
         profileId.internalId,
         FRACTIONS_TOPIC_ID,
-        SUBTOPIC_TOPIC_ID
+        FRACTIONS_SUBTOPIC_TOPIC_ID_3,
+        FRACTIONS_SUBTOPIC_LIST_SIZE
       )
     ).use {
       testCoroutineDispatchers.runCurrent()
+      onView(withId(R.id.revision_card_fragment_navigation_card_container)).perform(scrollTo())
+      testCoroutineDispatchers.runCurrent()
+      onView(withId(R.id.previous_navigation_card)).check(matches(isDisplayed()))
+      onView(withId(R.id.next_navigation_card)).check(matches(not(isDisplayed())))
+    }
+  }
 
-      onView(isRoot()).perform(orientationLandscape())
+  // TODO(#4631): Remove this once #4235 is resolved.
+  @DisableAccessibilityChecks
+  @Test
+  fun testRevisionCardTestActivity_fracSubtopicId1_clickPrevNavCard_opensRevisionCardActivity() {
+    launch<RevisionCardActivity>(
+      createRevisionCardActivityIntent(
+        context,
+        profileId.internalId,
+        FRACTIONS_TOPIC_ID,
+        FRACTIONS_SUBTOPIC_TOPIC_ID_1,
+        FRACTIONS_SUBTOPIC_LIST_SIZE
+      )
+    ).use {
+      testCoroutineDispatchers.runCurrent()
+      onView(withId(R.id.previous_navigation_card)).perform(click())
       testCoroutineDispatchers.runCurrent()
+      intended(hasComponent(RevisionCardActivity::class.java.name))
+      intended(hasExtra(SUBTOPIC_ID_EXTRA_KEY, FRACTIONS_SUBTOPIC_TOPIC_ID_0))
+    }
+  }
 
-      onView(withId(R.id.revision_card_toolbar_title))
-        .check(matches(withText("What is a Fraction?")))
+  // TODO(#4631): Remove this once #4235 is resolved.
+  @DisableAccessibilityChecks
+  @Test
+  fun testRevisionCardTestActivity_fracSubtopicId1_clickNextNavCard_opensRevisionCardActivity() {
+    launch<RevisionCardActivity>(
+      createRevisionCardActivityIntent(
+        context,
+        profileId.internalId,
+        FRACTIONS_TOPIC_ID,
+        FRACTIONS_SUBTOPIC_TOPIC_ID_1,
+        FRACTIONS_SUBTOPIC_LIST_SIZE
+      )
+    ).use {
+      testCoroutineDispatchers.runCurrent()
+      onView(withId(R.id.revision_card_fragment_navigation_card_container)).perform(scrollTo())
+      onView(withId(R.id.next_navigation_card)).perform(click())
+      testCoroutineDispatchers.runCurrent()
+      intended(hasComponent(RevisionCardActivity::class.java.name))
+      intended(hasExtra(SUBTOPIC_ID_EXTRA_KEY, FRACTIONS_SUBTOPIC_TOPIC_ID_2))
     }
   }
 
   @Test
-  fun testRevisionCardTestActivity_configurationChange_fractionSubtopicId2_checkExplanationAreDisplayedSuccessfully() { // ktlint-disable max-line-length
+  fun testRevisionCardTestActivity_configurationChange_toolbarTitle_fractionSubtopicId1_isDisplayedCorrectly() { // ktlint-disable max-line-length
     launch<RevisionCardActivity>(
       createRevisionCardActivityIntent(
         context,
         profileId.internalId,
         FRACTIONS_TOPIC_ID,
-        SUBTOPIC_TOPIC_ID_2
+        SUBTOPIC_TOPIC_ID,
+        FRACTIONS_SUBTOPIC_LIST_SIZE
       )
     ).use {
       testCoroutineDispatchers.runCurrent()
@@ -349,19 +434,20 @@ class RevisionCardFragmentTest {
       onView(isRoot()).perform(orientationLandscape())
       testCoroutineDispatchers.runCurrent()
 
-      onView(withId(R.id.revision_card_explanation_text))
-        .check(matches(withText(containsString("Description of subtopic is here."))))
+      onView(withId(R.id.revision_card_toolbar_title))
+        .check(matches(withText("What is a Fraction?")))
     }
   }
 
   @Test
-  fun testRevisionCardTestActivity_configurationChange_fractionSubtopicId1_checkReturnToTopicButtonIsDisplayedSuccessfully() { // ktlint-disable max-line-length
+  fun testRevisionCardTestActivity_configurationChange_fractionSubtopicId2_checkExplanationAreDisplayedSuccessfully() { // ktlint-disable max-line-length
     launch<RevisionCardActivity>(
       createRevisionCardActivityIntent(
         context,
         profileId.internalId,
         FRACTIONS_TOPIC_ID,
-        SUBTOPIC_TOPIC_ID
+        SUBTOPIC_TOPIC_ID_2,
+        FRACTIONS_SUBTOPIC_LIST_SIZE
       )
     ).use {
       testCoroutineDispatchers.runCurrent()
@@ -369,8 +455,8 @@ class RevisionCardFragmentTest {
       onView(isRoot()).perform(orientationLandscape())
       testCoroutineDispatchers.runCurrent()
 
-      onView(withId(R.id.revision_card_return_button))
-        .check(matches(withText(R.string.return_to_topic)))
+      onView(withId(R.id.revision_card_explanation_text))
+        .check(matches(withText(containsString("Description of subtopic is here."))))
     }
   }
 
@@ -381,7 +467,8 @@ class RevisionCardFragmentTest {
         context,
         profileId.internalId,
         FRACTIONS_TOPIC_ID,
-        subtopicId = 2
+        subtopicId = 2,
+        FRACTIONS_SUBTOPIC_LIST_SIZE
       )
     ).use {
       testCoroutineDispatchers.runCurrent()
@@ -399,7 +486,8 @@ class RevisionCardFragmentTest {
         context,
         profileId.internalId,
         FRACTIONS_TOPIC_ID,
-        subtopicId = 2
+        subtopicId = 2,
+        FRACTIONS_SUBTOPIC_LIST_SIZE
       )
     ).use {
       testCoroutineDispatchers.runCurrent()
@@ -420,7 +508,8 @@ class RevisionCardFragmentTest {
         context,
         profileId.internalId,
         FRACTIONS_TOPIC_ID,
-        subtopicId = 2
+        subtopicId = 2,
+        FRACTIONS_SUBTOPIC_LIST_SIZE
       )
     ).use {
       testCoroutineDispatchers.runCurrent()
@@ -444,7 +533,8 @@ class RevisionCardFragmentTest {
         context,
         profileId.internalId,
         FRACTIONS_TOPIC_ID,
-        subtopicId = 2
+        subtopicId = 2,
+        FRACTIONS_SUBTOPIC_LIST_SIZE
       )
     ).use {
       testCoroutineDispatchers.runCurrent()
@@ -472,7 +562,8 @@ class RevisionCardFragmentTest {
         context,
         profileId.internalId,
         "test_topic_id_0",
-        subtopicId = 1
+        subtopicId = 1,
+        FRACTIONS_SUBTOPIC_LIST_SIZE
       )
     ).use {
       testCoroutineDispatchers.runCurrent()
@@ -492,7 +583,8 @@ class RevisionCardFragmentTest {
         context,
         profileId.internalId,
         "test_topic_id_0",
-        subtopicId = 1
+        subtopicId = 1,
+        FRACTIONS_SUBTOPIC_LIST_SIZE
       )
     ).use {
       testCoroutineDispatchers.runCurrent()
@@ -516,7 +608,8 @@ class RevisionCardFragmentTest {
         context,
         profileId.internalId,
         "test_topic_id_0",
-        subtopicId = 1
+        subtopicId = 1,
+        FRACTIONS_SUBTOPIC_LIST_SIZE
       )
     ).use {
       testCoroutineDispatchers.runCurrent()
diff --git a/app/src/test/java/org/oppia/android/app/topic/revisioncard/RevisionCardActivityLocalTest.kt b/app/src/test/java/org/oppia/android/app/topic/revisioncard/RevisionCardActivityLocalTest.kt
index ed2f80de24b..b2456d3675d 100644
--- a/app/src/test/java/org/oppia/android/app/topic/revisioncard/RevisionCardActivityLocalTest.kt
+++ b/app/src/test/java/org/oppia/android/app/topic/revisioncard/RevisionCardActivityLocalTest.kt
@@ -94,6 +94,7 @@ class RevisionCardActivityLocalTest {
   val initializeDefaultLocaleRule = InitializeDefaultLocaleRule()
 
   private val internalProfileId = 1
+  private val fractionsSubtopicListSize: Int = 4
 
   @Inject
   lateinit var fakeEventLogger: FakeEventLogger
@@ -110,7 +111,8 @@ class RevisionCardActivityLocalTest {
         ApplicationProvider.getApplicationContext(),
         internalProfileId,
         FRACTIONS_TOPIC_ID,
-        SUBTOPIC_TOPIC_ID
+        SUBTOPIC_TOPIC_ID,
+        fractionsSubtopicListSize
       )
     ).use {
       val event = fakeEventLogger.getMostRecentEvent()
diff --git a/scripts/assets/kdoc_validity_exemptions.textproto b/scripts/assets/kdoc_validity_exemptions.textproto
index b2200d5aa13..19acbc7b1e1 100644
--- a/scripts/assets/kdoc_validity_exemptions.textproto
+++ b/scripts/assets/kdoc_validity_exemptions.textproto
@@ -292,7 +292,6 @@ exempted_file_path: "app/src/main/java/org/oppia/android/app/topic/revisioncard/
 exempted_file_path: "app/src/main/java/org/oppia/android/app/topic/revisioncard/RevisionCardActivityPresenter.kt"
 exempted_file_path: "app/src/main/java/org/oppia/android/app/topic/revisioncard/RevisionCardFragment.kt"
 exempted_file_path: "app/src/main/java/org/oppia/android/app/topic/revisioncard/RevisionCardFragmentPresenter.kt"
-exempted_file_path: "app/src/main/java/org/oppia/android/app/topic/revisioncard/RevisionCardViewModel.kt"
 exempted_file_path: "app/src/main/java/org/oppia/android/app/view/ViewComponentImpl.kt"
 exempted_file_path: "app/src/main/java/org/oppia/android/app/walkthrough/WalkthroughActivity.kt"
 exempted_file_path: "app/src/main/java/org/oppia/android/app/walkthrough/WalkthroughActivityPresenter.kt"