From 1bb1ffa97b2c14e002fa0371991f4f25351a79cd Mon Sep 17 00:00:00 2001
From: Rajat Talesra <rajattalesra4914@gmail.com>
Date: Mon, 17 Aug 2020 13:01:24 +0530
Subject: [PATCH] Fixes part of #40 & #42: Generalisation Highfi Mobile
 Portrait + Landscape - Buttons (#1653)

* Continue/ Previous button margins

* Next button margins added

* Submit button margin added

* Removed start/end margin from error

* Reply button margins

* Topic button margin top changed

* Nit fix

* Bottom padding added

* Question Progress

* Changed congratulations margins

* Updated drag and drop margins

Co-authored-by: Rajat Talesra <talesra@google.com>
---
 .../layout-land/continue_interaction_item.xml | 32 ++++++++--
 .../continue_navigation_button_item.xml       | 44 +++++++++----
 .../drag_drop_interaction_item.xml            | 10 ++-
 .../layout-land/fraction_interaction_item.xml |  2 -
 .../main/res/layout-land/next_button_item.xml | 36 ++++++++---
 .../numeric_input_interaction_item.xml        |  2 -
 .../res/layout-land/previous_button_item.xml  | 34 +++++++---
 .../layout-land/question_player_fragment.xml  | 18 +++---
 .../res/layout-land/replay_button_item.xml    | 11 ++--
 .../return_to_topic_button_item.xml           | 34 +++++++---
 .../main/res/layout-land/state_fragment.xml   |  6 +-
 .../res/layout-land/submit_button_item.xml    | 34 +++++++---
 .../continue_interaction_item.xml             | 50 ++++++---------
 .../continue_navigation_button_item.xml       | 60 +++++++-----------
 .../drag_drop_interaction_item.xml            |  9 ++-
 .../fraction_interaction_item.xml             |  2 -
 .../layout-sw600dp-land/next_button_item.xml  | 51 ++++++---------
 .../numeric_input_interaction_item.xml        |  2 -
 .../previous_button_item.xml                  | 49 +++++----------
 .../question_player_fragment.xml              |  4 ++
 .../replay_button_item.xml                    | 48 +++-----------
 .../return_to_topic_button_item.xml           | 54 ++++++----------
 .../submit_button_item.xml                    | 52 ++++++---------
 .../continue_interaction_item.xml             | 50 ++++++---------
 .../continue_navigation_button_item.xml       | 60 +++++++-----------
 .../drag_drop_interaction_item.xml            |  9 ++-
 .../fraction_interaction_item.xml             |  4 +-
 .../layout-sw600dp-port/next_button_item.xml  | 51 ++++++---------
 .../numeric_input_interaction_item.xml        |  2 -
 .../previous_button_item.xml                  | 49 +++++----------
 .../question_player_fragment.xml              |  4 ++
 .../replay_button_item.xml                    | 48 +++-----------
 .../return_to_topic_button_item.xml           | 54 ++++++----------
 .../submit_button_item.xml                    | 52 ++++++---------
 .../res/layout/continue_interaction_item.xml  | 52 ++++++---------
 .../continue_navigation_button_item.xml       | 63 +++++++------------
 .../res/layout/drag_drop_interaction_item.xml | 12 ++--
 .../res/layout/fraction_interaction_item.xml  |  2 -
 app/src/main/res/layout/next_button_item.xml  | 55 ++++++----------
 .../layout/numeric_input_interaction_item.xml |  2 -
 .../main/res/layout/previous_button_item.xml  | 53 ++++++----------
 .../res/layout/question_player_fragment.xml   |  8 ++-
 .../main/res/layout/replay_button_item.xml    | 49 +++------------
 .../layout/return_to_topic_button_item.xml    | 59 +++++++----------
 app/src/main/res/layout/state_fragment.xml    |  6 +-
 .../main/res/layout/submit_button_item.xml    | 55 ++++++----------
 app/src/main/res/values/dimens.xml            |  4 ++
 47 files changed, 614 insertions(+), 833 deletions(-)

diff --git a/app/src/main/res/layout-land/continue_interaction_item.xml b/app/src/main/res/layout-land/continue_interaction_item.xml
index 610821f3b5c..10930a91fcc 100644
--- a/app/src/main/res/layout-land/continue_interaction_item.xml
+++ b/app/src/main/res/layout-land/continue_interaction_item.xml
@@ -10,12 +10,35 @@
       name="viewModel"
       type="org.oppia.app.player.state.itemviewmodel.ContinueInteractionViewModel" />
   </data>
-
+  <!-- Margins -->
+  <!-- Exploration Split View: 24, 72, 64, 0 -->
+  <!-- Exploration View: 48, 24, 48, 0 -->
+  <!-- Question Split View: 24, 72, 64, 0 -->
+  <!-- Question View: 64, 24, 64, 0 -->
+  <!-- Note: Start/End margins are 4dp less which is getting adjusted in child views. -->
   <androidx.constraintlayout.widget.ConstraintLayout
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
-    android:layout_marginTop="16dp"
-    android:padding="16dp">
+    app:explorationSplitViewMarginApplicable="@{viewModel.hasConversationView &amp;&amp; viewModel.isSplitView}"
+    app:explorationSplitViewMarginBottom="@{@dimen/margin_0}"
+    app:explorationSplitViewMarginEnd="@{@dimen/margin_60}"
+    app:explorationSplitViewMarginStart="@{@dimen/margin_20}"
+    app:explorationSplitViewMarginTop="@{@dimen/margin_72}"
+    app:explorationViewMarginApplicable="@{viewModel.hasConversationView &amp;&amp; !viewModel.isSplitView}"
+    app:explorationViewMarginBottom="@{@dimen/margin_0}"
+    app:explorationViewMarginEnd="@{@dimen/margin_44}"
+    app:explorationViewMarginStart="@{@dimen/margin_44}"
+    app:explorationViewMarginTop="@{@dimen/margin_24}"
+    app:questionSplitViewMarginApplicable="@{!viewModel.hasConversationView &amp;&amp; viewModel.isSplitView}"
+    app:questionSplitViewMarginBottom="@{@dimen/margin_0}"
+    app:questionSplitViewMarginEnd="@{@dimen/margin_60}"
+    app:questionSplitViewMarginStart="@{@dimen/margin_20}"
+    app:questionSplitViewMarginTop="@{@dimen/margin_72}"
+    app:questionViewMarginApplicable="@{!viewModel.hasConversationView &amp;&amp; !viewModel.isSplitView}"
+    app:questionViewMarginBottom="@{@dimen/margin_0}"
+    app:questionViewMarginEnd="@{@dimen/margin_60}"
+    app:questionViewMarginStart="@{@dimen/margin_60}"
+    app:questionViewMarginTop="@{@dimen/margin_24}">
 
     <ImageButton
       android:id="@+id/previous_state_navigation_button"
@@ -27,7 +50,7 @@
       android:contentDescription="@string/previous_state_description"
       android:elevation="2dp"
       android:onClick="@{(v) -> viewModel.previousNavigationButtonListener.onPreviousButtonClicked()}"
-      android:padding="16dp"
+      android:padding="8dp"
       android:src="@drawable/ic_arrow_back_oppia_dark_blue_24dp"
       android:visibility="@{viewModel.hasPreviousButton ? View.VISIBLE: View.GONE, default=gone}"
       app:layout_constraintBottom_toBottomOf="parent"
@@ -38,6 +61,7 @@
       android:id="@+id/continue_button"
       style="@style/StateButtonActive"
       android:layout_height="0dp"
+      android:layout_margin="4dp"
       android:button="@drawable/state_button_primary_background"
       android:clickable="true"
       android:elevation="2dp"
diff --git a/app/src/main/res/layout-land/continue_navigation_button_item.xml b/app/src/main/res/layout-land/continue_navigation_button_item.xml
index b577933fa0a..a10a6647164 100644
--- a/app/src/main/res/layout-land/continue_navigation_button_item.xml
+++ b/app/src/main/res/layout-land/continue_navigation_button_item.xml
@@ -10,16 +10,36 @@
       name="buttonViewModel"
       type="org.oppia.app.player.state.itemviewmodel.ContinueNavigationButtonViewModel" />
   </data>
-
+  <!-- Margins -->
+  <!-- Exploration Split View: 24, 72, 64, 0 -->
+  <!-- Exploration View: 48, 24, 48, 0 -->
+  <!-- Question Split View: 24, 72, 64, 0 -->
+  <!-- Question View: 64, 24, 64, 0 -->
+  <!-- Note: Start/End margins are 4dp less which is getting adjusted in child views. -->
   <androidx.constraintlayout.widget.ConstraintLayout
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:gravity="center_vertical"
-    android:paddingStart="24dp"
-    android:layout_marginTop="56dp"
-    android:layout_marginBottom="@dimen/divider_margin_bottom"
-    android:paddingEnd="24dp"
-    android:paddingBottom="28dp">
+    app:explorationSplitViewMarginApplicable="@{buttonViewModel.hasConversationView &amp;&amp; buttonViewModel.isSplitView}"
+    app:explorationSplitViewMarginBottom="@{@dimen/margin_0}"
+    app:explorationSplitViewMarginEnd="@{@dimen/margin_60}"
+    app:explorationSplitViewMarginStart="@{@dimen/margin_20}"
+    app:explorationSplitViewMarginTop="@{@dimen/margin_72}"
+    app:explorationViewMarginApplicable="@{buttonViewModel.hasConversationView &amp;&amp; !buttonViewModel.isSplitView}"
+    app:explorationViewMarginBottom="@{@dimen/margin_0}"
+    app:explorationViewMarginEnd="@{@dimen/margin_44}"
+    app:explorationViewMarginStart="@{@dimen/margin_44}"
+    app:explorationViewMarginTop="@{@dimen/margin_24}"
+    app:questionSplitViewMarginApplicable="@{!buttonViewModel.hasConversationView &amp;&amp; buttonViewModel.isSplitView}"
+    app:questionSplitViewMarginBottom="@{@dimen/margin_0}"
+    app:questionSplitViewMarginEnd="@{@dimen/margin_60}"
+    app:questionSplitViewMarginStart="@{@dimen/margin_20}"
+    app:questionSplitViewMarginTop="@{@dimen/margin_72}"
+    app:questionViewMarginApplicable="@{!buttonViewModel.hasConversationView &amp;&amp; !buttonViewModel.isSplitView}"
+    app:questionViewMarginBottom="@{@dimen/margin_0}"
+    app:questionViewMarginEnd="@{@dimen/margin_60}"
+    app:questionViewMarginStart="@{@dimen/margin_60}"
+    app:questionViewMarginTop="@{@dimen/margin_24}">
 
     <ImageButton
       android:id="@+id/previous_state_navigation_button"
@@ -30,12 +50,12 @@
       android:contentDescription="@string/previous_state_description"
       android:elevation="2dp"
       android:onClick="@{(v) -> buttonViewModel.previousNavigationButtonListener.onPreviousButtonClicked()}"
-      android:padding="16dp"
+      android:padding="8dp"
       android:src="@drawable/ic_arrow_back_oppia_dark_blue_24dp"
-      app:layout_constraintTop_toTopOf="parent"
+      android:visibility="@{buttonViewModel.hasPreviousButton ? View.VISIBLE: View.GONE, default=gone}"
       app:layout_constraintBottom_toBottomOf="parent"
       app:layout_constraintStart_toStartOf="parent"
-      android:visibility="@{buttonViewModel.hasPreviousButton ? View.VISIBLE: View.GONE, default=gone}" />
+      app:layout_constraintTop_toTopOf="parent" />
 
     <Button
       android:id="@+id/continue_navigation_button"
@@ -46,9 +66,9 @@
       android:onClick="@{(v) -> buttonViewModel.continueNavigationButtonListener.onContinueButtonClicked()}"
       android:text="@string/state_continue_button"
       android:textColor="@color/white"
-      app:layout_constraintHeight_min="48dp"
-      app:layout_constraintTop_toTopOf="parent"
       app:layout_constraintBottom_toBottomOf="parent"
-      app:layout_constraintEnd_toEndOf="parent" />
+      app:layout_constraintEnd_toEndOf="parent"
+      app:layout_constraintHeight_min="48dp"
+      app:layout_constraintTop_toTopOf="parent" />
   </androidx.constraintlayout.widget.ConstraintLayout>
 </layout>
diff --git a/app/src/main/res/layout-land/drag_drop_interaction_item.xml b/app/src/main/res/layout-land/drag_drop_interaction_item.xml
index 20a4966ebcf..1630ea31356 100644
--- a/app/src/main/res/layout-land/drag_drop_interaction_item.xml
+++ b/app/src/main/res/layout-land/drag_drop_interaction_item.xml
@@ -23,7 +23,10 @@
     android:descendantFocusability="beforeDescendants"
     android:focusableInTouchMode="true"
     android:orientation="vertical"
-    android:padding="0dp"
+    android:paddingStart="8dp"
+    android:paddingTop="16dp"
+    android:paddingEnd="8dp"
+    android:paddingBottom="20dp"
     app:explorationSplitViewMarginApplicable="@{viewModel.hasConversationView &amp;&amp; viewModel.splitView}"
     app:explorationSplitViewMarginBottom="@{@dimen/margin_0}"
     app:explorationSplitViewMarginEnd="@{@dimen/margin_32}"
@@ -49,8 +52,9 @@
       android:id="@+id/drag_drop_grouping_hint_text_view"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
-      android:layout_marginStart="12dp"
-      android:layout_marginTop="8dp"
+      android:layout_marginStart="16dp"
+      android:layout_marginEnd="16dp"
+      android:layout_marginBottom="8dp"
       android:text="@string/drag_and_drop_interaction_group_merge_hint"
       android:textSize="14sp"
       android:textStyle="italic"
diff --git a/app/src/main/res/layout-land/fraction_interaction_item.xml b/app/src/main/res/layout-land/fraction_interaction_item.xml
index 0af2da8ca1c..554fe6487ea 100644
--- a/app/src/main/res/layout-land/fraction_interaction_item.xml
+++ b/app/src/main/res/layout-land/fraction_interaction_item.xml
@@ -51,8 +51,6 @@
       android:id="@+id/fraction_input_error"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
-      android:layout_marginStart="16dp"
-      android:layout_marginEnd="8dp"
       android:fontFamily="sans-serif"
       android:minHeight="32dp"
       android:text="@{viewModel.errorMessage}"
diff --git a/app/src/main/res/layout-land/next_button_item.xml b/app/src/main/res/layout-land/next_button_item.xml
index 7064fadaee8..241cdfb1948 100644
--- a/app/src/main/res/layout-land/next_button_item.xml
+++ b/app/src/main/res/layout-land/next_button_item.xml
@@ -10,16 +10,36 @@
       name="buttonViewModel"
       type="org.oppia.app.player.state.itemviewmodel.NextButtonViewModel" />
   </data>
-
+  <!-- Margins -->
+  <!-- Exploration Split View: 24, 72, 64, 0 -->
+  <!-- Exploration View: 48, 24, 48, 0 -->
+  <!-- Question Split View: 24, 72, 64, 0 -->
+  <!-- Question View: 64, 24, 64, 0 -->
+  <!-- Note: Start/End margins are 4dp less which is getting adjusted in child views. -->
   <androidx.constraintlayout.widget.ConstraintLayout
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
-    android:layout_marginTop="56dp"
-    android:layout_marginBottom="@dimen/divider_margin_bottom"
     android:gravity="center_vertical"
-    android:paddingStart="24dp"
-    android:paddingEnd="24dp"
-    android:paddingBottom="28dp">
+    app:explorationSplitViewMarginApplicable="@{buttonViewModel.hasConversationView &amp;&amp; buttonViewModel.isSplitView}"
+    app:explorationSplitViewMarginBottom="@{@dimen/margin_0}"
+    app:explorationSplitViewMarginEnd="@{@dimen/margin_60}"
+    app:explorationSplitViewMarginStart="@{@dimen/margin_20}"
+    app:explorationSplitViewMarginTop="@{@dimen/margin_72}"
+    app:explorationViewMarginApplicable="@{buttonViewModel.hasConversationView &amp;&amp; !buttonViewModel.isSplitView}"
+    app:explorationViewMarginBottom="@{@dimen/margin_0}"
+    app:explorationViewMarginEnd="@{@dimen/margin_44}"
+    app:explorationViewMarginStart="@{@dimen/margin_44}"
+    app:explorationViewMarginTop="@{@dimen/margin_24}"
+    app:questionSplitViewMarginApplicable="@{!buttonViewModel.hasConversationView &amp;&amp; buttonViewModel.isSplitView}"
+    app:questionSplitViewMarginBottom="@{@dimen/margin_0}"
+    app:questionSplitViewMarginEnd="@{@dimen/margin_60}"
+    app:questionSplitViewMarginStart="@{@dimen/margin_20}"
+    app:questionSplitViewMarginTop="@{@dimen/margin_72}"
+    app:questionViewMarginApplicable="@{!buttonViewModel.hasConversationView &amp;&amp; !buttonViewModel.isSplitView}"
+    app:questionViewMarginBottom="@{@dimen/margin_0}"
+    app:questionViewMarginEnd="@{@dimen/margin_60}"
+    app:questionViewMarginStart="@{@dimen/margin_60}"
+    app:questionViewMarginTop="@{@dimen/margin_24}">
 
     <ImageButton
       android:id="@+id/previous_state_navigation_button"
@@ -30,7 +50,7 @@
       android:contentDescription="@string/previous_state_description"
       android:elevation="2dp"
       android:onClick="@{(v) -> buttonViewModel.previousNavigationButtonListener.onPreviousButtonClicked()}"
-      android:padding="16dp"
+      android:padding="8dp"
       android:src="@drawable/ic_arrow_back_oppia_dark_blue_24dp"
       android:visibility="@{buttonViewModel.hasPreviousButton ? View.VISIBLE : View.GONE, default=gone}"
       app:layout_constraintBottom_toBottomOf="parent"
@@ -46,7 +66,7 @@
       android:contentDescription="@string/next_state_description"
       android:elevation="2dp"
       android:onClick="@{(v) -> buttonViewModel.nextNavigationButtonListener.onNextButtonClicked()}"
-      android:padding="16dp"
+      android:padding="8dp"
       android:src="@drawable/ic_arrow_forward_oppia_dark_blue_24dp"
       app:layout_constraintBottom_toBottomOf="parent"
       app:layout_constraintEnd_toEndOf="parent"
diff --git a/app/src/main/res/layout-land/numeric_input_interaction_item.xml b/app/src/main/res/layout-land/numeric_input_interaction_item.xml
index dbc38af3995..8c0d0f35b56 100644
--- a/app/src/main/res/layout-land/numeric_input_interaction_item.xml
+++ b/app/src/main/res/layout-land/numeric_input_interaction_item.xml
@@ -50,8 +50,6 @@
     <TextView
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
-      android:layout_marginStart="16dp"
-      android:layout_marginEnd="8dp"
       android:fontFamily="sans-serif"
       android:minHeight="32dp"
       android:text="@{viewModel.errorMessage}"
diff --git a/app/src/main/res/layout-land/previous_button_item.xml b/app/src/main/res/layout-land/previous_button_item.xml
index b70194de75b..5dee5e1abd8 100644
--- a/app/src/main/res/layout-land/previous_button_item.xml
+++ b/app/src/main/res/layout-land/previous_button_item.xml
@@ -10,16 +10,36 @@
       name="buttonViewModel"
       type="org.oppia.app.player.state.itemviewmodel.PreviousButtonViewModel" />
   </data>
-
+  <!-- Margins -->
+  <!-- Exploration Split View: 24, 72, 64, 0 -->
+  <!-- Exploration View: 48, 24, 48, 0 -->
+  <!-- Question Split View: 24, 72, 64, 0 -->
+  <!-- Question View: 64, 24, 64, 0 -->
+  <!-- Note: Start/End margins are 4dp less which is getting adjusted in child views. -->
   <androidx.constraintlayout.widget.ConstraintLayout
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
-    android:layout_marginTop="56dp"
-    android:layout_marginBottom="@dimen/divider_margin_bottom"
     android:gravity="center_vertical"
-    android:paddingStart="24dp"
-    android:paddingEnd="24dp"
-    android:paddingBottom="28dp">
+    app:explorationSplitViewMarginApplicable="@{buttonViewModel.hasConversationView &amp;&amp; buttonViewModel.isSplitView}"
+    app:explorationSplitViewMarginBottom="@{@dimen/margin_0}"
+    app:explorationSplitViewMarginEnd="@{@dimen/margin_60}"
+    app:explorationSplitViewMarginStart="@{@dimen/margin_20}"
+    app:explorationSplitViewMarginTop="@{@dimen/margin_72}"
+    app:explorationViewMarginApplicable="@{buttonViewModel.hasConversationView &amp;&amp; !buttonViewModel.isSplitView}"
+    app:explorationViewMarginBottom="@{@dimen/margin_0}"
+    app:explorationViewMarginEnd="@{@dimen/margin_44}"
+    app:explorationViewMarginStart="@{@dimen/margin_44}"
+    app:explorationViewMarginTop="@{@dimen/margin_24}"
+    app:questionSplitViewMarginApplicable="@{!buttonViewModel.hasConversationView &amp;&amp; buttonViewModel.isSplitView}"
+    app:questionSplitViewMarginBottom="@{@dimen/margin_0}"
+    app:questionSplitViewMarginEnd="@{@dimen/margin_60}"
+    app:questionSplitViewMarginStart="@{@dimen/margin_20}"
+    app:questionSplitViewMarginTop="@{@dimen/margin_72}"
+    app:questionViewMarginApplicable="@{!buttonViewModel.hasConversationView &amp;&amp; !buttonViewModel.isSplitView}"
+    app:questionViewMarginBottom="@{@dimen/margin_0}"
+    app:questionViewMarginEnd="@{@dimen/margin_60}"
+    app:questionViewMarginStart="@{@dimen/margin_60}"
+    app:questionViewMarginTop="@{@dimen/margin_24}">
 
     <ImageButton
       android:id="@+id/previous_state_navigation_button"
@@ -30,7 +50,7 @@
       android:contentDescription="@string/previous_state_description"
       android:elevation="2dp"
       android:onClick="@{(v) -> buttonViewModel.previousNavigationButtonListener.onPreviousButtonClicked()}"
-      android:padding="16dp"
+      android:padding="8dp"
       android:src="@drawable/ic_arrow_back_oppia_dark_blue_24dp"
       app:layout_constraintBottom_toBottomOf="parent"
       app:layout_constraintStart_toStartOf="parent"
diff --git a/app/src/main/res/layout-land/question_player_fragment.xml b/app/src/main/res/layout-land/question_player_fragment.xml
index 3ccc42aa6be..45436b6206a 100644
--- a/app/src/main/res/layout-land/question_player_fragment.xml
+++ b/app/src/main/res/layout-land/question_player_fragment.xml
@@ -17,9 +17,7 @@
 
     <androidx.constraintlayout.widget.ConstraintLayout
       android:layout_width="match_parent"
-      android:layout_height="match_parent"
-      android:paddingStart="24dp"
-      android:paddingEnd="24dp">
+      android:layout_height="match_parent">
 
       <TextView
         android:id="@+id/end_session_header_text_view"
@@ -59,6 +57,7 @@
         android:divider="@android:color/transparent"
         android:dividerHeight="8dp"
         android:overScrollMode="never"
+        android:paddingBottom="108dp"
         app:data="@{viewModel.itemList}"
         app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
         app:layout_constraintBottom_toTopOf="@id/question_progress_bar"
@@ -73,6 +72,7 @@
         android:divider="@android:color/transparent"
         android:dividerHeight="8dp"
         android:overScrollMode="never"
+        android:paddingBottom="108dp"
         android:visibility="@{viewModel.isSplitView ? View.VISIBLE : View.GONE}"
         app:data="@{viewModel.rightItemList}"
         app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
@@ -86,9 +86,9 @@
         style="@style/Widget.AppCompat.ProgressBar.Horizontal"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:layout_marginStart="30dp"
-        android:layout_marginEnd="30dp"
-        android:layout_marginBottom="5dp"
+        android:layout_marginStart="32dp"
+        android:layout_marginEnd="32dp"
+        android:layout_marginBottom="8dp"
         android:max="100"
         android:progress="@{viewModel.progressPercentage}"
         android:progressDrawable="@drawable/progress_bar"
@@ -100,7 +100,7 @@
         android:id="@+id/question_progress_text"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
-        android:layout_marginEnd="30dp"
+        android:layout_marginEnd="32dp"
         android:layout_marginBottom="20dp"
         android:text="@{viewModel.isAtEndOfSession ? @string/question_training_session_progress_finished : @string/question_training_session_progress(viewModel.currentQuestion, viewModel.questionCount)}"
         android:textStyle="italic"
@@ -150,9 +150,9 @@
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:layout_gravity="bottom"
-      android:layout_marginStart="52dp"
+      android:layout_marginStart="64dp"
       android:layout_marginTop="8dp"
-      android:layout_marginEnd="52dp"
+      android:layout_marginEnd="64dp"
       android:layout_marginBottom="16dp"
       android:elevation="8dp"
       android:translationZ="4dp">
diff --git a/app/src/main/res/layout-land/replay_button_item.xml b/app/src/main/res/layout-land/replay_button_item.xml
index e4bbdf5e35d..72684a8847d 100644
--- a/app/src/main/res/layout-land/replay_button_item.xml
+++ b/app/src/main/res/layout-land/replay_button_item.xml
@@ -12,20 +12,21 @@
   <androidx.constraintlayout.widget.ConstraintLayout
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
-    android:layout_marginTop="56dp"
+    android:layout_marginStart="60dp"
+    android:layout_marginTop="68dp"
+    android:layout_marginEnd="60dp"
+    android:layout_marginBottom="0dp"
     android:gravity="center_vertical"
-    android:paddingStart="24dp"
-    android:paddingEnd="24dp"
-    android:paddingBottom="12dp">
+    android:visibility="@{buttonViewModel.hasConversationView ? View.GONE : View.VISIBLE}">
 
     <Button
       android:id="@+id/replay_button"
       style="@style/StateButtonActive"
-      android:layout_height="48dp"
       android:layout_margin="4dp"
       android:background="@drawable/state_button_orange_background"
       android:drawableStart="@drawable/ic_refresh_white_24dp"
       android:drawablePadding="4dp"
+      android:minHeight="48dp"
       android:onClick="@{(v) -> buttonViewModel.replayButtonListener.onReplayButtonClicked()}"
       android:text="@string/lesson_replay_button_text"
       android:textColor="@color/white"
diff --git a/app/src/main/res/layout-land/return_to_topic_button_item.xml b/app/src/main/res/layout-land/return_to_topic_button_item.xml
index bab0c50e082..7604fdc7a72 100644
--- a/app/src/main/res/layout-land/return_to_topic_button_item.xml
+++ b/app/src/main/res/layout-land/return_to_topic_button_item.xml
@@ -10,16 +10,36 @@
       name="buttonViewModel"
       type="org.oppia.app.player.state.itemviewmodel.ReturnToTopicButtonViewModel" />
   </data>
-
+  <!-- Margins -->
+  <!-- Exploration Split View: 24, 72, 64, 0 -->
+  <!-- Exploration View: 48, 24, 48, 0 -->
+  <!-- Question Split View: 24, 12, 64, 0 -->
+  <!-- Question View: 64, 12, 64, 0 -->
+  <!-- Note: Start/End margins are 4dp less which is getting adjusted in child views. -->
   <androidx.constraintlayout.widget.ConstraintLayout
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
-    android:layout_marginTop="56dp"
-    android:layout_marginBottom="@dimen/divider_margin_bottom"
     android:gravity="center_vertical"
-    android:paddingStart="24dp"
-    android:paddingEnd="24dp"
-    android:paddingBottom="28dp">
+    app:explorationSplitViewMarginApplicable="@{buttonViewModel.hasConversationView &amp;&amp; buttonViewModel.isSplitView}"
+    app:explorationSplitViewMarginBottom="@{@dimen/margin_0}"
+    app:explorationSplitViewMarginEnd="@{@dimen/margin_60}"
+    app:explorationSplitViewMarginStart="@{@dimen/margin_20}"
+    app:explorationSplitViewMarginTop="@{@dimen/margin_72}"
+    app:explorationViewMarginApplicable="@{buttonViewModel.hasConversationView &amp;&amp; !buttonViewModel.isSplitView}"
+    app:explorationViewMarginBottom="@{@dimen/margin_0}"
+    app:explorationViewMarginEnd="@{@dimen/margin_44}"
+    app:explorationViewMarginStart="@{@dimen/margin_44}"
+    app:explorationViewMarginTop="@{@dimen/margin_24}"
+    app:questionSplitViewMarginApplicable="@{!buttonViewModel.hasConversationView &amp;&amp; buttonViewModel.isSplitView}"
+    app:questionSplitViewMarginBottom="@{@dimen/margin_0}"
+    app:questionSplitViewMarginEnd="@{@dimen/margin_60}"
+    app:questionSplitViewMarginStart="@{@dimen/margin_20}"
+    app:questionSplitViewMarginTop="@{@dimen/margin_8}"
+    app:questionViewMarginApplicable="@{!buttonViewModel.hasConversationView &amp;&amp; !buttonViewModel.isSplitView}"
+    app:questionViewMarginBottom="@{@dimen/margin_0}"
+    app:questionViewMarginEnd="@{@dimen/margin_60}"
+    app:questionViewMarginStart="@{@dimen/margin_60}"
+    app:questionViewMarginTop="@{@dimen/margin_8}">
 
     <ImageButton
       android:id="@+id/previous_state_navigation_button"
@@ -30,7 +50,7 @@
       android:contentDescription="@string/previous_state_description"
       android:elevation="2dp"
       android:onClick="@{(v) -> buttonViewModel.previousNavigationButtonListener.onPreviousButtonClicked()}"
-      android:padding="16dp"
+      android:padding="8dp"
       android:src="@drawable/ic_arrow_back_oppia_dark_blue_24dp"
       android:visibility="@{buttonViewModel.hasPreviousButton ? View.VISIBLE: View.GONE, default=gone}"
       app:layout_constraintBottom_toBottomOf="parent"
diff --git a/app/src/main/res/layout-land/state_fragment.xml b/app/src/main/res/layout-land/state_fragment.xml
index c57b0682661..dfff2473a6f 100644
--- a/app/src/main/res/layout-land/state_fragment.xml
+++ b/app/src/main/res/layout-land/state_fragment.xml
@@ -37,6 +37,7 @@
         android:divider="@android:color/transparent"
         android:overScrollMode="never"
         android:paddingTop="@{viewModel.isSplitView() ? (viewModel.isAudioBarVisible ? @dimen/padding_96 : @dimen/padding_0) : (viewModel.isAudioBarVisible ? @dimen/padding_72 : @dimen/padding_0)}"
+        android:paddingBottom="108dp"
         android:scrollbars="none"
         app:data="@{viewModel.itemList}"
         app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
@@ -52,6 +53,7 @@
         android:clipToPadding="false"
         android:divider="@android:color/transparent"
         android:overScrollMode="never"
+        android:paddingBottom="108dp"
         android:scrollbars="none"
         android:visibility="@{viewModel.isSplitView ? View.VISIBLE : View.GONE}"
         app:data="@{viewModel.rightItemList}"
@@ -122,9 +124,9 @@
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:layout_gravity="bottom"
-      android:layout_marginStart="28dp"
+      android:layout_marginStart="48dp"
       android:layout_marginTop="8dp"
-      android:layout_marginEnd="28dp"
+      android:layout_marginEnd="48dp"
       android:layout_marginBottom="16dp"
       android:elevation="8dp"
       android:translationZ="4dp">
diff --git a/app/src/main/res/layout-land/submit_button_item.xml b/app/src/main/res/layout-land/submit_button_item.xml
index c3f047e4c8c..4b3f1b092f6 100644
--- a/app/src/main/res/layout-land/submit_button_item.xml
+++ b/app/src/main/res/layout-land/submit_button_item.xml
@@ -10,16 +10,36 @@
       name="buttonViewModel"
       type="org.oppia.app.player.state.itemviewmodel.SubmitButtonViewModel" />
   </data>
-
+  <!-- Margins -->
+  <!-- Exploration Split View: 24, 72, 64, 0 -->
+  <!-- Exploration View: 48, 24, 48, 0 -->
+  <!-- Question Split View: 24, 72, 64, 0 -->
+  <!-- Question View: 64, 24, 64, 0 -->
+  <!-- Note: Start/End margins are 4dp less which is getting adjusted in child views. -->
   <androidx.constraintlayout.widget.ConstraintLayout
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
-    android:layout_marginTop="56dp"
-    android:layout_marginBottom="@dimen/divider_margin_bottom"
     android:gravity="center_vertical"
-    android:paddingStart="24dp"
-    android:paddingEnd="24dp"
-    android:paddingBottom="28dp">
+    app:explorationSplitViewMarginApplicable="@{buttonViewModel.hasConversationView &amp;&amp; buttonViewModel.isSplitView}"
+    app:explorationSplitViewMarginBottom="@{@dimen/margin_0}"
+    app:explorationSplitViewMarginEnd="@{@dimen/margin_60}"
+    app:explorationSplitViewMarginStart="@{@dimen/margin_20}"
+    app:explorationSplitViewMarginTop="@{@dimen/margin_72}"
+    app:explorationViewMarginApplicable="@{buttonViewModel.hasConversationView &amp;&amp; !buttonViewModel.isSplitView}"
+    app:explorationViewMarginBottom="@{@dimen/margin_0}"
+    app:explorationViewMarginEnd="@{@dimen/margin_44}"
+    app:explorationViewMarginStart="@{@dimen/margin_44}"
+    app:explorationViewMarginTop="@{@dimen/margin_24}"
+    app:questionSplitViewMarginApplicable="@{!buttonViewModel.hasConversationView &amp;&amp; buttonViewModel.isSplitView}"
+    app:questionSplitViewMarginBottom="@{@dimen/margin_0}"
+    app:questionSplitViewMarginEnd="@{@dimen/margin_60}"
+    app:questionSplitViewMarginStart="@{@dimen/margin_20}"
+    app:questionSplitViewMarginTop="@{@dimen/margin_72}"
+    app:questionViewMarginApplicable="@{!buttonViewModel.hasConversationView &amp;&amp; !buttonViewModel.isSplitView}"
+    app:questionViewMarginBottom="@{@dimen/margin_0}"
+    app:questionViewMarginEnd="@{@dimen/margin_60}"
+    app:questionViewMarginStart="@{@dimen/margin_60}"
+    app:questionViewMarginTop="@{@dimen/margin_24}">
 
     <ImageButton
       android:id="@+id/previous_state_navigation_button"
@@ -30,7 +50,7 @@
       android:contentDescription="@string/previous_state_description"
       android:elevation="2dp"
       android:onClick="@{(v) -> buttonViewModel.previousNavigationButtonListener.onPreviousButtonClicked()}"
-      android:padding="16dp"
+      android:padding="8dp"
       android:src="@drawable/ic_arrow_back_oppia_dark_blue_24dp"
       android:visibility="@{buttonViewModel.hasPreviousButton ? View.VISIBLE: View.GONE, default=gone}"
       app:layout_constraintBottom_toBottomOf="parent"
diff --git a/app/src/main/res/layout-sw600dp-land/continue_interaction_item.xml b/app/src/main/res/layout-sw600dp-land/continue_interaction_item.xml
index 083debc1e42..12f800e027d 100644
--- a/app/src/main/res/layout-sw600dp-land/continue_interaction_item.xml
+++ b/app/src/main/res/layout-sw600dp-land/continue_interaction_item.xml
@@ -10,50 +10,35 @@
       name="viewModel"
       type="org.oppia.app.player.state.itemviewmodel.ContinueInteractionViewModel" />
   </data>
-
+  <!-- Margins -->
+  <!-- Exploration Split View: 24, 72, 64, 0 -->
+  <!-- Exploration View: 176, 24, 176, 0 -->
+  <!-- Question Split View: 24, 72, 64, 0 -->
+  <!-- Question View: 192, 24, 192, 0 -->
+  <!-- Note: Start/End margins are 4dp less which is getting adjusted in child views. -->
   <androidx.constraintlayout.widget.ConstraintLayout
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     app:explorationSplitViewMarginApplicable="@{viewModel.hasConversationView &amp;&amp; viewModel.isSplitView}"
     app:explorationSplitViewMarginBottom="@{@dimen/margin_0}"
-    app:explorationSplitViewMarginEnd="@{@dimen/margin_64}"
-    app:explorationSplitViewMarginStart="@{@dimen/margin_0}"
+    app:explorationSplitViewMarginEnd="@{@dimen/margin_60}"
+    app:explorationSplitViewMarginStart="@{@dimen/margin_20}"
     app:explorationSplitViewMarginTop="@{@dimen/margin_72}"
-    app:explorationSplitViewPaddingApplicable="@{viewModel.hasConversationView &amp;&amp; viewModel.isSplitView}"
-    app:explorationSplitViewPaddingBottom="@{@dimen/padding_0}"
-    app:explorationSplitViewPaddingEnd="@{@dimen/padding_0}"
-    app:explorationSplitViewPaddingStart="@{@dimen/padding_0}"
-    app:explorationSplitViewPaddingTop="@{@dimen/padding_0}"
     app:explorationViewMarginApplicable="@{viewModel.hasConversationView &amp;&amp; !viewModel.isSplitView}"
     app:explorationViewMarginBottom="@{@dimen/margin_0}"
-    app:explorationViewMarginEnd="@{@dimen/margin_176}"
-    app:explorationViewMarginStart="@{@dimen/margin_176}"
-    app:explorationViewMarginTop="@{@dimen/margin_72}"
-    app:explorationViewPaddingApplicable="@{viewModel.hasConversationView &amp;&amp; !viewModel.isSplitView}"
-    app:explorationViewPaddingBottom="@{@dimen/padding_0}"
-    app:explorationViewPaddingEnd="@{@dimen/padding_0}"
-    app:explorationViewPaddingStart="@{@dimen/padding_0}"
-    app:explorationViewPaddingTop="@{@dimen/padding_0}"
+    app:explorationViewMarginEnd="@{@dimen/margin_172}"
+    app:explorationViewMarginStart="@{@dimen/margin_172}"
+    app:explorationViewMarginTop="@{@dimen/margin_24}"
     app:questionSplitViewMarginApplicable="@{!viewModel.hasConversationView &amp;&amp; viewModel.isSplitView}"
     app:questionSplitViewMarginBottom="@{@dimen/margin_0}"
-    app:questionSplitViewMarginEnd="@{@dimen/margin_64}"
-    app:questionSplitViewMarginStart="@{@dimen/margin_0}"
+    app:questionSplitViewMarginEnd="@{@dimen/margin_60}"
+    app:questionSplitViewMarginStart="@{@dimen/margin_20}"
     app:questionSplitViewMarginTop="@{@dimen/margin_72}"
-    app:questionSplitViewPaddingApplicable="@{!viewModel.hasConversationView &amp;&amp; viewModel.isSplitView}"
-    app:questionSplitViewPaddingBottom="@{@dimen/padding_0}"
-    app:questionSplitViewPaddingEnd="@{@dimen/padding_0}"
-    app:questionSplitViewPaddingStart="@{@dimen/padding_0}"
-    app:questionSplitViewPaddingTop="@{@dimen/padding_0}"
     app:questionViewMarginApplicable="@{!viewModel.hasConversationView &amp;&amp; !viewModel.isSplitView}"
     app:questionViewMarginBottom="@{@dimen/margin_0}"
-    app:questionViewMarginEnd="@{@dimen/margin_192}"
-    app:questionViewMarginStart="@{@dimen/margin_192}"
-    app:questionViewMarginTop="@{@dimen/margin_72}"
-    app:questionViewPaddingApplicable="@{!viewModel.hasConversationView &amp;&amp; !viewModel.isSplitView}"
-    app:questionViewPaddingBottom="@{@dimen/padding_0}"
-    app:questionViewPaddingEnd="@{@dimen/padding_0}"
-    app:questionViewPaddingStart="@{@dimen/padding_0}"
-    app:questionViewPaddingTop="@{@dimen/padding_0}">
+    app:questionViewMarginEnd="@{@dimen/margin_188}"
+    app:questionViewMarginStart="@{@dimen/margin_188}"
+    app:questionViewMarginTop="@{@dimen/margin_24}">
 
     <ImageButton
       android:id="@+id/previous_state_navigation_button"
@@ -65,7 +50,7 @@
       android:contentDescription="@string/previous_state_description"
       android:elevation="2dp"
       android:onClick="@{(v) -> viewModel.previousNavigationButtonListener.onPreviousButtonClicked()}"
-      android:padding="16dp"
+      android:padding="8dp"
       android:src="@drawable/ic_arrow_back_oppia_dark_blue_24dp"
       android:visibility="@{viewModel.hasPreviousButton ? View.VISIBLE: View.GONE, default=gone}"
       app:layout_constraintBottom_toBottomOf="parent"
@@ -76,6 +61,7 @@
       android:id="@+id/continue_button"
       style="@style/StateButtonActive"
       android:layout_height="0dp"
+      android:layout_margin="4dp"
       android:button="@drawable/state_button_primary_background"
       android:clickable="true"
       android:elevation="2dp"
diff --git a/app/src/main/res/layout-sw600dp-land/continue_navigation_button_item.xml b/app/src/main/res/layout-sw600dp-land/continue_navigation_button_item.xml
index 9b1cdf0236e..ef1065ec371 100644
--- a/app/src/main/res/layout-sw600dp-land/continue_navigation_button_item.xml
+++ b/app/src/main/res/layout-sw600dp-land/continue_navigation_button_item.xml
@@ -10,50 +10,35 @@
       name="buttonViewModel"
       type="org.oppia.app.player.state.itemviewmodel.ContinueNavigationButtonViewModel" />
   </data>
-
+  <!-- Margins -->
+  <!-- Exploration Split View: 24, 72, 64, 0 -->
+  <!-- Exploration View: 176, 24, 176, 0 -->
+  <!-- Question Split View: 24, 72, 64, 0 -->
+  <!-- Question View: 192, 24, 192, 0 -->
+  <!-- Note: Start/End margins are 4dp less which is getting adjusted in child views. -->
   <androidx.constraintlayout.widget.ConstraintLayout
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     app:explorationSplitViewMarginApplicable="@{buttonViewModel.hasConversationView &amp;&amp; buttonViewModel.isSplitView}"
     app:explorationSplitViewMarginBottom="@{@dimen/margin_0}"
-    app:explorationSplitViewMarginEnd="@{@dimen/margin_64}"
-    app:explorationSplitViewMarginStart="@{@dimen/margin_0}"
+    app:explorationSplitViewMarginEnd="@{@dimen/margin_60}"
+    app:explorationSplitViewMarginStart="@{@dimen/margin_20}"
     app:explorationSplitViewMarginTop="@{@dimen/margin_72}"
-    app:explorationSplitViewPaddingApplicable="@{buttonViewModel.hasConversationView &amp;&amp; buttonViewModel.isSplitView}"
-    app:explorationSplitViewPaddingBottom="@{@dimen/padding_0}"
-    app:explorationSplitViewPaddingEnd="@{@dimen/padding_0}"
-    app:explorationSplitViewPaddingStart="@{@dimen/padding_0}"
-    app:explorationSplitViewPaddingTop="@{@dimen/padding_0}"
     app:explorationViewMarginApplicable="@{buttonViewModel.hasConversationView &amp;&amp; !buttonViewModel.isSplitView}"
     app:explorationViewMarginBottom="@{@dimen/margin_0}"
-    app:explorationViewMarginEnd="@{@dimen/margin_176}"
-    app:explorationViewMarginStart="@{@dimen/margin_176}"
-    app:explorationViewMarginTop="@{@dimen/margin_72}"
-    app:explorationViewPaddingApplicable="@{buttonViewModel.hasConversationView &amp;&amp; !buttonViewModel.isSplitView}"
-    app:explorationViewPaddingBottom="@{@dimen/padding_0}"
-    app:explorationViewPaddingEnd="@{@dimen/padding_0}"
-    app:explorationViewPaddingStart="@{@dimen/padding_0}"
-    app:explorationViewPaddingTop="@{@dimen/padding_0}"
+    app:explorationViewMarginEnd="@{@dimen/margin_172}"
+    app:explorationViewMarginStart="@{@dimen/margin_172}"
+    app:explorationViewMarginTop="@{@dimen/margin_24}"
     app:questionSplitViewMarginApplicable="@{!buttonViewModel.hasConversationView &amp;&amp; buttonViewModel.isSplitView}"
     app:questionSplitViewMarginBottom="@{@dimen/margin_0}"
-    app:questionSplitViewMarginEnd="@{@dimen/margin_64}"
-    app:questionSplitViewMarginStart="@{@dimen/margin_0}"
+    app:questionSplitViewMarginEnd="@{@dimen/margin_60}"
+    app:questionSplitViewMarginStart="@{@dimen/margin_20}"
     app:questionSplitViewMarginTop="@{@dimen/margin_72}"
-    app:questionSplitViewPaddingApplicable="@{!buttonViewModel.hasConversationView &amp;&amp; buttonViewModel.isSplitView}"
-    app:questionSplitViewPaddingBottom="@{@dimen/padding_0}"
-    app:questionSplitViewPaddingEnd="@{@dimen/padding_0}"
-    app:questionSplitViewPaddingStart="@{@dimen/padding_0}"
-    app:questionSplitViewPaddingTop="@{@dimen/padding_0}"
     app:questionViewMarginApplicable="@{!buttonViewModel.hasConversationView &amp;&amp; !buttonViewModel.isSplitView}"
     app:questionViewMarginBottom="@{@dimen/margin_0}"
-    app:questionViewMarginEnd="@{@dimen/margin_192}"
-    app:questionViewMarginStart="@{@dimen/margin_192}"
-    app:questionViewMarginTop="@{@dimen/margin_72}"
-    app:questionViewPaddingApplicable="@{!buttonViewModel.hasConversationView &amp;&amp; !buttonViewModel.isSplitView}"
-    app:questionViewPaddingBottom="@{@dimen/padding_0}"
-    app:questionViewPaddingEnd="@{@dimen/padding_0}"
-    app:questionViewPaddingStart="@{@dimen/padding_0}"
-    app:questionViewPaddingTop="@{@dimen/padding_0}">
+    app:questionViewMarginEnd="@{@dimen/margin_188}"
+    app:questionViewMarginStart="@{@dimen/margin_188}"
+    app:questionViewMarginTop="@{@dimen/margin_24}">
 
     <ImageButton
       android:id="@+id/previous_state_navigation_button"
@@ -64,24 +49,25 @@
       android:contentDescription="@string/previous_state_description"
       android:elevation="2dp"
       android:onClick="@{(v) -> buttonViewModel.previousNavigationButtonListener.onPreviousButtonClicked()}"
-      android:padding="16dp"
+      android:padding="8dp"
       android:src="@drawable/ic_arrow_back_oppia_dark_blue_24dp"
-      app:layout_constraintTop_toTopOf="parent"
+      android:visibility="@{buttonViewModel.hasPreviousButton ? View.VISIBLE: View.GONE, default=gone}"
       app:layout_constraintBottom_toBottomOf="parent"
       app:layout_constraintStart_toStartOf="parent"
-      android:visibility="@{buttonViewModel.hasPreviousButton ? View.VISIBLE: View.GONE, default=gone}" />
+      app:layout_constraintTop_toTopOf="parent" />
 
     <Button
       android:id="@+id/continue_navigation_button"
       style="@style/StateButtonActive"
       android:layout_height="0dp"
+      android:layout_margin="4dp"
       android:button="@drawable/state_button_primary_background"
       android:onClick="@{(v) -> buttonViewModel.continueNavigationButtonListener.onContinueButtonClicked()}"
       android:text="@string/state_continue_button"
       android:textColor="@color/white"
-      app:layout_constraintHeight_min="48dp"
-      app:layout_constraintTop_toTopOf="parent"
       app:layout_constraintBottom_toBottomOf="parent"
-      app:layout_constraintEnd_toEndOf="parent" />
+      app:layout_constraintEnd_toEndOf="parent"
+      app:layout_constraintHeight_min="48dp"
+      app:layout_constraintTop_toTopOf="parent" />
   </androidx.constraintlayout.widget.ConstraintLayout>
 </layout>
diff --git a/app/src/main/res/layout-sw600dp-land/drag_drop_interaction_item.xml b/app/src/main/res/layout-sw600dp-land/drag_drop_interaction_item.xml
index 7094c7a475f..9b76ffbdd12 100644
--- a/app/src/main/res/layout-sw600dp-land/drag_drop_interaction_item.xml
+++ b/app/src/main/res/layout-sw600dp-land/drag_drop_interaction_item.xml
@@ -23,7 +23,10 @@
     android:descendantFocusability="beforeDescendants"
     android:focusableInTouchMode="true"
     android:orientation="vertical"
-    android:padding="0dp"
+    android:paddingStart="16dp"
+    android:paddingTop="16dp"
+    android:paddingEnd="16dp"
+    android:paddingBottom="20dp"
     app:explorationSplitViewMarginApplicable="@{viewModel.hasConversationView &amp;&amp; viewModel.splitView}"
     app:explorationSplitViewMarginBottom="@{@dimen/margin_0}"
     app:explorationSplitViewMarginEnd="@{@dimen/margin_32}"
@@ -49,7 +52,9 @@
       android:id="@+id/drag_drop_grouping_hint_text_view"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
-      android:layout_marginStart="12dp"
+      android:layout_marginStart="8dp"
+      android:layout_marginEnd="8dp"
+      android:layout_marginBottom="8dp"
       android:text="@string/drag_and_drop_interaction_group_merge_hint"
       android:textSize="14sp"
       android:textStyle="italic"
diff --git a/app/src/main/res/layout-sw600dp-land/fraction_interaction_item.xml b/app/src/main/res/layout-sw600dp-land/fraction_interaction_item.xml
index 104d9431f63..e599e829760 100644
--- a/app/src/main/res/layout-sw600dp-land/fraction_interaction_item.xml
+++ b/app/src/main/res/layout-sw600dp-land/fraction_interaction_item.xml
@@ -51,8 +51,6 @@
       android:id="@+id/fraction_input_error"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
-      android:layout_marginStart="16dp"
-      android:layout_marginEnd="8dp"
       android:fontFamily="sans-serif"
       android:minHeight="32dp"
       android:text="@{viewModel.errorMessage}"
diff --git a/app/src/main/res/layout-sw600dp-land/next_button_item.xml b/app/src/main/res/layout-sw600dp-land/next_button_item.xml
index 686b50b3c37..c60f63e4e5b 100644
--- a/app/src/main/res/layout-sw600dp-land/next_button_item.xml
+++ b/app/src/main/res/layout-sw600dp-land/next_button_item.xml
@@ -10,51 +10,36 @@
       name="buttonViewModel"
       type="org.oppia.app.player.state.itemviewmodel.NextButtonViewModel" />
   </data>
-
+  <!-- Margins -->
+  <!-- Exploration Split View: 24, 72, 64, 0 -->
+  <!-- Exploration View: 176, 24, 176, 0 -->
+  <!-- Question Split View: 24, 72, 64, 0 -->
+  <!-- Question View: 192, 24, 192, 0 -->
+  <!-- Note: Start/End margins are 4dp less which is getting adjusted in child views. -->
   <androidx.constraintlayout.widget.ConstraintLayout
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:gravity="center_vertical"
     app:explorationSplitViewMarginApplicable="@{buttonViewModel.hasConversationView &amp;&amp; buttonViewModel.isSplitView}"
     app:explorationSplitViewMarginBottom="@{@dimen/margin_0}"
-    app:explorationSplitViewMarginEnd="@{@dimen/margin_64}"
-    app:explorationSplitViewMarginStart="@{@dimen/margin_0}"
+    app:explorationSplitViewMarginEnd="@{@dimen/margin_60}"
+    app:explorationSplitViewMarginStart="@{@dimen/margin_20}"
     app:explorationSplitViewMarginTop="@{@dimen/margin_72}"
-    app:explorationSplitViewPaddingApplicable="@{buttonViewModel.hasConversationView &amp;&amp; buttonViewModel.isSplitView}"
-    app:explorationSplitViewPaddingBottom="@{@dimen/padding_0}"
-    app:explorationSplitViewPaddingEnd="@{@dimen/padding_0}"
-    app:explorationSplitViewPaddingStart="@{@dimen/padding_0}"
-    app:explorationSplitViewPaddingTop="@{@dimen/padding_0}"
     app:explorationViewMarginApplicable="@{buttonViewModel.hasConversationView &amp;&amp; !buttonViewModel.isSplitView}"
     app:explorationViewMarginBottom="@{@dimen/margin_0}"
-    app:explorationViewMarginEnd="@{@dimen/margin_176}"
-    app:explorationViewMarginStart="@{@dimen/margin_176}"
-    app:explorationViewMarginTop="@{@dimen/margin_72}"
-    app:explorationViewPaddingApplicable="@{buttonViewModel.hasConversationView &amp;&amp; !buttonViewModel.isSplitView}"
-    app:explorationViewPaddingBottom="@{@dimen/padding_0}"
-    app:explorationViewPaddingEnd="@{@dimen/padding_0}"
-    app:explorationViewPaddingStart="@{@dimen/padding_0}"
-    app:explorationViewPaddingTop="@{@dimen/padding_0}"
+    app:explorationViewMarginEnd="@{@dimen/margin_172}"
+    app:explorationViewMarginStart="@{@dimen/margin_172}"
+    app:explorationViewMarginTop="@{@dimen/margin_24}"
     app:questionSplitViewMarginApplicable="@{!buttonViewModel.hasConversationView &amp;&amp; buttonViewModel.isSplitView}"
     app:questionSplitViewMarginBottom="@{@dimen/margin_0}"
-    app:questionSplitViewMarginEnd="@{@dimen/margin_64}"
-    app:questionSplitViewMarginStart="@{@dimen/margin_0}"
+    app:questionSplitViewMarginEnd="@{@dimen/margin_60}"
+    app:questionSplitViewMarginStart="@{@dimen/margin_20}"
     app:questionSplitViewMarginTop="@{@dimen/margin_72}"
-    app:questionSplitViewPaddingApplicable="@{!buttonViewModel.hasConversationView &amp;&amp; buttonViewModel.isSplitView}"
-    app:questionSplitViewPaddingBottom="@{@dimen/padding_0}"
-    app:questionSplitViewPaddingEnd="@{@dimen/padding_0}"
-    app:questionSplitViewPaddingStart="@{@dimen/padding_0}"
-    app:questionSplitViewPaddingTop="@{@dimen/padding_0}"
     app:questionViewMarginApplicable="@{!buttonViewModel.hasConversationView &amp;&amp; !buttonViewModel.isSplitView}"
     app:questionViewMarginBottom="@{@dimen/margin_0}"
-    app:questionViewMarginEnd="@{@dimen/margin_192}"
-    app:questionViewMarginStart="@{@dimen/margin_192}"
-    app:questionViewMarginTop="@{@dimen/margin_72}"
-    app:questionViewPaddingApplicable="@{!buttonViewModel.hasConversationView &amp;&amp; !buttonViewModel.isSplitView}"
-    app:questionViewPaddingBottom="@{@dimen/padding_0}"
-    app:questionViewPaddingEnd="@{@dimen/padding_0}"
-    app:questionViewPaddingStart="@{@dimen/padding_0}"
-    app:questionViewPaddingTop="@{@dimen/padding_0}">
+    app:questionViewMarginEnd="@{@dimen/margin_188}"
+    app:questionViewMarginStart="@{@dimen/margin_188}"
+    app:questionViewMarginTop="@{@dimen/margin_24}">
 
     <ImageButton
       android:id="@+id/previous_state_navigation_button"
@@ -65,7 +50,7 @@
       android:contentDescription="@string/previous_state_description"
       android:elevation="2dp"
       android:onClick="@{(v) -> buttonViewModel.previousNavigationButtonListener.onPreviousButtonClicked()}"
-      android:padding="16dp"
+      android:padding="8dp"
       android:src="@drawable/ic_arrow_back_oppia_dark_blue_24dp"
       android:visibility="@{buttonViewModel.hasPreviousButton ? View.VISIBLE : View.GONE, default=gone}"
       app:layout_constraintBottom_toBottomOf="parent"
@@ -81,7 +66,7 @@
       android:contentDescription="@string/next_state_description"
       android:elevation="2dp"
       android:onClick="@{(v) -> buttonViewModel.nextNavigationButtonListener.onNextButtonClicked()}"
-      android:padding="16dp"
+      android:padding="8dp"
       android:src="@drawable/ic_arrow_forward_oppia_dark_blue_24dp"
       app:layout_constraintBottom_toBottomOf="parent"
       app:layout_constraintEnd_toEndOf="parent"
diff --git a/app/src/main/res/layout-sw600dp-land/numeric_input_interaction_item.xml b/app/src/main/res/layout-sw600dp-land/numeric_input_interaction_item.xml
index 74c3323ad40..433b85e8289 100644
--- a/app/src/main/res/layout-sw600dp-land/numeric_input_interaction_item.xml
+++ b/app/src/main/res/layout-sw600dp-land/numeric_input_interaction_item.xml
@@ -50,8 +50,6 @@
     <TextView
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
-      android:layout_marginStart="16dp"
-      android:layout_marginEnd="8dp"
       android:fontFamily="sans-serif"
       android:minHeight="32dp"
       android:text="@{viewModel.errorMessage}"
diff --git a/app/src/main/res/layout-sw600dp-land/previous_button_item.xml b/app/src/main/res/layout-sw600dp-land/previous_button_item.xml
index 1e0631b4c20..16a94cc5f4f 100644
--- a/app/src/main/res/layout-sw600dp-land/previous_button_item.xml
+++ b/app/src/main/res/layout-sw600dp-land/previous_button_item.xml
@@ -10,51 +10,36 @@
       name="buttonViewModel"
       type="org.oppia.app.player.state.itemviewmodel.PreviousButtonViewModel" />
   </data>
-
+  <!-- Margins -->
+  <!-- Exploration Split View: 24, 72, 64, 0 -->
+  <!-- Exploration View: 176, 24, 176, 0 -->
+  <!-- Question Split View: 24, 72, 64, 0 -->
+  <!-- Question View: 192, 24, 192, 0 -->
+  <!-- Note: Start/End margins are 4dp less which is getting adjusted in child views. -->
   <androidx.constraintlayout.widget.ConstraintLayout
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:gravity="center_vertical"
     app:explorationSplitViewMarginApplicable="@{buttonViewModel.hasConversationView &amp;&amp; buttonViewModel.isSplitView}"
     app:explorationSplitViewMarginBottom="@{@dimen/margin_0}"
-    app:explorationSplitViewMarginEnd="@{@dimen/margin_0}"
-    app:explorationSplitViewMarginStart="@{@dimen/margin_48}"
+    app:explorationSplitViewMarginEnd="@{@dimen/margin_60}"
+    app:explorationSplitViewMarginStart="@{@dimen/margin_20}"
     app:explorationSplitViewMarginTop="@{@dimen/margin_72}"
-    app:explorationSplitViewPaddingApplicable="@{buttonViewModel.hasConversationView &amp;&amp; buttonViewModel.isSplitView}"
-    app:explorationSplitViewPaddingBottom="@{@dimen/padding_0}"
-    app:explorationSplitViewPaddingEnd="@{@dimen/padding_0}"
-    app:explorationSplitViewPaddingStart="@{@dimen/padding_0}"
-    app:explorationSplitViewPaddingTop="@{@dimen/padding_0}"
     app:explorationViewMarginApplicable="@{buttonViewModel.hasConversationView &amp;&amp; !buttonViewModel.isSplitView}"
     app:explorationViewMarginBottom="@{@dimen/margin_0}"
-    app:explorationViewMarginEnd="@{@dimen/margin_0}"
-    app:explorationViewMarginStart="@{@dimen/margin_176}"
-    app:explorationViewMarginTop="@{@dimen/margin_72}"
-    app:explorationViewPaddingApplicable="@{buttonViewModel.hasConversationView &amp;&amp; !buttonViewModel.isSplitView}"
-    app:explorationViewPaddingBottom="@{@dimen/padding_0}"
-    app:explorationViewPaddingEnd="@{@dimen/padding_0}"
-    app:explorationViewPaddingStart="@{@dimen/padding_0}"
-    app:explorationViewPaddingTop="@{@dimen/padding_0}"
+    app:explorationViewMarginEnd="@{@dimen/margin_172}"
+    app:explorationViewMarginStart="@{@dimen/margin_172}"
+    app:explorationViewMarginTop="@{@dimen/margin_24}"
     app:questionSplitViewMarginApplicable="@{!buttonViewModel.hasConversationView &amp;&amp; buttonViewModel.isSplitView}"
     app:questionSplitViewMarginBottom="@{@dimen/margin_0}"
-    app:questionSplitViewMarginEnd="@{@dimen/margin_0}"
-    app:questionSplitViewMarginStart="@{@dimen/margin_48}"
+    app:questionSplitViewMarginEnd="@{@dimen/margin_60}"
+    app:questionSplitViewMarginStart="@{@dimen/margin_20}"
     app:questionSplitViewMarginTop="@{@dimen/margin_72}"
-    app:questionSplitViewPaddingApplicable="@{!buttonViewModel.hasConversationView &amp;&amp; buttonViewModel.isSplitView}"
-    app:questionSplitViewPaddingBottom="@{@dimen/padding_0}"
-    app:questionSplitViewPaddingEnd="@{@dimen/padding_0}"
-    app:questionSplitViewPaddingStart="@{@dimen/padding_0}"
-    app:questionSplitViewPaddingTop="@{@dimen/padding_0}"
     app:questionViewMarginApplicable="@{!buttonViewModel.hasConversationView &amp;&amp; !buttonViewModel.isSplitView}"
     app:questionViewMarginBottom="@{@dimen/margin_0}"
-    app:questionViewMarginEnd="@{@dimen/margin_0}"
-    app:questionViewMarginStart="@{@dimen/margin_192}"
-    app:questionViewMarginTop="@{@dimen/margin_72}"
-    app:questionViewPaddingApplicable="@{!buttonViewModel.hasConversationView &amp;&amp; !buttonViewModel.isSplitView}"
-    app:questionViewPaddingBottom="@{@dimen/padding_0}"
-    app:questionViewPaddingEnd="@{@dimen/padding_0}"
-    app:questionViewPaddingStart="@{@dimen/padding_0}"
-    app:questionViewPaddingTop="@{@dimen/padding_0}">
+    app:questionViewMarginEnd="@{@dimen/margin_188}"
+    app:questionViewMarginStart="@{@dimen/margin_188}"
+    app:questionViewMarginTop="@{@dimen/margin_24}">
 
     <ImageButton
       android:id="@+id/previous_state_navigation_button"
@@ -65,7 +50,7 @@
       android:contentDescription="@string/previous_state_description"
       android:elevation="2dp"
       android:onClick="@{(v) -> buttonViewModel.previousNavigationButtonListener.onPreviousButtonClicked()}"
-      android:padding="16dp"
+      android:padding="8dp"
       android:src="@drawable/ic_arrow_back_oppia_dark_blue_24dp"
       app:layout_constraintBottom_toBottomOf="parent"
       app:layout_constraintStart_toStartOf="parent"
diff --git a/app/src/main/res/layout-sw600dp-land/question_player_fragment.xml b/app/src/main/res/layout-sw600dp-land/question_player_fragment.xml
index 67a7ce3b8f5..ada9f85fc96 100644
--- a/app/src/main/res/layout-sw600dp-land/question_player_fragment.xml
+++ b/app/src/main/res/layout-sw600dp-land/question_player_fragment.xml
@@ -55,10 +55,12 @@
         android:id="@+id/question_recycler_view"
         android:layout_width="0dp"
         android:layout_height="0dp"
+        android:clipToPadding="false"
         android:divider="@android:color/transparent"
         android:dividerHeight="8dp"
         android:overScrollMode="never"
         android:paddingTop="24dp"
+        android:paddingBottom="112dp"
         app:data="@{viewModel.itemList}"
         app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
         app:layout_constraintBottom_toTopOf="@id/question_progress_bar"
@@ -70,10 +72,12 @@
         android:id="@+id/extra_interaction_recycler_view"
         android:layout_width="0dp"
         android:layout_height="0dp"
+        android:clipToPadding="false"
         android:divider="@android:color/transparent"
         android:dividerHeight="8dp"
         android:overScrollMode="never"
         android:paddingTop="24dp"
+        android:paddingBottom="112dp"
         android:visibility="@{viewModel.isSplitView ? View.VISIBLE : View.GONE}"
         app:data="@{viewModel.rightItemList}"
         app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
diff --git a/app/src/main/res/layout-sw600dp-land/replay_button_item.xml b/app/src/main/res/layout-sw600dp-land/replay_button_item.xml
index c7eebb36a39..14527778837 100644
--- a/app/src/main/res/layout-sw600dp-land/replay_button_item.xml
+++ b/app/src/main/res/layout-sw600dp-land/replay_button_item.xml
@@ -12,55 +12,21 @@
   <androidx.constraintlayout.widget.ConstraintLayout
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
+    android:layout_marginStart="188dp"
+    android:layout_marginTop="68dp"
+    android:layout_marginEnd="188dp"
+    android:layout_marginBottom="0dp"
     android:gravity="center_vertical"
-    app:explorationSplitViewMarginApplicable="@{buttonViewModel.hasConversationView &amp;&amp; buttonViewModel.isSplitView}"
-    app:explorationSplitViewMarginBottom="@{@dimen/margin_0}"
-    app:explorationSplitViewMarginEnd="@{@dimen/margin_0}"
-    app:explorationSplitViewMarginStart="@{@dimen/margin_0}"
-    app:explorationSplitViewMarginTop="@{@dimen/margin_0}"
-    app:explorationSplitViewPaddingApplicable="@{buttonViewModel.hasConversationView &amp;&amp; buttonViewModel.isSplitView}"
-    app:explorationSplitViewPaddingBottom="@{@dimen/padding_0}"
-    app:explorationSplitViewPaddingEnd="@{@dimen/padding_0}"
-    app:explorationSplitViewPaddingStart="@{@dimen/padding_0}"
-    app:explorationSplitViewPaddingTop="@{@dimen/padding_0}"
-    app:explorationViewMarginApplicable="@{buttonViewModel.hasConversationView &amp;&amp; !buttonViewModel.isSplitView}"
-    app:explorationViewMarginBottom="@{@dimen/margin_0}"
-    app:explorationViewMarginEnd="@{@dimen/margin_192}"
-    app:explorationViewMarginStart="@{@dimen/margin_192}"
-    app:explorationViewMarginTop="@{@dimen/margin_72}"
-    app:explorationViewPaddingApplicable="@{buttonViewModel.hasConversationView &amp;&amp; !buttonViewModel.isSplitView}"
-    app:explorationViewPaddingBottom="@{@dimen/padding_0}"
-    app:explorationViewPaddingEnd="@{@dimen/padding_0}"
-    app:explorationViewPaddingStart="@{@dimen/padding_0}"
-    app:explorationViewPaddingTop="@{@dimen/padding_0}"
-    app:questionSplitViewMarginApplicable="@{!buttonViewModel.hasConversationView &amp;&amp; buttonViewModel.isSplitView}"
-    app:questionSplitViewMarginBottom="@{@dimen/margin_0}"
-    app:questionSplitViewMarginEnd="@{@dimen/margin_64}"
-    app:questionSplitViewMarginStart="@{@dimen/margin_0}"
-    app:questionSplitViewMarginTop="@{@dimen/margin_72}"
-    app:questionSplitViewPaddingApplicable="@{!buttonViewModel.hasConversationView &amp;&amp; buttonViewModel.isSplitView}"
-    app:questionSplitViewPaddingBottom="@{@dimen/padding_0}"
-    app:questionSplitViewPaddingEnd="@{@dimen/padding_0}"
-    app:questionSplitViewPaddingStart="@{@dimen/padding_0}"
-    app:questionSplitViewPaddingTop="@{@dimen/padding_0}"
-    app:questionViewMarginApplicable="@{!buttonViewModel.hasConversationView &amp;&amp; !buttonViewModel.isSplitView}"
-    app:questionViewMarginBottom="@{@dimen/margin_0}"
-    app:questionViewMarginEnd="@{@dimen/margin_192}"
-    app:questionViewMarginStart="@{@dimen/margin_192}"
-    app:questionViewMarginTop="@{@dimen/margin_72}"
-    app:questionViewPaddingApplicable="@{!buttonViewModel.hasConversationView &amp;&amp; !buttonViewModel.isSplitView}"
-    app:questionViewPaddingBottom="@{@dimen/padding_0}"
-    app:questionViewPaddingEnd="@{@dimen/padding_0}"
-    app:questionViewPaddingStart="@{@dimen/padding_0}"
-    app:questionViewPaddingTop="@{@dimen/padding_0}">
+    android:visibility="@{buttonViewModel.hasConversationView ? View.GONE : View.VISIBLE}">
 
     <Button
       android:id="@+id/replay_button"
       style="@style/StateButtonActive"
-      android:layout_height="48dp"
+      android:layout_margin="4dp"
       android:background="@drawable/state_button_orange_background"
       android:drawableStart="@drawable/ic_refresh_white_24dp"
       android:drawablePadding="4dp"
+      android:minHeight="48dp"
       android:onClick="@{(v) -> buttonViewModel.replayButtonListener.onReplayButtonClicked()}"
       android:text="@string/lesson_replay_button_text"
       android:textColor="@color/white"
diff --git a/app/src/main/res/layout-sw600dp-land/return_to_topic_button_item.xml b/app/src/main/res/layout-sw600dp-land/return_to_topic_button_item.xml
index 75ba18808e2..fc6b3eb63fe 100644
--- a/app/src/main/res/layout-sw600dp-land/return_to_topic_button_item.xml
+++ b/app/src/main/res/layout-sw600dp-land/return_to_topic_button_item.xml
@@ -10,51 +10,36 @@
       name="buttonViewModel"
       type="org.oppia.app.player.state.itemviewmodel.ReturnToTopicButtonViewModel" />
   </data>
-
+  <!-- Margins -->
+  <!-- Exploration Split View: 24, 72, 64, 0 -->
+  <!-- Exploration View: 176, 24, 176, 0 -->
+  <!-- Question Split View: 24, 12, 64, 0 -->
+  <!-- Question View: 192, 12, 192, 0 -->
+  <!-- Note: Start/End margins are 4dp less which is getting adjusted in child views. -->
   <androidx.constraintlayout.widget.ConstraintLayout
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:gravity="center_vertical"
     app:explorationSplitViewMarginApplicable="@{buttonViewModel.hasConversationView &amp;&amp; buttonViewModel.isSplitView}"
     app:explorationSplitViewMarginBottom="@{@dimen/margin_0}"
-    app:explorationSplitViewMarginEnd="@{@dimen/margin_0}"
-    app:explorationSplitViewMarginStart="@{@dimen/margin_0}"
-    app:explorationSplitViewMarginTop="@{@dimen/margin_0}"
-    app:explorationSplitViewPaddingApplicable="@{buttonViewModel.hasConversationView &amp;&amp; buttonViewModel.isSplitView}"
-    app:explorationSplitViewPaddingBottom="@{@dimen/padding_0}"
-    app:explorationSplitViewPaddingEnd="@{@dimen/padding_0}"
-    app:explorationSplitViewPaddingStart="@{@dimen/padding_0}"
-    app:explorationSplitViewPaddingTop="@{@dimen/padding_0}"
+    app:explorationSplitViewMarginEnd="@{@dimen/margin_60}"
+    app:explorationSplitViewMarginStart="@{@dimen/margin_20}"
+    app:explorationSplitViewMarginTop="@{@dimen/margin_72}"
     app:explorationViewMarginApplicable="@{buttonViewModel.hasConversationView &amp;&amp; !buttonViewModel.isSplitView}"
     app:explorationViewMarginBottom="@{@dimen/margin_0}"
-    app:explorationViewMarginEnd="@{@dimen/margin_192}"
-    app:explorationViewMarginStart="@{@dimen/margin_192}"
-    app:explorationViewMarginTop="@{@dimen/margin_72}"
-    app:explorationViewPaddingApplicable="@{buttonViewModel.hasConversationView &amp;&amp; !buttonViewModel.isSplitView}"
-    app:explorationViewPaddingBottom="@{@dimen/padding_0}"
-    app:explorationViewPaddingEnd="@{@dimen/padding_0}"
-    app:explorationViewPaddingStart="@{@dimen/padding_0}"
-    app:explorationViewPaddingTop="@{@dimen/padding_0}"
+    app:explorationViewMarginEnd="@{@dimen/margin_172}"
+    app:explorationViewMarginStart="@{@dimen/margin_172}"
+    app:explorationViewMarginTop="@{@dimen/margin_24}"
     app:questionSplitViewMarginApplicable="@{!buttonViewModel.hasConversationView &amp;&amp; buttonViewModel.isSplitView}"
     app:questionSplitViewMarginBottom="@{@dimen/margin_0}"
-    app:questionSplitViewMarginEnd="@{@dimen/margin_0}"
-    app:questionSplitViewMarginStart="@{@dimen/margin_0}"
-    app:questionSplitViewMarginTop="@{@dimen/margin_0}"
-    app:questionSplitViewPaddingApplicable="@{!buttonViewModel.hasConversationView &amp;&amp; buttonViewModel.isSplitView}"
-    app:questionSplitViewPaddingBottom="@{@dimen/padding_0}"
-    app:questionSplitViewPaddingEnd="@{@dimen/padding_0}"
-    app:questionSplitViewPaddingStart="@{@dimen/padding_0}"
-    app:questionSplitViewPaddingTop="@{@dimen/padding_0}"
+    app:questionSplitViewMarginEnd="@{@dimen/margin_60}"
+    app:questionSplitViewMarginStart="@{@dimen/margin_20}"
+    app:questionSplitViewMarginTop="@{@dimen/margin_8}"
     app:questionViewMarginApplicable="@{!buttonViewModel.hasConversationView &amp;&amp; !buttonViewModel.isSplitView}"
     app:questionViewMarginBottom="@{@dimen/margin_0}"
-    app:questionViewMarginEnd="@{@dimen/margin_192}"
-    app:questionViewMarginStart="@{@dimen/margin_192}"
-    app:questionViewMarginTop="@{@dimen/margin_12}"
-    app:questionViewPaddingApplicable="@{!buttonViewModel.hasConversationView &amp;&amp; !buttonViewModel.isSplitView}"
-    app:questionViewPaddingBottom="@{@dimen/padding_0}"
-    app:questionViewPaddingEnd="@{@dimen/padding_0}"
-    app:questionViewPaddingStart="@{@dimen/padding_0}"
-    app:questionViewPaddingTop="@{@dimen/padding_0}">
+    app:questionViewMarginEnd="@{@dimen/margin_188}"
+    app:questionViewMarginStart="@{@dimen/margin_188}"
+    app:questionViewMarginTop="@{@dimen/margin_8}">
 
     <ImageButton
       android:id="@+id/previous_state_navigation_button"
@@ -65,7 +50,7 @@
       android:contentDescription="@string/previous_state_description"
       android:elevation="2dp"
       android:onClick="@{(v) -> buttonViewModel.previousNavigationButtonListener.onPreviousButtonClicked()}"
-      android:padding="16dp"
+      android:padding="8dp"
       android:src="@drawable/ic_arrow_back_oppia_dark_blue_24dp"
       android:visibility="@{buttonViewModel.hasPreviousButton ? View.VISIBLE: View.GONE, default=gone}"
       app:layout_constraintBottom_toBottomOf="parent"
@@ -76,6 +61,7 @@
       android:id="@+id/return_to_topic_button"
       style="@style/StateButtonActive"
       android:layout_height="0dp"
+      android:layout_margin="4dp"
       android:button="@drawable/state_button_primary_background"
       android:onClick="@{(v) -> buttonViewModel.returnToTopicNavigationButtonListener.onReturnToTopicButtonClicked()}"
       android:text="@string/state_end_exploration_button"
diff --git a/app/src/main/res/layout-sw600dp-land/submit_button_item.xml b/app/src/main/res/layout-sw600dp-land/submit_button_item.xml
index cef277a3f51..c5f272976c8 100644
--- a/app/src/main/res/layout-sw600dp-land/submit_button_item.xml
+++ b/app/src/main/res/layout-sw600dp-land/submit_button_item.xml
@@ -10,51 +10,36 @@
       name="buttonViewModel"
       type="org.oppia.app.player.state.itemviewmodel.SubmitButtonViewModel" />
   </data>
-
+  <!-- Margins -->
+  <!-- Exploration Split View: 24, 72, 64, 0 -->
+  <!-- Exploration View: 176, 24, 176, 0 -->
+  <!-- Question Split View: 24, 72, 64, 0 -->
+  <!-- Question View: 192, 24, 192, 0 -->
+  <!-- Note: Start/End margins are 4dp less which is getting adjusted in child views. -->
   <androidx.constraintlayout.widget.ConstraintLayout
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:gravity="center_vertical"
     app:explorationSplitViewMarginApplicable="@{buttonViewModel.hasConversationView &amp;&amp; buttonViewModel.isSplitView}"
     app:explorationSplitViewMarginBottom="@{@dimen/margin_0}"
-    app:explorationSplitViewMarginEnd="@{@dimen/margin_64}"
-    app:explorationSplitViewMarginStart="@{@dimen/margin_0}"
+    app:explorationSplitViewMarginEnd="@{@dimen/margin_60}"
+    app:explorationSplitViewMarginStart="@{@dimen/margin_20}"
     app:explorationSplitViewMarginTop="@{@dimen/margin_72}"
-    app:explorationSplitViewPaddingApplicable="@{buttonViewModel.hasConversationView &amp;&amp; buttonViewModel.isSplitView}"
-    app:explorationSplitViewPaddingBottom="@{@dimen/padding_0}"
-    app:explorationSplitViewPaddingEnd="@{@dimen/padding_0}"
-    app:explorationSplitViewPaddingStart="@{@dimen/padding_0}"
-    app:explorationSplitViewPaddingTop="@{@dimen/padding_0}"
     app:explorationViewMarginApplicable="@{buttonViewModel.hasConversationView &amp;&amp; !buttonViewModel.isSplitView}"
     app:explorationViewMarginBottom="@{@dimen/margin_0}"
-    app:explorationViewMarginEnd="@{@dimen/margin_176}"
-    app:explorationViewMarginStart="@{@dimen/margin_176}"
-    app:explorationViewMarginTop="@{@dimen/margin_72}"
-    app:explorationViewPaddingApplicable="@{buttonViewModel.hasConversationView &amp;&amp; !buttonViewModel.isSplitView}"
-    app:explorationViewPaddingBottom="@{@dimen/padding_0}"
-    app:explorationViewPaddingEnd="@{@dimen/padding_0}"
-    app:explorationViewPaddingStart="@{@dimen/padding_0}"
-    app:explorationViewPaddingTop="@{@dimen/padding_0}"
+    app:explorationViewMarginEnd="@{@dimen/margin_172}"
+    app:explorationViewMarginStart="@{@dimen/margin_172}"
+    app:explorationViewMarginTop="@{@dimen/margin_24}"
     app:questionSplitViewMarginApplicable="@{!buttonViewModel.hasConversationView &amp;&amp; buttonViewModel.isSplitView}"
     app:questionSplitViewMarginBottom="@{@dimen/margin_0}"
-    app:questionSplitViewMarginEnd="@{@dimen/margin_64}"
-    app:questionSplitViewMarginStart="@{@dimen/margin_0}"
+    app:questionSplitViewMarginEnd="@{@dimen/margin_60}"
+    app:questionSplitViewMarginStart="@{@dimen/margin_20}"
     app:questionSplitViewMarginTop="@{@dimen/margin_72}"
-    app:questionSplitViewPaddingApplicable="@{!buttonViewModel.hasConversationView &amp;&amp; buttonViewModel.isSplitView}"
-    app:questionSplitViewPaddingBottom="@{@dimen/padding_0}"
-    app:questionSplitViewPaddingEnd="@{@dimen/padding_0}"
-    app:questionSplitViewPaddingStart="@{@dimen/padding_0}"
-    app:questionSplitViewPaddingTop="@{@dimen/padding_0}"
     app:questionViewMarginApplicable="@{!buttonViewModel.hasConversationView &amp;&amp; !buttonViewModel.isSplitView}"
     app:questionViewMarginBottom="@{@dimen/margin_0}"
-    app:questionViewMarginEnd="@{@dimen/margin_192}"
-    app:questionViewMarginStart="@{@dimen/margin_192}"
-    app:questionViewMarginTop="@{@dimen/margin_72}"
-    app:questionViewPaddingApplicable="@{!buttonViewModel.hasConversationView &amp;&amp; !buttonViewModel.isSplitView}"
-    app:questionViewPaddingBottom="@{@dimen/padding_0}"
-    app:questionViewPaddingEnd="@{@dimen/padding_0}"
-    app:questionViewPaddingStart="@{@dimen/padding_0}"
-    app:questionViewPaddingTop="@{@dimen/padding_0}">
+    app:questionViewMarginEnd="@{@dimen/margin_188}"
+    app:questionViewMarginStart="@{@dimen/margin_188}"
+    app:questionViewMarginTop="@{@dimen/margin_24}">
 
     <ImageButton
       android:id="@+id/previous_state_navigation_button"
@@ -65,7 +50,7 @@
       android:contentDescription="@string/previous_state_description"
       android:elevation="2dp"
       android:onClick="@{(v) -> buttonViewModel.previousNavigationButtonListener.onPreviousButtonClicked()}"
-      android:padding="16dp"
+      android:padding="8dp"
       android:src="@drawable/ic_arrow_back_oppia_dark_blue_24dp"
       android:visibility="@{buttonViewModel.hasPreviousButton ? View.VISIBLE: View.GONE, default=gone}"
       app:layout_constraintBottom_toBottomOf="parent"
@@ -77,9 +62,10 @@
       style="@style/StateButtonActive"
       android:layout_height="0dp"
       android:layout_alignParentEnd="true"
+      android:layout_margin="4dp"
+      android:background="@{buttonViewModel.canSubmitAnswer ? @drawable/state_button_primary_background : @drawable/state_button_inactive_background}"
       android:button="@drawable/state_button_primary_background"
       android:clickable="@{buttonViewModel.canSubmitAnswer}"
-      android:background="@{buttonViewModel.canSubmitAnswer ? @drawable/state_button_primary_background : @drawable/state_button_inactive_background}"
       android:onClick="@{(v) -> buttonViewModel.submitNavigationButtonListener.onSubmitButtonClicked()}"
       android:text="@string/state_submit_button"
       android:textColor="@color/white"
diff --git a/app/src/main/res/layout-sw600dp-port/continue_interaction_item.xml b/app/src/main/res/layout-sw600dp-port/continue_interaction_item.xml
index 292fe77185f..026ee653424 100644
--- a/app/src/main/res/layout-sw600dp-port/continue_interaction_item.xml
+++ b/app/src/main/res/layout-sw600dp-port/continue_interaction_item.xml
@@ -10,50 +10,35 @@
       name="viewModel"
       type="org.oppia.app.player.state.itemviewmodel.ContinueInteractionViewModel" />
   </data>
-
+  <!-- Margins -->
+  <!-- Exploration Split View: 24, 72, 32, 0 -->
+  <!-- Exploration View: 112, 24, 112, 0 -->
+  <!-- Question Split View: 24, 72, 32, 0 -->
+  <!-- Question View: 128, 24, 128, 0 -->
+  <!-- Note: Start/End margins are 4dp less which is getting adjusted in child views. -->
   <androidx.constraintlayout.widget.ConstraintLayout
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     app:explorationSplitViewMarginApplicable="@{viewModel.hasConversationView &amp;&amp; viewModel.isSplitView}"
     app:explorationSplitViewMarginBottom="@{@dimen/margin_0}"
-    app:explorationSplitViewMarginEnd="@{@dimen/margin_64}"
-    app:explorationSplitViewMarginStart="@{@dimen/margin_0}"
+    app:explorationSplitViewMarginEnd="@{@dimen/margin_28}"
+    app:explorationSplitViewMarginStart="@{@dimen/margin_20}"
     app:explorationSplitViewMarginTop="@{@dimen/margin_72}"
-    app:explorationSplitViewPaddingApplicable="@{viewModel.hasConversationView &amp;&amp; viewModel.isSplitView}"
-    app:explorationSplitViewPaddingBottom="@{@dimen/padding_0}"
-    app:explorationSplitViewPaddingEnd="@{@dimen/padding_0}"
-    app:explorationSplitViewPaddingStart="@{@dimen/padding_0}"
-    app:explorationSplitViewPaddingTop="@{@dimen/padding_0}"
     app:explorationViewMarginApplicable="@{viewModel.hasConversationView &amp;&amp; !viewModel.isSplitView}"
     app:explorationViewMarginBottom="@{@dimen/margin_0}"
-    app:explorationViewMarginEnd="@{@dimen/margin_112}"
-    app:explorationViewMarginStart="@{@dimen/margin_112}"
-    app:explorationViewMarginTop="@{@dimen/margin_72}"
-    app:explorationViewPaddingApplicable="@{viewModel.hasConversationView &amp;&amp; !viewModel.isSplitView}"
-    app:explorationViewPaddingBottom="@{@dimen/padding_0}"
-    app:explorationViewPaddingEnd="@{@dimen/padding_0}"
-    app:explorationViewPaddingStart="@{@dimen/padding_0}"
-    app:explorationViewPaddingTop="@{@dimen/padding_0}"
+    app:explorationViewMarginEnd="@{@dimen/margin_108}"
+    app:explorationViewMarginStart="@{@dimen/margin_108}"
+    app:explorationViewMarginTop="@{@dimen/margin_24}"
     app:questionSplitViewMarginApplicable="@{!viewModel.hasConversationView &amp;&amp; viewModel.isSplitView}"
     app:questionSplitViewMarginBottom="@{@dimen/margin_0}"
-    app:questionSplitViewMarginEnd="@{@dimen/margin_64}"
-    app:questionSplitViewMarginStart="@{@dimen/margin_0}"
+    app:questionSplitViewMarginEnd="@{@dimen/margin_28}"
+    app:questionSplitViewMarginStart="@{@dimen/margin_20}"
     app:questionSplitViewMarginTop="@{@dimen/margin_72}"
-    app:questionSplitViewPaddingApplicable="@{!viewModel.hasConversationView &amp;&amp; viewModel.isSplitView}"
-    app:questionSplitViewPaddingBottom="@{@dimen/padding_0}"
-    app:questionSplitViewPaddingEnd="@{@dimen/padding_0}"
-    app:questionSplitViewPaddingStart="@{@dimen/padding_0}"
-    app:questionSplitViewPaddingTop="@{@dimen/padding_0}"
     app:questionViewMarginApplicable="@{!viewModel.hasConversationView &amp;&amp; !viewModel.isSplitView}"
     app:questionViewMarginBottom="@{@dimen/margin_0}"
-    app:questionViewMarginEnd="@{@dimen/margin_128}"
-    app:questionViewMarginStart="@{@dimen/margin_128}"
-    app:questionViewMarginTop="@{@dimen/margin_72}"
-    app:questionViewPaddingApplicable="@{!viewModel.hasConversationView &amp;&amp; !viewModel.isSplitView}"
-    app:questionViewPaddingBottom="@{@dimen/padding_0}"
-    app:questionViewPaddingEnd="@{@dimen/padding_0}"
-    app:questionViewPaddingStart="@{@dimen/padding_0}"
-    app:questionViewPaddingTop="@{@dimen/padding_0}">
+    app:questionViewMarginEnd="@{@dimen/margin_124}"
+    app:questionViewMarginStart="@{@dimen/margin_124}"
+    app:questionViewMarginTop="@{@dimen/margin_24}">
 
     <ImageButton
       android:id="@+id/previous_state_navigation_button"
@@ -65,7 +50,7 @@
       android:contentDescription="@string/previous_state_description"
       android:elevation="2dp"
       android:onClick="@{(v) -> viewModel.previousNavigationButtonListener.onPreviousButtonClicked()}"
-      android:padding="16dp"
+      android:padding="8dp"
       android:src="@drawable/ic_arrow_back_oppia_dark_blue_24dp"
       android:visibility="@{viewModel.hasPreviousButton ? View.VISIBLE: View.GONE, default=gone}"
       app:layout_constraintBottom_toBottomOf="parent"
@@ -76,6 +61,7 @@
       android:id="@+id/continue_button"
       style="@style/StateButtonActive"
       android:layout_height="0dp"
+      android:layout_margin="4dp"
       android:button="@drawable/state_button_primary_background"
       android:clickable="true"
       android:elevation="2dp"
diff --git a/app/src/main/res/layout-sw600dp-port/continue_navigation_button_item.xml b/app/src/main/res/layout-sw600dp-port/continue_navigation_button_item.xml
index 8986febb17a..824175bceeb 100644
--- a/app/src/main/res/layout-sw600dp-port/continue_navigation_button_item.xml
+++ b/app/src/main/res/layout-sw600dp-port/continue_navigation_button_item.xml
@@ -10,50 +10,35 @@
       name="buttonViewModel"
       type="org.oppia.app.player.state.itemviewmodel.ContinueNavigationButtonViewModel" />
   </data>
-
+  <!-- Margins -->
+  <!-- Exploration Split View: 24, 72, 32, 0 -->
+  <!-- Exploration View: 112, 24, 112, 0 -->
+  <!-- Question Split View: 24, 72, 32, 0 -->
+  <!-- Question View: 128, 24, 128, 0 -->
+  <!-- Note: Start/End margins are 4dp less which is getting adjusted in child views. -->
   <androidx.constraintlayout.widget.ConstraintLayout
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     app:explorationSplitViewMarginApplicable="@{buttonViewModel.hasConversationView &amp;&amp; buttonViewModel.isSplitView}"
     app:explorationSplitViewMarginBottom="@{@dimen/margin_0}"
-    app:explorationSplitViewMarginEnd="@{@dimen/margin_64}"
-    app:explorationSplitViewMarginStart="@{@dimen/margin_0}"
+    app:explorationSplitViewMarginEnd="@{@dimen/margin_28}"
+    app:explorationSplitViewMarginStart="@{@dimen/margin_20}"
     app:explorationSplitViewMarginTop="@{@dimen/margin_72}"
-    app:explorationSplitViewPaddingApplicable="@{buttonViewModel.hasConversationView &amp;&amp; buttonViewModel.isSplitView}"
-    app:explorationSplitViewPaddingBottom="@{@dimen/padding_0}"
-    app:explorationSplitViewPaddingEnd="@{@dimen/padding_0}"
-    app:explorationSplitViewPaddingStart="@{@dimen/padding_0}"
-    app:explorationSplitViewPaddingTop="@{@dimen/padding_0}"
     app:explorationViewMarginApplicable="@{buttonViewModel.hasConversationView &amp;&amp; !buttonViewModel.isSplitView}"
     app:explorationViewMarginBottom="@{@dimen/margin_0}"
-    app:explorationViewMarginEnd="@{@dimen/margin_112}"
-    app:explorationViewMarginStart="@{@dimen/margin_112}"
-    app:explorationViewMarginTop="@{@dimen/margin_72}"
-    app:explorationViewPaddingApplicable="@{buttonViewModel.hasConversationView &amp;&amp; !buttonViewModel.isSplitView}"
-    app:explorationViewPaddingBottom="@{@dimen/padding_0}"
-    app:explorationViewPaddingEnd="@{@dimen/padding_0}"
-    app:explorationViewPaddingStart="@{@dimen/padding_0}"
-    app:explorationViewPaddingTop="@{@dimen/padding_0}"
+    app:explorationViewMarginEnd="@{@dimen/margin_108}"
+    app:explorationViewMarginStart="@{@dimen/margin_108}"
+    app:explorationViewMarginTop="@{@dimen/margin_24}"
     app:questionSplitViewMarginApplicable="@{!buttonViewModel.hasConversationView &amp;&amp; buttonViewModel.isSplitView}"
     app:questionSplitViewMarginBottom="@{@dimen/margin_0}"
-    app:questionSplitViewMarginEnd="@{@dimen/margin_64}"
-    app:questionSplitViewMarginStart="@{@dimen/margin_0}"
+    app:questionSplitViewMarginEnd="@{@dimen/margin_28}"
+    app:questionSplitViewMarginStart="@{@dimen/margin_20}"
     app:questionSplitViewMarginTop="@{@dimen/margin_72}"
-    app:questionSplitViewPaddingApplicable="@{!buttonViewModel.hasConversationView &amp;&amp; buttonViewModel.isSplitView}"
-    app:questionSplitViewPaddingBottom="@{@dimen/padding_0}"
-    app:questionSplitViewPaddingEnd="@{@dimen/padding_0}"
-    app:questionSplitViewPaddingStart="@{@dimen/padding_0}"
-    app:questionSplitViewPaddingTop="@{@dimen/padding_0}"
     app:questionViewMarginApplicable="@{!buttonViewModel.hasConversationView &amp;&amp; !buttonViewModel.isSplitView}"
     app:questionViewMarginBottom="@{@dimen/margin_0}"
-    app:questionViewMarginEnd="@{@dimen/margin_128}"
-    app:questionViewMarginStart="@{@dimen/margin_128}"
-    app:questionViewMarginTop="@{@dimen/margin_72}"
-    app:questionViewPaddingApplicable="@{!buttonViewModel.hasConversationView &amp;&amp; !buttonViewModel.isSplitView}"
-    app:questionViewPaddingBottom="@{@dimen/padding_0}"
-    app:questionViewPaddingEnd="@{@dimen/padding_0}"
-    app:questionViewPaddingStart="@{@dimen/padding_0}"
-    app:questionViewPaddingTop="@{@dimen/padding_0}">
+    app:questionViewMarginEnd="@{@dimen/margin_124}"
+    app:questionViewMarginStart="@{@dimen/margin_124}"
+    app:questionViewMarginTop="@{@dimen/margin_24}">
 
     <ImageButton
       android:id="@+id/previous_state_navigation_button"
@@ -64,24 +49,25 @@
       android:contentDescription="@string/previous_state_description"
       android:elevation="2dp"
       android:onClick="@{(v) -> buttonViewModel.previousNavigationButtonListener.onPreviousButtonClicked()}"
-      android:padding="16dp"
+      android:padding="8dp"
       android:src="@drawable/ic_arrow_back_oppia_dark_blue_24dp"
-      app:layout_constraintTop_toTopOf="parent"
+      android:visibility="@{buttonViewModel.hasPreviousButton ? View.VISIBLE: View.GONE, default=gone}"
       app:layout_constraintBottom_toBottomOf="parent"
       app:layout_constraintStart_toStartOf="parent"
-      android:visibility="@{buttonViewModel.hasPreviousButton ? View.VISIBLE: View.GONE, default=gone}" />
+      app:layout_constraintTop_toTopOf="parent" />
 
     <Button
       android:id="@+id/continue_navigation_button"
       style="@style/StateButtonActive"
       android:layout_height="0dp"
+      android:layout_margin="4dp"
       android:button="@drawable/state_button_primary_background"
       android:onClick="@{(v) -> buttonViewModel.continueNavigationButtonListener.onContinueButtonClicked()}"
       android:text="@string/state_continue_button"
       android:textColor="@color/white"
-      app:layout_constraintHeight_min="48dp"
-      app:layout_constraintTop_toTopOf="parent"
       app:layout_constraintBottom_toBottomOf="parent"
-      app:layout_constraintEnd_toEndOf="parent" />
+      app:layout_constraintEnd_toEndOf="parent"
+      app:layout_constraintHeight_min="48dp"
+      app:layout_constraintTop_toTopOf="parent" />
   </androidx.constraintlayout.widget.ConstraintLayout>
 </layout>
diff --git a/app/src/main/res/layout-sw600dp-port/drag_drop_interaction_item.xml b/app/src/main/res/layout-sw600dp-port/drag_drop_interaction_item.xml
index 4694c2cc669..514fb871fd6 100644
--- a/app/src/main/res/layout-sw600dp-port/drag_drop_interaction_item.xml
+++ b/app/src/main/res/layout-sw600dp-port/drag_drop_interaction_item.xml
@@ -23,7 +23,10 @@
     android:descendantFocusability="beforeDescendants"
     android:focusableInTouchMode="true"
     android:orientation="vertical"
-    android:padding="0dp"
+    android:paddingStart="16dp"
+    android:paddingTop="16dp"
+    android:paddingEnd="16dp"
+    android:paddingBottom="20dp"
     app:explorationSplitViewMarginApplicable="@{viewModel.hasConversationView &amp;&amp; viewModel.splitView}"
     app:explorationSplitViewMarginBottom="@{@dimen/margin_0}"
     app:explorationSplitViewMarginEnd="@{@dimen/margin_32}"
@@ -49,7 +52,9 @@
       android:id="@+id/drag_drop_grouping_hint_text_view"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
-      android:layout_marginStart="12dp"
+      android:layout_marginStart="8dp"
+      android:layout_marginEnd="8dp"
+      android:layout_marginBottom="8dp"
       android:text="@string/drag_and_drop_interaction_group_merge_hint"
       android:textSize="14sp"
       android:textStyle="italic"
diff --git a/app/src/main/res/layout-sw600dp-port/fraction_interaction_item.xml b/app/src/main/res/layout-sw600dp-port/fraction_interaction_item.xml
index 8b0c6025641..721ea87df03 100644
--- a/app/src/main/res/layout-sw600dp-port/fraction_interaction_item.xml
+++ b/app/src/main/res/layout-sw600dp-port/fraction_interaction_item.xml
@@ -51,13 +51,11 @@
       android:id="@+id/fraction_input_error"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
-      android:layout_marginStart="16dp"
-      android:layout_marginEnd="8dp"
       android:fontFamily="sans-serif"
       android:minHeight="32dp"
       android:text="@{viewModel.errorMessage}"
       android:textColor="@color/editTextError"
       android:textSize="12sp"
-      android:visibility="@{viewModel.errorMessage.length()>0? View.VISIBLE : View.INVISIBLE}" />
+      android:visibility="@{viewModel.errorMessage.length() > 0 ? View.VISIBLE : View.INVISIBLE}" />
   </LinearLayout>
 </layout>
diff --git a/app/src/main/res/layout-sw600dp-port/next_button_item.xml b/app/src/main/res/layout-sw600dp-port/next_button_item.xml
index 6cc25e336b8..a7553133493 100644
--- a/app/src/main/res/layout-sw600dp-port/next_button_item.xml
+++ b/app/src/main/res/layout-sw600dp-port/next_button_item.xml
@@ -10,51 +10,36 @@
       name="buttonViewModel"
       type="org.oppia.app.player.state.itemviewmodel.NextButtonViewModel" />
   </data>
-
+  <!-- Margins -->
+  <!-- Exploration Split View: 24, 72, 32, 0 -->
+  <!-- Exploration View: 112, 24, 112, 0 -->
+  <!-- Question Split View: 24, 72, 32, 0 -->
+  <!-- Question View: 128, 24, 128, 0 -->
+  <!-- Note: Start/End margins are 4dp less which is getting adjusted in child views. -->
   <androidx.constraintlayout.widget.ConstraintLayout
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:gravity="center_vertical"
     app:explorationSplitViewMarginApplicable="@{buttonViewModel.hasConversationView &amp;&amp; buttonViewModel.isSplitView}"
     app:explorationSplitViewMarginBottom="@{@dimen/margin_0}"
-    app:explorationSplitViewMarginEnd="@{@dimen/margin_64}"
-    app:explorationSplitViewMarginStart="@{@dimen/margin_0}"
+    app:explorationSplitViewMarginEnd="@{@dimen/margin_28}"
+    app:explorationSplitViewMarginStart="@{@dimen/margin_20}"
     app:explorationSplitViewMarginTop="@{@dimen/margin_72}"
-    app:explorationSplitViewPaddingApplicable="@{buttonViewModel.hasConversationView &amp;&amp; buttonViewModel.isSplitView}"
-    app:explorationSplitViewPaddingBottom="@{@dimen/padding_0}"
-    app:explorationSplitViewPaddingEnd="@{@dimen/padding_0}"
-    app:explorationSplitViewPaddingStart="@{@dimen/padding_0}"
-    app:explorationSplitViewPaddingTop="@{@dimen/padding_0}"
     app:explorationViewMarginApplicable="@{buttonViewModel.hasConversationView &amp;&amp; !buttonViewModel.isSplitView}"
     app:explorationViewMarginBottom="@{@dimen/margin_0}"
-    app:explorationViewMarginEnd="@{@dimen/margin_112}"
-    app:explorationViewMarginStart="@{@dimen/margin_112}"
-    app:explorationViewMarginTop="@{@dimen/margin_72}"
-    app:explorationViewPaddingApplicable="@{buttonViewModel.hasConversationView &amp;&amp; !buttonViewModel.isSplitView}"
-    app:explorationViewPaddingBottom="@{@dimen/padding_0}"
-    app:explorationViewPaddingEnd="@{@dimen/padding_0}"
-    app:explorationViewPaddingStart="@{@dimen/padding_0}"
-    app:explorationViewPaddingTop="@{@dimen/padding_0}"
+    app:explorationViewMarginEnd="@{@dimen/margin_108}"
+    app:explorationViewMarginStart="@{@dimen/margin_108}"
+    app:explorationViewMarginTop="@{@dimen/margin_24}"
     app:questionSplitViewMarginApplicable="@{!buttonViewModel.hasConversationView &amp;&amp; buttonViewModel.isSplitView}"
     app:questionSplitViewMarginBottom="@{@dimen/margin_0}"
-    app:questionSplitViewMarginEnd="@{@dimen/margin_64}"
-    app:questionSplitViewMarginStart="@{@dimen/margin_0}"
+    app:questionSplitViewMarginEnd="@{@dimen/margin_28}"
+    app:questionSplitViewMarginStart="@{@dimen/margin_20}"
     app:questionSplitViewMarginTop="@{@dimen/margin_72}"
-    app:questionSplitViewPaddingApplicable="@{!buttonViewModel.hasConversationView &amp;&amp; buttonViewModel.isSplitView}"
-    app:questionSplitViewPaddingBottom="@{@dimen/padding_0}"
-    app:questionSplitViewPaddingEnd="@{@dimen/padding_0}"
-    app:questionSplitViewPaddingStart="@{@dimen/padding_0}"
-    app:questionSplitViewPaddingTop="@{@dimen/padding_0}"
     app:questionViewMarginApplicable="@{!buttonViewModel.hasConversationView &amp;&amp; !buttonViewModel.isSplitView}"
     app:questionViewMarginBottom="@{@dimen/margin_0}"
-    app:questionViewMarginEnd="@{@dimen/margin_128}"
-    app:questionViewMarginStart="@{@dimen/margin_128}"
-    app:questionViewMarginTop="@{@dimen/margin_72}"
-    app:questionViewPaddingApplicable="@{!buttonViewModel.hasConversationView &amp;&amp; !buttonViewModel.isSplitView}"
-    app:questionViewPaddingBottom="@{@dimen/padding_0}"
-    app:questionViewPaddingEnd="@{@dimen/padding_0}"
-    app:questionViewPaddingStart="@{@dimen/padding_0}"
-    app:questionViewPaddingTop="@{@dimen/padding_0}">
+    app:questionViewMarginEnd="@{@dimen/margin_124}"
+    app:questionViewMarginStart="@{@dimen/margin_124}"
+    app:questionViewMarginTop="@{@dimen/margin_24}">
 
     <ImageButton
       android:id="@+id/previous_state_navigation_button"
@@ -65,7 +50,7 @@
       android:contentDescription="@string/previous_state_description"
       android:elevation="2dp"
       android:onClick="@{(v) -> buttonViewModel.previousNavigationButtonListener.onPreviousButtonClicked()}"
-      android:padding="16dp"
+      android:padding="8dp"
       android:src="@drawable/ic_arrow_back_oppia_dark_blue_24dp"
       android:visibility="@{buttonViewModel.hasPreviousButton ? View.VISIBLE : View.GONE, default=gone}"
       app:layout_constraintBottom_toBottomOf="parent"
@@ -81,7 +66,7 @@
       android:contentDescription="@string/next_state_description"
       android:elevation="2dp"
       android:onClick="@{(v) -> buttonViewModel.nextNavigationButtonListener.onNextButtonClicked()}"
-      android:padding="16dp"
+      android:padding="8dp"
       android:src="@drawable/ic_arrow_forward_oppia_dark_blue_24dp"
       app:layout_constraintBottom_toBottomOf="parent"
       app:layout_constraintEnd_toEndOf="parent"
diff --git a/app/src/main/res/layout-sw600dp-port/numeric_input_interaction_item.xml b/app/src/main/res/layout-sw600dp-port/numeric_input_interaction_item.xml
index 9ff458effa2..732d5f5fcf2 100644
--- a/app/src/main/res/layout-sw600dp-port/numeric_input_interaction_item.xml
+++ b/app/src/main/res/layout-sw600dp-port/numeric_input_interaction_item.xml
@@ -50,8 +50,6 @@
     <TextView
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
-      android:layout_marginStart="16dp"
-      android:layout_marginEnd="8dp"
       android:fontFamily="sans-serif"
       android:minHeight="32dp"
       android:text="@{viewModel.errorMessage}"
diff --git a/app/src/main/res/layout-sw600dp-port/previous_button_item.xml b/app/src/main/res/layout-sw600dp-port/previous_button_item.xml
index 221bc48e46c..bc9f80632c3 100644
--- a/app/src/main/res/layout-sw600dp-port/previous_button_item.xml
+++ b/app/src/main/res/layout-sw600dp-port/previous_button_item.xml
@@ -10,51 +10,36 @@
       name="buttonViewModel"
       type="org.oppia.app.player.state.itemviewmodel.PreviousButtonViewModel" />
   </data>
-
+  <!-- Margins -->
+  <!-- Exploration Split View: 24, 72, 32, 0 -->
+  <!-- Exploration View: 112, 24, 112, 0 -->
+  <!-- Question Split View: 24, 72, 32, 0 -->
+  <!-- Question View: 128, 24, 128, 0 -->
+  <!-- Note: Start/End margins are 4dp less which is getting adjusted in child views. -->
   <androidx.constraintlayout.widget.ConstraintLayout
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:gravity="center_vertical"
     app:explorationSplitViewMarginApplicable="@{buttonViewModel.hasConversationView &amp;&amp; buttonViewModel.isSplitView}"
     app:explorationSplitViewMarginBottom="@{@dimen/margin_0}"
-    app:explorationSplitViewMarginEnd="@{@dimen/margin_0}"
-    app:explorationSplitViewMarginStart="@{@dimen/margin_48}"
+    app:explorationSplitViewMarginEnd="@{@dimen/margin_28}"
+    app:explorationSplitViewMarginStart="@{@dimen/margin_20}"
     app:explorationSplitViewMarginTop="@{@dimen/margin_72}"
-    app:explorationSplitViewPaddingApplicable="@{buttonViewModel.hasConversationView &amp;&amp; buttonViewModel.isSplitView}"
-    app:explorationSplitViewPaddingBottom="@{@dimen/padding_0}"
-    app:explorationSplitViewPaddingEnd="@{@dimen/padding_0}"
-    app:explorationSplitViewPaddingStart="@{@dimen/padding_0}"
-    app:explorationSplitViewPaddingTop="@{@dimen/padding_0}"
     app:explorationViewMarginApplicable="@{buttonViewModel.hasConversationView &amp;&amp; !buttonViewModel.isSplitView}"
     app:explorationViewMarginBottom="@{@dimen/margin_0}"
-    app:explorationViewMarginEnd="@{@dimen/margin_0}"
-    app:explorationViewMarginStart="@{@dimen/margin_112}"
-    app:explorationViewMarginTop="@{@dimen/margin_72}"
-    app:explorationViewPaddingApplicable="@{buttonViewModel.hasConversationView &amp;&amp; !buttonViewModel.isSplitView}"
-    app:explorationViewPaddingBottom="@{@dimen/padding_0}"
-    app:explorationViewPaddingEnd="@{@dimen/padding_0}"
-    app:explorationViewPaddingStart="@{@dimen/padding_0}"
-    app:explorationViewPaddingTop="@{@dimen/padding_0}"
+    app:explorationViewMarginEnd="@{@dimen/margin_108}"
+    app:explorationViewMarginStart="@{@dimen/margin_108}"
+    app:explorationViewMarginTop="@{@dimen/margin_24}"
     app:questionSplitViewMarginApplicable="@{!buttonViewModel.hasConversationView &amp;&amp; buttonViewModel.isSplitView}"
     app:questionSplitViewMarginBottom="@{@dimen/margin_0}"
-    app:questionSplitViewMarginEnd="@{@dimen/margin_0}"
-    app:questionSplitViewMarginStart="@{@dimen/margin_48}"
+    app:questionSplitViewMarginEnd="@{@dimen/margin_28}"
+    app:questionSplitViewMarginStart="@{@dimen/margin_20}"
     app:questionSplitViewMarginTop="@{@dimen/margin_72}"
-    app:questionSplitViewPaddingApplicable="@{!buttonViewModel.hasConversationView &amp;&amp; buttonViewModel.isSplitView}"
-    app:questionSplitViewPaddingBottom="@{@dimen/padding_0}"
-    app:questionSplitViewPaddingEnd="@{@dimen/padding_0}"
-    app:questionSplitViewPaddingStart="@{@dimen/padding_0}"
-    app:questionSplitViewPaddingTop="@{@dimen/padding_0}"
     app:questionViewMarginApplicable="@{!buttonViewModel.hasConversationView &amp;&amp; !buttonViewModel.isSplitView}"
     app:questionViewMarginBottom="@{@dimen/margin_0}"
-    app:questionViewMarginEnd="@{@dimen/margin_0}"
-    app:questionViewMarginStart="@{@dimen/margin_128}"
-    app:questionViewMarginTop="@{@dimen/margin_72}"
-    app:questionViewPaddingApplicable="@{!buttonViewModel.hasConversationView &amp;&amp; !buttonViewModel.isSplitView}"
-    app:questionViewPaddingBottom="@{@dimen/padding_0}"
-    app:questionViewPaddingEnd="@{@dimen/padding_0}"
-    app:questionViewPaddingStart="@{@dimen/padding_0}"
-    app:questionViewPaddingTop="@{@dimen/padding_0}">
+    app:questionViewMarginEnd="@{@dimen/margin_124}"
+    app:questionViewMarginStart="@{@dimen/margin_124}"
+    app:questionViewMarginTop="@{@dimen/margin_24}">
 
     <ImageButton
       android:id="@+id/previous_state_navigation_button"
@@ -65,7 +50,7 @@
       android:contentDescription="@string/previous_state_description"
       android:elevation="2dp"
       android:onClick="@{(v) -> buttonViewModel.previousNavigationButtonListener.onPreviousButtonClicked()}"
-      android:padding="16dp"
+      android:padding="8dp"
       android:src="@drawable/ic_arrow_back_oppia_dark_blue_24dp"
       app:layout_constraintBottom_toBottomOf="parent"
       app:layout_constraintStart_toStartOf="parent"
diff --git a/app/src/main/res/layout-sw600dp-port/question_player_fragment.xml b/app/src/main/res/layout-sw600dp-port/question_player_fragment.xml
index fcb9a64ceba..1befebaa703 100644
--- a/app/src/main/res/layout-sw600dp-port/question_player_fragment.xml
+++ b/app/src/main/res/layout-sw600dp-port/question_player_fragment.xml
@@ -55,10 +55,12 @@
         android:id="@+id/question_recycler_view"
         android:layout_width="0dp"
         android:layout_height="0dp"
+        android:clipToPadding="false"
         android:divider="@android:color/transparent"
         android:dividerHeight="8dp"
         android:overScrollMode="never"
         android:paddingTop="24dp"
+        android:paddingBottom="112dp"
         app:data="@{viewModel.itemList}"
         app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
         app:layout_constraintBottom_toTopOf="@id/question_progress_bar"
@@ -70,10 +72,12 @@
         android:id="@+id/extra_interaction_recycler_view"
         android:layout_width="0dp"
         android:layout_height="0dp"
+        android:clipToPadding="false"
         android:divider="@android:color/transparent"
         android:dividerHeight="8dp"
         android:overScrollMode="never"
         android:paddingTop="24dp"
+        android:paddingBottom="112dp"
         android:visibility="@{viewModel.isSplitView ? View.VISIBLE : View.GONE}"
         app:data="@{viewModel.rightItemList}"
         app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
diff --git a/app/src/main/res/layout-sw600dp-port/replay_button_item.xml b/app/src/main/res/layout-sw600dp-port/replay_button_item.xml
index ac14d178a9e..13b1be7beb3 100644
--- a/app/src/main/res/layout-sw600dp-port/replay_button_item.xml
+++ b/app/src/main/res/layout-sw600dp-port/replay_button_item.xml
@@ -12,55 +12,21 @@
   <androidx.constraintlayout.widget.ConstraintLayout
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
+    android:layout_marginStart="124dp"
+    android:layout_marginTop="68dp"
+    android:layout_marginEnd="124dp"
+    android:layout_marginBottom="0dp"
     android:gravity="center_vertical"
-    app:explorationSplitViewMarginApplicable="@{buttonViewModel.hasConversationView &amp;&amp; buttonViewModel.isSplitView}"
-    app:explorationSplitViewMarginBottom="@{@dimen/margin_0}"
-    app:explorationSplitViewMarginEnd="@{@dimen/margin_0}"
-    app:explorationSplitViewMarginStart="@{@dimen/margin_0}"
-    app:explorationSplitViewMarginTop="@{@dimen/margin_0}"
-    app:explorationSplitViewPaddingApplicable="@{buttonViewModel.hasConversationView &amp;&amp; buttonViewModel.isSplitView}"
-    app:explorationSplitViewPaddingBottom="@{@dimen/padding_0}"
-    app:explorationSplitViewPaddingEnd="@{@dimen/padding_0}"
-    app:explorationSplitViewPaddingStart="@{@dimen/padding_0}"
-    app:explorationSplitViewPaddingTop="@{@dimen/padding_0}"
-    app:explorationViewMarginApplicable="@{buttonViewModel.hasConversationView &amp;&amp; !buttonViewModel.isSplitView}"
-    app:explorationViewMarginBottom="@{@dimen/margin_0}"
-    app:explorationViewMarginEnd="@{@dimen/margin_128}"
-    app:explorationViewMarginStart="@{@dimen/margin_128}"
-    app:explorationViewMarginTop="@{@dimen/margin_72}"
-    app:explorationViewPaddingApplicable="@{buttonViewModel.hasConversationView &amp;&amp; !buttonViewModel.isSplitView}"
-    app:explorationViewPaddingBottom="@{@dimen/padding_0}"
-    app:explorationViewPaddingEnd="@{@dimen/padding_0}"
-    app:explorationViewPaddingStart="@{@dimen/padding_0}"
-    app:explorationViewPaddingTop="@{@dimen/padding_0}"
-    app:questionSplitViewMarginApplicable="@{!buttonViewModel.hasConversationView &amp;&amp; buttonViewModel.isSplitView}"
-    app:questionSplitViewMarginBottom="@{@dimen/margin_0}"
-    app:questionSplitViewMarginEnd="@{@dimen/margin_0}"
-    app:questionSplitViewMarginStart="@{@dimen/margin_0}"
-    app:questionSplitViewMarginTop="@{@dimen/margin_0}"
-    app:questionSplitViewPaddingApplicable="@{!buttonViewModel.hasConversationView &amp;&amp; buttonViewModel.isSplitView}"
-    app:questionSplitViewPaddingBottom="@{@dimen/padding_0}"
-    app:questionSplitViewPaddingEnd="@{@dimen/padding_0}"
-    app:questionSplitViewPaddingStart="@{@dimen/padding_0}"
-    app:questionSplitViewPaddingTop="@{@dimen/padding_0}"
-    app:questionViewMarginApplicable="@{!buttonViewModel.hasConversationView &amp;&amp; !buttonViewModel.isSplitView}"
-    app:questionViewMarginBottom="@{@dimen/margin_0}"
-    app:questionViewMarginEnd="@{@dimen/margin_128}"
-    app:questionViewMarginStart="@{@dimen/margin_128}"
-    app:questionViewMarginTop="@{@dimen/margin_72}"
-    app:questionViewPaddingApplicable="@{!buttonViewModel.hasConversationView &amp;&amp; !buttonViewModel.isSplitView}"
-    app:questionViewPaddingBottom="@{@dimen/padding_0}"
-    app:questionViewPaddingEnd="@{@dimen/padding_0}"
-    app:questionViewPaddingStart="@{@dimen/padding_0}"
-    app:questionViewPaddingTop="@{@dimen/padding_0}">
+    android:visibility="@{buttonViewModel.hasConversationView ? View.GONE : View.VISIBLE}">
 
     <Button
       android:id="@+id/replay_button"
       style="@style/StateButtonActive"
-      android:layout_height="48dp"
+      android:layout_margin="4dp"
       android:background="@drawable/state_button_orange_background"
       android:drawableStart="@drawable/ic_refresh_white_24dp"
       android:drawablePadding="4dp"
+      android:minHeight="48dp"
       android:onClick="@{(v) -> buttonViewModel.replayButtonListener.onReplayButtonClicked()}"
       android:text="@string/lesson_replay_button_text"
       android:textColor="@color/white"
diff --git a/app/src/main/res/layout-sw600dp-port/return_to_topic_button_item.xml b/app/src/main/res/layout-sw600dp-port/return_to_topic_button_item.xml
index f2c8a0468a2..0fae7e22074 100644
--- a/app/src/main/res/layout-sw600dp-port/return_to_topic_button_item.xml
+++ b/app/src/main/res/layout-sw600dp-port/return_to_topic_button_item.xml
@@ -10,51 +10,36 @@
       name="buttonViewModel"
       type="org.oppia.app.player.state.itemviewmodel.ReturnToTopicButtonViewModel" />
   </data>
-
+  <!-- Margins -->
+  <!-- Exploration Split View: 24, 72, 32, 0 -->
+  <!-- Exploration View: 112, 24, 112, 0 -->
+  <!-- Question Split View: 24, 12, 32, 0 -->
+  <!-- Question View: 128, 12, 128, 0 -->
+  <!-- Note: Start/End margins are 4dp less which is getting adjusted in child views. -->
   <androidx.constraintlayout.widget.ConstraintLayout
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:gravity="center_vertical"
     app:explorationSplitViewMarginApplicable="@{buttonViewModel.hasConversationView &amp;&amp; buttonViewModel.isSplitView}"
     app:explorationSplitViewMarginBottom="@{@dimen/margin_0}"
-    app:explorationSplitViewMarginEnd="@{@dimen/margin_0}"
-    app:explorationSplitViewMarginStart="@{@dimen/margin_0}"
-    app:explorationSplitViewMarginTop="@{@dimen/margin_0}"
-    app:explorationSplitViewPaddingApplicable="@{buttonViewModel.hasConversationView &amp;&amp; buttonViewModel.isSplitView}"
-    app:explorationSplitViewPaddingBottom="@{@dimen/padding_0}"
-    app:explorationSplitViewPaddingEnd="@{@dimen/padding_0}"
-    app:explorationSplitViewPaddingStart="@{@dimen/padding_0}"
-    app:explorationSplitViewPaddingTop="@{@dimen/padding_0}"
+    app:explorationSplitViewMarginEnd="@{@dimen/margin_28}"
+    app:explorationSplitViewMarginStart="@{@dimen/margin_20}"
+    app:explorationSplitViewMarginTop="@{@dimen/margin_72}"
     app:explorationViewMarginApplicable="@{buttonViewModel.hasConversationView &amp;&amp; !buttonViewModel.isSplitView}"
     app:explorationViewMarginBottom="@{@dimen/margin_0}"
-    app:explorationViewMarginEnd="@{@dimen/margin_128}"
-    app:explorationViewMarginStart="@{@dimen/margin_128}"
-    app:explorationViewMarginTop="@{@dimen/margin_72}"
-    app:explorationViewPaddingApplicable="@{buttonViewModel.hasConversationView &amp;&amp; !buttonViewModel.isSplitView}"
-    app:explorationViewPaddingBottom="@{@dimen/padding_0}"
-    app:explorationViewPaddingEnd="@{@dimen/padding_0}"
-    app:explorationViewPaddingStart="@{@dimen/padding_0}"
-    app:explorationViewPaddingTop="@{@dimen/padding_0}"
+    app:explorationViewMarginEnd="@{@dimen/margin_108}"
+    app:explorationViewMarginStart="@{@dimen/margin_108}"
+    app:explorationViewMarginTop="@{@dimen/margin_24}"
     app:questionSplitViewMarginApplicable="@{!buttonViewModel.hasConversationView &amp;&amp; buttonViewModel.isSplitView}"
     app:questionSplitViewMarginBottom="@{@dimen/margin_0}"
-    app:questionSplitViewMarginEnd="@{@dimen/margin_0}"
-    app:questionSplitViewMarginStart="@{@dimen/margin_0}"
-    app:questionSplitViewMarginTop="@{@dimen/margin_0}"
-    app:questionSplitViewPaddingApplicable="@{!buttonViewModel.hasConversationView &amp;&amp; buttonViewModel.isSplitView}"
-    app:questionSplitViewPaddingBottom="@{@dimen/padding_0}"
-    app:questionSplitViewPaddingEnd="@{@dimen/padding_0}"
-    app:questionSplitViewPaddingStart="@{@dimen/padding_0}"
-    app:questionSplitViewPaddingTop="@{@dimen/padding_0}"
+    app:questionSplitViewMarginEnd="@{@dimen/margin_28}"
+    app:questionSplitViewMarginStart="@{@dimen/margin_20}"
+    app:questionSplitViewMarginTop="@{@dimen/margin_8}"
     app:questionViewMarginApplicable="@{!buttonViewModel.hasConversationView &amp;&amp; !buttonViewModel.isSplitView}"
     app:questionViewMarginBottom="@{@dimen/margin_0}"
-    app:questionViewMarginEnd="@{@dimen/margin_128}"
-    app:questionViewMarginStart="@{@dimen/margin_128}"
-    app:questionViewMarginTop="@{@dimen/margin_12}"
-    app:questionViewPaddingApplicable="@{!buttonViewModel.hasConversationView &amp;&amp; !buttonViewModel.isSplitView}"
-    app:questionViewPaddingBottom="@{@dimen/padding_0}"
-    app:questionViewPaddingEnd="@{@dimen/padding_0}"
-    app:questionViewPaddingStart="@{@dimen/padding_0}"
-    app:questionViewPaddingTop="@{@dimen/padding_0}">
+    app:questionViewMarginEnd="@{@dimen/margin_124}"
+    app:questionViewMarginStart="@{@dimen/margin_124}"
+    app:questionViewMarginTop="@{@dimen/margin_8}">
 
     <ImageButton
       android:id="@+id/previous_state_navigation_button"
@@ -65,7 +50,7 @@
       android:contentDescription="@string/previous_state_description"
       android:elevation="2dp"
       android:onClick="@{(v) -> buttonViewModel.previousNavigationButtonListener.onPreviousButtonClicked()}"
-      android:padding="16dp"
+      android:padding="8dp"
       android:src="@drawable/ic_arrow_back_oppia_dark_blue_24dp"
       android:visibility="@{buttonViewModel.hasPreviousButton ? View.VISIBLE: View.GONE, default=gone}"
       app:layout_constraintBottom_toBottomOf="parent"
@@ -76,6 +61,7 @@
       android:id="@+id/return_to_topic_button"
       style="@style/StateButtonActive"
       android:layout_height="0dp"
+      android:layout_margin="4dp"
       android:button="@drawable/state_button_primary_background"
       android:onClick="@{(v) -> buttonViewModel.returnToTopicNavigationButtonListener.onReturnToTopicButtonClicked()}"
       android:text="@string/state_end_exploration_button"
diff --git a/app/src/main/res/layout-sw600dp-port/submit_button_item.xml b/app/src/main/res/layout-sw600dp-port/submit_button_item.xml
index affe9f17466..7b8c8666e49 100644
--- a/app/src/main/res/layout-sw600dp-port/submit_button_item.xml
+++ b/app/src/main/res/layout-sw600dp-port/submit_button_item.xml
@@ -10,51 +10,36 @@
       name="buttonViewModel"
       type="org.oppia.app.player.state.itemviewmodel.SubmitButtonViewModel" />
   </data>
-
+  <!-- Margins -->
+  <!-- Exploration Split View: 24, 72, 32, 0 -->
+  <!-- Exploration View: 112, 24, 112, 0 -->
+  <!-- Question Split View: 24, 72, 32, 0 -->
+  <!-- Question View: 128, 24, 128, 0 -->
+  <!-- Note: Start/End margins are 4dp less which is getting adjusted in child views. -->
   <androidx.constraintlayout.widget.ConstraintLayout
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:gravity="center_vertical"
     app:explorationSplitViewMarginApplicable="@{buttonViewModel.hasConversationView &amp;&amp; buttonViewModel.isSplitView}"
     app:explorationSplitViewMarginBottom="@{@dimen/margin_0}"
-    app:explorationSplitViewMarginEnd="@{@dimen/margin_64}"
-    app:explorationSplitViewMarginStart="@{@dimen/margin_0}"
+    app:explorationSplitViewMarginEnd="@{@dimen/margin_28}"
+    app:explorationSplitViewMarginStart="@{@dimen/margin_20}"
     app:explorationSplitViewMarginTop="@{@dimen/margin_72}"
-    app:explorationSplitViewPaddingApplicable="@{buttonViewModel.hasConversationView &amp;&amp; buttonViewModel.isSplitView}"
-    app:explorationSplitViewPaddingBottom="@{@dimen/padding_0}"
-    app:explorationSplitViewPaddingEnd="@{@dimen/padding_0}"
-    app:explorationSplitViewPaddingStart="@{@dimen/padding_0}"
-    app:explorationSplitViewPaddingTop="@{@dimen/padding_0}"
     app:explorationViewMarginApplicable="@{buttonViewModel.hasConversationView &amp;&amp; !buttonViewModel.isSplitView}"
     app:explorationViewMarginBottom="@{@dimen/margin_0}"
-    app:explorationViewMarginEnd="@{@dimen/margin_112}"
-    app:explorationViewMarginStart="@{@dimen/margin_112}"
-    app:explorationViewMarginTop="@{@dimen/margin_72}"
-    app:explorationViewPaddingApplicable="@{buttonViewModel.hasConversationView &amp;&amp; !buttonViewModel.isSplitView}"
-    app:explorationViewPaddingBottom="@{@dimen/padding_0}"
-    app:explorationViewPaddingEnd="@{@dimen/padding_0}"
-    app:explorationViewPaddingStart="@{@dimen/padding_0}"
-    app:explorationViewPaddingTop="@{@dimen/padding_0}"
+    app:explorationViewMarginEnd="@{@dimen/margin_108}"
+    app:explorationViewMarginStart="@{@dimen/margin_108}"
+    app:explorationViewMarginTop="@{@dimen/margin_24}"
     app:questionSplitViewMarginApplicable="@{!buttonViewModel.hasConversationView &amp;&amp; buttonViewModel.isSplitView}"
     app:questionSplitViewMarginBottom="@{@dimen/margin_0}"
-    app:questionSplitViewMarginEnd="@{@dimen/margin_64}"
-    app:questionSplitViewMarginStart="@{@dimen/margin_0}"
+    app:questionSplitViewMarginEnd="@{@dimen/margin_28}"
+    app:questionSplitViewMarginStart="@{@dimen/margin_20}"
     app:questionSplitViewMarginTop="@{@dimen/margin_72}"
-    app:questionSplitViewPaddingApplicable="@{!buttonViewModel.hasConversationView &amp;&amp; buttonViewModel.isSplitView}"
-    app:questionSplitViewPaddingBottom="@{@dimen/padding_0}"
-    app:questionSplitViewPaddingEnd="@{@dimen/padding_0}"
-    app:questionSplitViewPaddingStart="@{@dimen/padding_0}"
-    app:questionSplitViewPaddingTop="@{@dimen/padding_0}"
     app:questionViewMarginApplicable="@{!buttonViewModel.hasConversationView &amp;&amp; !buttonViewModel.isSplitView}"
     app:questionViewMarginBottom="@{@dimen/margin_0}"
-    app:questionViewMarginEnd="@{@dimen/margin_128}"
-    app:questionViewMarginStart="@{@dimen/margin_128}"
-    app:questionViewMarginTop="@{@dimen/margin_72}"
-    app:questionViewPaddingApplicable="@{!buttonViewModel.hasConversationView &amp;&amp; !buttonViewModel.isSplitView}"
-    app:questionViewPaddingBottom="@{@dimen/padding_0}"
-    app:questionViewPaddingEnd="@{@dimen/padding_0}"
-    app:questionViewPaddingStart="@{@dimen/padding_0}"
-    app:questionViewPaddingTop="@{@dimen/padding_0}">
+    app:questionViewMarginEnd="@{@dimen/margin_124}"
+    app:questionViewMarginStart="@{@dimen/margin_124}"
+    app:questionViewMarginTop="@{@dimen/margin_24}">
 
     <ImageButton
       android:id="@+id/previous_state_navigation_button"
@@ -65,7 +50,7 @@
       android:contentDescription="@string/previous_state_description"
       android:elevation="2dp"
       android:onClick="@{(v) -> buttonViewModel.previousNavigationButtonListener.onPreviousButtonClicked()}"
-      android:padding="16dp"
+      android:padding="8dp"
       android:src="@drawable/ic_arrow_back_oppia_dark_blue_24dp"
       android:visibility="@{buttonViewModel.hasPreviousButton ? View.VISIBLE: View.GONE, default=gone}"
       app:layout_constraintBottom_toBottomOf="parent"
@@ -77,9 +62,10 @@
       style="@style/StateButtonActive"
       android:layout_height="0dp"
       android:layout_alignParentEnd="true"
+      android:layout_margin="4dp"
+      android:background="@{buttonViewModel.canSubmitAnswer ? @drawable/state_button_primary_background : @drawable/state_button_inactive_background}"
       android:button="@drawable/state_button_primary_background"
       android:clickable="@{buttonViewModel.canSubmitAnswer}"
-      android:background="@{buttonViewModel.canSubmitAnswer ? @drawable/state_button_primary_background : @drawable/state_button_inactive_background}"
       android:onClick="@{(v) -> buttonViewModel.submitNavigationButtonListener.onSubmitButtonClicked()}"
       android:text="@string/state_submit_button"
       android:textColor="@color/white"
diff --git a/app/src/main/res/layout/continue_interaction_item.xml b/app/src/main/res/layout/continue_interaction_item.xml
index caa3e935460..0cae3f25023 100644
--- a/app/src/main/res/layout/continue_interaction_item.xml
+++ b/app/src/main/res/layout/continue_interaction_item.xml
@@ -10,50 +10,33 @@
       name="viewModel"
       type="org.oppia.app.player.state.itemviewmodel.ContinueInteractionViewModel" />
   </data>
-
+  <!-- Margins -->
+  <!-- Exploration Split View: 24, 72, 32, 0 -->
+  <!-- Exploration View: 24, 24, 24, 0 -->
+  <!-- Question Split View: 32, 72, 32, 0 -->
+  <!-- Question View: 32, 24, 32, 0 -->
+  <!-- Note: Start/End margins are 4dp less which is getting adjusted in child views. -->
   <androidx.constraintlayout.widget.ConstraintLayout
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
-    app:explorationSplitViewMarginApplicable="@{viewModel.hasConversationView &amp;&amp; viewModel.isSplitView}"
-    app:explorationSplitViewMarginBottom="@{@dimen/margin_0}"
-    app:explorationSplitViewMarginEnd="@{@dimen/margin_64}"
-    app:explorationSplitViewMarginStart="@{@dimen/margin_0}"
+    app:explorationSplitViewMarginEnd="@{@dimen/margin_28}"
+    app:explorationSplitViewMarginStart="@{@dimen/margin_20}"
     app:explorationSplitViewMarginTop="@{@dimen/margin_72}"
-    app:explorationSplitViewPaddingApplicable="@{viewModel.hasConversationView &amp;&amp; viewModel.isSplitView}"
-    app:explorationSplitViewPaddingBottom="@{@dimen/padding_0}"
-    app:explorationSplitViewPaddingEnd="@{@dimen/padding_0}"
-    app:explorationSplitViewPaddingStart="@{@dimen/padding_0}"
-    app:explorationSplitViewPaddingTop="@{@dimen/padding_0}"
     app:explorationViewMarginApplicable="@{viewModel.hasConversationView &amp;&amp; !viewModel.isSplitView}"
     app:explorationViewMarginBottom="@{@dimen/margin_0}"
-    app:explorationViewMarginEnd="@{@dimen/margin_24}"
-    app:explorationViewMarginStart="@{@dimen/margin_24}"
-    app:explorationViewMarginTop="@{@dimen/margin_16}"
-    app:explorationViewPaddingApplicable="@{viewModel.hasConversationView &amp;&amp; !viewModel.isSplitView}"
-    app:explorationViewPaddingBottom="@{@dimen/padding_16}"
-    app:explorationViewPaddingEnd="@{@dimen/padding_16}"
-    app:explorationViewPaddingStart="@{@dimen/padding_16}"
-    app:explorationViewPaddingTop="@{@dimen/padding_16}"
+    app:explorationViewMarginEnd="@{@dimen/margin_20}"
+    app:explorationViewMarginStart="@{@dimen/margin_20}"
+    app:explorationViewMarginTop="@{@dimen/margin_24}"
     app:questionSplitViewMarginApplicable="@{!viewModel.hasConversationView &amp;&amp; viewModel.isSplitView}"
     app:questionSplitViewMarginBottom="@{@dimen/margin_0}"
-    app:questionSplitViewMarginEnd="@{@dimen/margin_64}"
-    app:questionSplitViewMarginStart="@{@dimen/margin_0}"
+    app:questionSplitViewMarginEnd="@{@dimen/margin_28}"
+    app:questionSplitViewMarginStart="@{@dimen/margin_28}"
     app:questionSplitViewMarginTop="@{@dimen/margin_72}"
-    app:questionSplitViewPaddingApplicable="@{!viewModel.hasConversationView &amp;&amp; viewModel.isSplitView}"
-    app:questionSplitViewPaddingBottom="@{@dimen/padding_0}"
-    app:questionSplitViewPaddingEnd="@{@dimen/padding_0}"
-    app:questionSplitViewPaddingStart="@{@dimen/padding_0}"
-    app:questionSplitViewPaddingTop="@{@dimen/padding_0}"
     app:questionViewMarginApplicable="@{!viewModel.hasConversationView &amp;&amp; !viewModel.isSplitView}"
     app:questionViewMarginBottom="@{@dimen/margin_0}"
-    app:questionViewMarginEnd="@{@dimen/margin_24}"
-    app:questionViewMarginStart="@{@dimen/margin_24}"
-    app:questionViewMarginTop="@{@dimen/margin_16}"
-    app:questionViewPaddingApplicable="@{!viewModel.hasConversationView &amp;&amp; !viewModel.isSplitView}"
-    app:questionViewPaddingBottom="@{@dimen/padding_16}"
-    app:questionViewPaddingEnd="@{@dimen/padding_16}"
-    app:questionViewPaddingStart="@{@dimen/padding_16}"
-    app:questionViewPaddingTop="@{@dimen/padding_16}">
+    app:questionViewMarginEnd="@{@dimen/margin_28}"
+    app:questionViewMarginStart="@{@dimen/margin_28}"
+    app:questionViewMarginTop="@{@dimen/margin_24}">
 
     <ImageButton
       android:id="@+id/previous_state_navigation_button"
@@ -65,7 +48,7 @@
       android:contentDescription="@string/previous_state_description"
       android:elevation="2dp"
       android:onClick="@{(v) -> viewModel.previousNavigationButtonListener.onPreviousButtonClicked()}"
-      android:padding="16dp"
+      android:padding="8dp"
       android:src="@drawable/ic_arrow_back_oppia_dark_blue_24dp"
       android:visibility="@{viewModel.hasPreviousButton ? View.VISIBLE: View.GONE, default=gone}"
       app:layout_constraintBottom_toBottomOf="parent"
@@ -76,6 +59,7 @@
       android:id="@+id/continue_button"
       style="@style/StateButtonActive"
       android:layout_height="0dp"
+      android:layout_margin="4dp"
       android:button="@drawable/state_button_primary_background"
       android:clickable="true"
       android:elevation="2dp"
diff --git a/app/src/main/res/layout/continue_navigation_button_item.xml b/app/src/main/res/layout/continue_navigation_button_item.xml
index 70945f87b6b..7b531274f97 100644
--- a/app/src/main/res/layout/continue_navigation_button_item.xml
+++ b/app/src/main/res/layout/continue_navigation_button_item.xml
@@ -10,79 +10,64 @@
       name="buttonViewModel"
       type="org.oppia.app.player.state.itemviewmodel.ContinueNavigationButtonViewModel" />
   </data>
-
+  <!-- Margins -->
+  <!-- Exploration Split View: 24, 72, 32, 0 -->
+  <!-- Exploration View: 24, 24, 24, 0 -->
+  <!-- Question Split View: 32, 72, 32, 0 -->
+  <!-- Question View: 32, 24, 32, 0 -->
+  <!-- Note: Start/End margins are 4dp less which is getting adjusted in child views. -->
   <androidx.constraintlayout.widget.ConstraintLayout
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     app:explorationSplitViewMarginApplicable="@{buttonViewModel.hasConversationView &amp;&amp; buttonViewModel.isSplitView}"
     app:explorationSplitViewMarginBottom="@{@dimen/margin_0}"
-    app:explorationSplitViewMarginEnd="@{@dimen/margin_64}"
-    app:explorationSplitViewMarginStart="@{@dimen/margin_0}"
+    app:explorationSplitViewMarginEnd="@{@dimen/margin_28}"
+    app:explorationSplitViewMarginStart="@{@dimen/margin_20}"
     app:explorationSplitViewMarginTop="@{@dimen/margin_72}"
-    app:explorationSplitViewPaddingApplicable="@{buttonViewModel.hasConversationView &amp;&amp; buttonViewModel.isSplitView}"
-    app:explorationSplitViewPaddingBottom="@{@dimen/padding_0}"
-    app:explorationSplitViewPaddingEnd="@{@dimen/padding_0}"
-    app:explorationSplitViewPaddingStart="@{@dimen/padding_0}"
-    app:explorationSplitViewPaddingTop="@{@dimen/padding_0}"
     app:explorationViewMarginApplicable="@{buttonViewModel.hasConversationView &amp;&amp; !buttonViewModel.isSplitView}"
     app:explorationViewMarginBottom="@{@dimen/margin_0}"
-    app:explorationViewMarginEnd="@{@dimen/margin_24}"
-    app:explorationViewMarginStart="@{@dimen/margin_24}"
-    app:explorationViewMarginTop="@{@dimen/margin_16}"
-    app:explorationViewPaddingApplicable="@{buttonViewModel.hasConversationView &amp;&amp; !buttonViewModel.isSplitView}"
-    app:explorationViewPaddingBottom="@{@dimen/padding_16}"
-    app:explorationViewPaddingEnd="@{@dimen/padding_16}"
-    app:explorationViewPaddingStart="@{@dimen/padding_16}"
-    app:explorationViewPaddingTop="@{@dimen/padding_16}"
+    app:explorationViewMarginEnd="@{@dimen/margin_20}"
+    app:explorationViewMarginStart="@{@dimen/margin_20}"
+    app:explorationViewMarginTop="@{@dimen/margin_24}"
     app:questionSplitViewMarginApplicable="@{!buttonViewModel.hasConversationView &amp;&amp; buttonViewModel.isSplitView}"
     app:questionSplitViewMarginBottom="@{@dimen/margin_0}"
-    app:questionSplitViewMarginEnd="@{@dimen/margin_64}"
-    app:questionSplitViewMarginStart="@{@dimen/margin_0}"
+    app:questionSplitViewMarginEnd="@{@dimen/margin_28}"
+    app:questionSplitViewMarginStart="@{@dimen/margin_28}"
     app:questionSplitViewMarginTop="@{@dimen/margin_72}"
-    app:questionSplitViewPaddingApplicable="@{!buttonViewModel.hasConversationView &amp;&amp; buttonViewModel.isSplitView}"
-    app:questionSplitViewPaddingBottom="@{@dimen/padding_0}"
-    app:questionSplitViewPaddingEnd="@{@dimen/padding_0}"
-    app:questionSplitViewPaddingStart="@{@dimen/padding_0}"
-    app:questionSplitViewPaddingTop="@{@dimen/padding_0}"
     app:questionViewMarginApplicable="@{!buttonViewModel.hasConversationView &amp;&amp; !buttonViewModel.isSplitView}"
     app:questionViewMarginBottom="@{@dimen/margin_0}"
-    app:questionViewMarginEnd="@{@dimen/margin_24}"
-    app:questionViewMarginStart="@{@dimen/margin_24}"
-    app:questionViewMarginTop="@{@dimen/margin_16}"
-    app:questionViewPaddingApplicable="@{!buttonViewModel.hasConversationView &amp;&amp; !buttonViewModel.isSplitView}"
-    app:questionViewPaddingBottom="@{@dimen/padding_16}"
-    app:questionViewPaddingEnd="@{@dimen/padding_16}"
-    app:questionViewPaddingStart="@{@dimen/padding_16}"
-    app:questionViewPaddingTop="@{@dimen/padding_16}">
+    app:questionViewMarginEnd="@{@dimen/margin_28}"
+    app:questionViewMarginStart="@{@dimen/margin_28}"
+    app:questionViewMarginTop="@{@dimen/margin_24}">
 
     <ImageButton
       android:id="@+id/previous_state_navigation_button"
       android:layout_width="48dp"
       android:layout_height="48dp"
-      android:layout_margin="4dp"
       android:background="@drawable/previous_next_state_image_view_background"
       android:contentDescription="@string/previous_state_description"
       android:elevation="2dp"
+      android:layout_margin="4dp"
       android:onClick="@{(v) -> buttonViewModel.previousNavigationButtonListener.onPreviousButtonClicked()}"
-      android:padding="16dp"
+      android:padding="8dp"
       android:src="@drawable/ic_arrow_back_oppia_dark_blue_24dp"
-      app:layout_constraintTop_toTopOf="parent"
+      android:visibility="@{buttonViewModel.hasPreviousButton ? View.VISIBLE: View.GONE, default=gone}"
       app:layout_constraintBottom_toBottomOf="parent"
       app:layout_constraintStart_toStartOf="parent"
-      android:visibility="@{buttonViewModel.hasPreviousButton ? View.VISIBLE: View.GONE, default=gone}" />
+      app:layout_constraintTop_toTopOf="parent" />
 
     <Button
       android:id="@+id/continue_navigation_button"
       style="@style/StateButtonActive"
       android:layout_height="0dp"
-      app:layoutMargin="@{buttonViewModel.isSplitView ? @dimen/margin_0 : @dimen/margin_4}"
       android:button="@drawable/state_button_primary_background"
       android:onClick="@{(v) -> buttonViewModel.continueNavigationButtonListener.onContinueButtonClicked()}"
       android:text="@string/state_continue_button"
       android:textColor="@color/white"
-      app:layout_constraintHeight_min="48dp"
-      app:layout_constraintTop_toTopOf="parent"
+      android:layout_margin="4dp"
       app:layout_constraintBottom_toBottomOf="parent"
-      app:layout_constraintEnd_toEndOf="parent" />
+      app:layout_constraintEnd_toEndOf="parent"
+      app:layout_constraintHeight_min="48dp"
+      app:layout_constraintTop_toTopOf="parent" />
   </androidx.constraintlayout.widget.ConstraintLayout>
 </layout>
diff --git a/app/src/main/res/layout/drag_drop_interaction_item.xml b/app/src/main/res/layout/drag_drop_interaction_item.xml
index da7abf87cdc..93e459942a5 100644
--- a/app/src/main/res/layout/drag_drop_interaction_item.xml
+++ b/app/src/main/res/layout/drag_drop_interaction_item.xml
@@ -23,7 +23,10 @@
     android:descendantFocusability="beforeDescendants"
     android:focusableInTouchMode="true"
     android:orientation="vertical"
-    android:padding="0dp"
+    android:paddingStart="8dp"
+    android:paddingTop="16dp"
+    android:paddingEnd="8dp"
+    android:paddingBottom="20dp"
     app:explorationSplitViewMarginApplicable="@{viewModel.hasConversationView &amp;&amp; viewModel.splitView}"
     app:explorationSplitViewMarginBottom="@{@dimen/margin_0}"
     app:explorationSplitViewMarginEnd="@{@dimen/margin_40}"
@@ -49,12 +52,13 @@
       android:id="@+id/drag_drop_grouping_hint_text_view"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
+      android:layout_marginStart="16dp"
+      android:layout_marginEnd="16dp"
+      android:layout_marginBottom="8dp"
       android:text="@string/drag_and_drop_interaction_group_merge_hint"
       android:textSize="14sp"
       android:textStyle="italic"
-      android:visibility="@{viewModel.getGroupingStatus()? View.VISIBLE : View.GONE}"
-      app:layoutMarginStart="@{viewModel.isSplitView ? @dimen/margin_16 : @dimen/margin_12}"
-      app:layoutMarginTop="@{viewModel.isSplitView ? @dimen/margin_16 : @dimen/margin_8}" />
+      android:visibility="@{viewModel.getGroupingStatus()? View.VISIBLE : View.GONE}" />
 
     <org.oppia.app.player.state.DragDropSortInteractionView
       android:id="@+id/drag_drop_interaction_recycler_view"
diff --git a/app/src/main/res/layout/fraction_interaction_item.xml b/app/src/main/res/layout/fraction_interaction_item.xml
index 64e26356de4..f57b3056a91 100644
--- a/app/src/main/res/layout/fraction_interaction_item.xml
+++ b/app/src/main/res/layout/fraction_interaction_item.xml
@@ -51,8 +51,6 @@
       android:id="@+id/fraction_input_error"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
-      android:layout_marginStart="16dp"
-      android:layout_marginEnd="8dp"
       android:fontFamily="sans-serif"
       android:minHeight="32dp"
       android:text="@{viewModel.errorMessage}"
diff --git a/app/src/main/res/layout/next_button_item.xml b/app/src/main/res/layout/next_button_item.xml
index ed881f60537..196140b8b98 100644
--- a/app/src/main/res/layout/next_button_item.xml
+++ b/app/src/main/res/layout/next_button_item.xml
@@ -10,51 +10,36 @@
       name="buttonViewModel"
       type="org.oppia.app.player.state.itemviewmodel.NextButtonViewModel" />
   </data>
-
+  <!-- Margins -->
+  <!-- Exploration Split View: 24, 72, 32, 0 -->
+  <!-- Exploration View: 24, 24, 24, 0 -->
+  <!-- Question Split View: 32, 72, 32, 0 -->
+  <!-- Question View: 32, 24, 32, 0 -->
+  <!-- Note: Start/End margins are 4dp less which is getting adjusted in child views. -->
   <androidx.constraintlayout.widget.ConstraintLayout
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:gravity="center_vertical"
     app:explorationSplitViewMarginApplicable="@{buttonViewModel.hasConversationView &amp;&amp; buttonViewModel.isSplitView}"
     app:explorationSplitViewMarginBottom="@{@dimen/margin_0}"
-    app:explorationSplitViewMarginEnd="@{@dimen/margin_64}"
-    app:explorationSplitViewMarginStart="@{@dimen/margin_0}"
+    app:explorationSplitViewMarginEnd="@{@dimen/margin_28}"
+    app:explorationSplitViewMarginStart="@{@dimen/margin_20}"
     app:explorationSplitViewMarginTop="@{@dimen/margin_72}"
-    app:explorationSplitViewPaddingApplicable="@{buttonViewModel.hasConversationView &amp;&amp; buttonViewModel.isSplitView}"
-    app:explorationSplitViewPaddingBottom="@{@dimen/padding_0}"
-    app:explorationSplitViewPaddingEnd="@{@dimen/padding_0}"
-    app:explorationSplitViewPaddingStart="@{@dimen/padding_0}"
-    app:explorationSplitViewPaddingTop="@{@dimen/padding_0}"
     app:explorationViewMarginApplicable="@{buttonViewModel.hasConversationView &amp;&amp; !buttonViewModel.isSplitView}"
-    app:explorationViewMarginBottom="@{@dimen/margin_8}"
-    app:explorationViewMarginEnd="@{@dimen/margin_0}"
-    app:explorationViewMarginStart="@{@dimen/margin_0}"
-    app:explorationViewMarginTop="@{@dimen/margin_56}"
-    app:explorationViewPaddingApplicable="@{buttonViewModel.hasConversationView &amp;&amp; !buttonViewModel.isSplitView}"
-    app:explorationViewPaddingBottom="@{@dimen/padding_28}"
-    app:explorationViewPaddingEnd="@{@dimen/padding_24}"
-    app:explorationViewPaddingStart="@{@dimen/padding_24}"
-    app:explorationViewPaddingTop="@{@dimen/padding_0}"
+    app:explorationViewMarginBottom="@{@dimen/margin_0}"
+    app:explorationViewMarginEnd="@{@dimen/margin_20}"
+    app:explorationViewMarginStart="@{@dimen/margin_20}"
+    app:explorationViewMarginTop="@{@dimen/margin_24}"
     app:questionSplitViewMarginApplicable="@{!buttonViewModel.hasConversationView &amp;&amp; buttonViewModel.isSplitView}"
     app:questionSplitViewMarginBottom="@{@dimen/margin_0}"
-    app:questionSplitViewMarginEnd="@{@dimen/margin_64}"
-    app:questionSplitViewMarginStart="@{@dimen/margin_0}"
+    app:questionSplitViewMarginEnd="@{@dimen/margin_28}"
+    app:questionSplitViewMarginStart="@{@dimen/margin_28}"
     app:questionSplitViewMarginTop="@{@dimen/margin_72}"
-    app:questionSplitViewPaddingApplicable="@{!buttonViewModel.hasConversationView &amp;&amp; buttonViewModel.isSplitView}"
-    app:questionSplitViewPaddingBottom="@{@dimen/padding_0}"
-    app:questionSplitViewPaddingEnd="@{@dimen/padding_0}"
-    app:questionSplitViewPaddingStart="@{@dimen/padding_0}"
-    app:questionSplitViewPaddingTop="@{@dimen/padding_0}"
     app:questionViewMarginApplicable="@{!buttonViewModel.hasConversationView &amp;&amp; !buttonViewModel.isSplitView}"
-    app:questionViewMarginBottom="@{@dimen/margin_8}"
-    app:questionViewMarginEnd="@{@dimen/margin_0}"
-    app:questionViewMarginStart="@{@dimen/margin_0}"
-    app:questionViewMarginTop="@{@dimen/margin_56}"
-    app:questionViewPaddingApplicable="@{!buttonViewModel.hasConversationView &amp;&amp; !buttonViewModel.isSplitView}"
-    app:questionViewPaddingBottom="@{@dimen/padding_28}"
-    app:questionViewPaddingEnd="@{@dimen/padding_24}"
-    app:questionViewPaddingStart="@{@dimen/padding_24}"
-    app:questionViewPaddingTop="@{@dimen/padding_0}">
+    app:questionViewMarginBottom="@{@dimen/margin_0}"
+    app:questionViewMarginEnd="@{@dimen/margin_28}"
+    app:questionViewMarginStart="@{@dimen/margin_28}"
+    app:questionViewMarginTop="@{@dimen/margin_24}">
 
     <ImageButton
       android:id="@+id/previous_state_navigation_button"
@@ -65,7 +50,7 @@
       android:contentDescription="@string/previous_state_description"
       android:elevation="2dp"
       android:onClick="@{(v) -> buttonViewModel.previousNavigationButtonListener.onPreviousButtonClicked()}"
-      android:padding="16dp"
+      android:padding="8dp"
       android:src="@drawable/ic_arrow_back_oppia_dark_blue_24dp"
       android:visibility="@{buttonViewModel.hasPreviousButton ? View.VISIBLE : View.GONE, default=gone}"
       app:layout_constraintBottom_toBottomOf="parent"
@@ -81,7 +66,7 @@
       android:contentDescription="@string/next_state_description"
       android:elevation="2dp"
       android:onClick="@{(v) -> buttonViewModel.nextNavigationButtonListener.onNextButtonClicked()}"
-      android:padding="16dp"
+      android:padding="8dp"
       android:src="@drawable/ic_arrow_forward_oppia_dark_blue_24dp"
       app:layout_constraintBottom_toBottomOf="parent"
       app:layout_constraintEnd_toEndOf="parent"
diff --git a/app/src/main/res/layout/numeric_input_interaction_item.xml b/app/src/main/res/layout/numeric_input_interaction_item.xml
index bff09f1017d..de1c3664765 100644
--- a/app/src/main/res/layout/numeric_input_interaction_item.xml
+++ b/app/src/main/res/layout/numeric_input_interaction_item.xml
@@ -50,8 +50,6 @@
     <TextView
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
-      android:layout_marginStart="16dp"
-      android:layout_marginEnd="8dp"
       android:fontFamily="sans-serif"
       android:minHeight="32dp"
       android:text="@{viewModel.errorMessage}"
diff --git a/app/src/main/res/layout/previous_button_item.xml b/app/src/main/res/layout/previous_button_item.xml
index 4669cc07986..b89f3bb1ea6 100644
--- a/app/src/main/res/layout/previous_button_item.xml
+++ b/app/src/main/res/layout/previous_button_item.xml
@@ -10,51 +10,36 @@
       name="buttonViewModel"
       type="org.oppia.app.player.state.itemviewmodel.PreviousButtonViewModel" />
   </data>
-
+  <!-- Margins -->
+  <!-- Exploration Split View: 24, 72, 32, 0 -->
+  <!-- Exploration View: 24, 24, 24, 0 -->
+  <!-- Question Split View: 32, 72, 32, 0 -->
+  <!-- Question View: 32, 24, 32, 0 -->
+  <!-- Note: Start/End margins are 4dp less which is getting adjusted in child views. -->
   <androidx.constraintlayout.widget.ConstraintLayout
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:gravity="center_vertical"
     app:explorationSplitViewMarginApplicable="@{buttonViewModel.hasConversationView &amp;&amp; buttonViewModel.isSplitView}"
     app:explorationSplitViewMarginBottom="@{@dimen/margin_0}"
-    app:explorationSplitViewMarginEnd="@{@dimen/margin_0}"
-    app:explorationSplitViewMarginStart="@{@dimen/margin_48}"
+    app:explorationSplitViewMarginEnd="@{@dimen/margin_28}"
+    app:explorationSplitViewMarginStart="@{@dimen/margin_20}"
     app:explorationSplitViewMarginTop="@{@dimen/margin_72}"
-    app:explorationSplitViewPaddingApplicable="@{buttonViewModel.hasConversationView &amp;&amp; buttonViewModel.isSplitView}"
-    app:explorationSplitViewPaddingBottom="@{@dimen/padding_0}"
-    app:explorationSplitViewPaddingEnd="@{@dimen/padding_0}"
-    app:explorationSplitViewPaddingStart="@{@dimen/padding_0}"
-    app:explorationSplitViewPaddingTop="@{@dimen/padding_0}"
     app:explorationViewMarginApplicable="@{buttonViewModel.hasConversationView &amp;&amp; !buttonViewModel.isSplitView}"
-    app:explorationViewMarginBottom="@{@dimen/margin_8}"
-    app:explorationViewMarginEnd="@{@dimen/margin_0}"
-    app:explorationViewMarginStart="@{@dimen/margin_0}"
-    app:explorationViewMarginTop="@{@dimen/margin_56}"
-    app:explorationViewPaddingApplicable="@{buttonViewModel.hasConversationView &amp;&amp; !buttonViewModel.isSplitView}"
-    app:explorationViewPaddingBottom="@{@dimen/padding_28}"
-    app:explorationViewPaddingEnd="@{@dimen/padding_24}"
-    app:explorationViewPaddingStart="@{@dimen/padding_24}"
-    app:explorationViewPaddingTop="@{@dimen/padding_0}"
+    app:explorationViewMarginBottom="@{@dimen/margin_0}"
+    app:explorationViewMarginEnd="@{@dimen/margin_20}"
+    app:explorationViewMarginStart="@{@dimen/margin_20}"
+    app:explorationViewMarginTop="@{@dimen/margin_24}"
     app:questionSplitViewMarginApplicable="@{!buttonViewModel.hasConversationView &amp;&amp; buttonViewModel.isSplitView}"
     app:questionSplitViewMarginBottom="@{@dimen/margin_0}"
-    app:questionSplitViewMarginEnd="@{@dimen/margin_0}"
-    app:questionSplitViewMarginStart="@{@dimen/margin_48}"
+    app:questionSplitViewMarginEnd="@{@dimen/margin_28}"
+    app:questionSplitViewMarginStart="@{@dimen/margin_28}"
     app:questionSplitViewMarginTop="@{@dimen/margin_72}"
-    app:questionSplitViewPaddingApplicable="@{!buttonViewModel.hasConversationView &amp;&amp; buttonViewModel.isSplitView}"
-    app:questionSplitViewPaddingBottom="@{@dimen/padding_0}"
-    app:questionSplitViewPaddingEnd="@{@dimen/padding_0}"
-    app:questionSplitViewPaddingStart="@{@dimen/padding_0}"
-    app:questionSplitViewPaddingTop="@{@dimen/padding_0}"
     app:questionViewMarginApplicable="@{!buttonViewModel.hasConversationView &amp;&amp; !buttonViewModel.isSplitView}"
-    app:questionViewMarginBottom="@{@dimen/margin_8}"
-    app:questionViewMarginEnd="@{@dimen/margin_0}"
-    app:questionViewMarginStart="@{@dimen/margin_0}"
-    app:questionViewMarginTop="@{@dimen/margin_56}"
-    app:questionViewPaddingApplicable="@{!buttonViewModel.hasConversationView &amp;&amp; !buttonViewModel.isSplitView}"
-    app:questionViewPaddingBottom="@{@dimen/padding_28}"
-    app:questionViewPaddingEnd="@{@dimen/padding_24}"
-    app:questionViewPaddingStart="@{@dimen/padding_24}"
-    app:questionViewPaddingTop="@{@dimen/padding_0}">
+    app:questionViewMarginBottom="@{@dimen/margin_0}"
+    app:questionViewMarginEnd="@{@dimen/margin_28}"
+    app:questionViewMarginStart="@{@dimen/margin_28}"
+    app:questionViewMarginTop="@{@dimen/margin_24}">
 
     <ImageButton
       android:id="@+id/previous_state_navigation_button"
@@ -65,7 +50,7 @@
       android:contentDescription="@string/previous_state_description"
       android:elevation="2dp"
       android:onClick="@{(v) -> buttonViewModel.previousNavigationButtonListener.onPreviousButtonClicked()}"
-      android:padding="16dp"
+      android:padding="8dp"
       android:src="@drawable/ic_arrow_back_oppia_dark_blue_24dp"
       app:layout_constraintBottom_toBottomOf="parent"
       app:layout_constraintStart_toStartOf="parent"
diff --git a/app/src/main/res/layout/question_player_fragment.xml b/app/src/main/res/layout/question_player_fragment.xml
index ecf51deaaad..c5de141c38e 100644
--- a/app/src/main/res/layout/question_player_fragment.xml
+++ b/app/src/main/res/layout/question_player_fragment.xml
@@ -55,9 +55,11 @@
         android:id="@+id/question_recycler_view"
         android:layout_width="0dp"
         android:layout_height="0dp"
+        android:clipToPadding="false"
         android:divider="@android:color/transparent"
         android:dividerHeight="8dp"
         android:overScrollMode="never"
+        android:paddingBottom="160dp"
         app:data="@{viewModel.itemList}"
         app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
         app:layout_constraintBottom_toTopOf="@id/question_progress_bar"
@@ -69,9 +71,11 @@
         android:id="@+id/extra_interaction_recycler_view"
         android:layout_width="0dp"
         android:layout_height="0dp"
+        android:clipToPadding="false"
         android:divider="@android:color/transparent"
         android:dividerHeight="8dp"
         android:overScrollMode="never"
+        android:paddingBottom="160dp"
         android:visibility="@{viewModel.isSplitView ? View.VISIBLE : View.GONE}"
         app:data="@{viewModel.rightItemList}"
         app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
@@ -152,9 +156,9 @@
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:layout_gravity="bottom"
-      android:layout_marginStart="28dp"
+      android:layout_marginStart="32dp"
       android:layout_marginTop="8dp"
-      android:layout_marginEnd="28dp"
+      android:layout_marginEnd="32dp"
       android:layout_marginBottom="16dp"
       android:elevation="8dp"
       android:translationZ="4dp">
diff --git a/app/src/main/res/layout/replay_button_item.xml b/app/src/main/res/layout/replay_button_item.xml
index 5a5d158387f..db46b755fbd 100644
--- a/app/src/main/res/layout/replay_button_item.xml
+++ b/app/src/main/res/layout/replay_button_item.xml
@@ -4,6 +4,8 @@
 
   <data>
 
+    <import type="android.view.View" />
+
     <variable
       name="buttonViewModel"
       type="org.oppia.app.player.state.itemviewmodel.ReplayButtonViewModel" />
@@ -12,56 +14,21 @@
   <androidx.constraintlayout.widget.ConstraintLayout
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
+    android:layout_marginStart="28dp"
+    android:layout_marginTop="68dp"
+    android:layout_marginEnd="28dp"
+    android:layout_marginBottom="0dp"
     android:gravity="center_vertical"
-    app:explorationSplitViewMarginApplicable="@{buttonViewModel.hasConversationView &amp;&amp; buttonViewModel.isSplitView}"
-    app:explorationSplitViewMarginBottom="@{@dimen/margin_0}"
-    app:explorationSplitViewMarginEnd="@{@dimen/margin_0}"
-    app:explorationSplitViewMarginStart="@{@dimen/margin_0}"
-    app:explorationSplitViewMarginTop="@{@dimen/margin_0}"
-    app:explorationSplitViewPaddingApplicable="@{buttonViewModel.hasConversationView &amp;&amp; buttonViewModel.isSplitView}"
-    app:explorationSplitViewPaddingBottom="@{@dimen/padding_0}"
-    app:explorationSplitViewPaddingEnd="@{@dimen/padding_0}"
-    app:explorationSplitViewPaddingStart="@{@dimen/padding_0}"
-    app:explorationSplitViewPaddingTop="@{@dimen/padding_0}"
-    app:explorationViewMarginApplicable="@{buttonViewModel.hasConversationView &amp;&amp; !buttonViewModel.isSplitView}"
-    app:explorationViewMarginBottom="@{@dimen/margin_0}"
-    app:explorationViewMarginEnd="@{@dimen/margin_0}"
-    app:explorationViewMarginStart="@{@dimen/margin_0}"
-    app:explorationViewMarginTop="@{@dimen/margin_56}"
-    app:explorationViewPaddingApplicable="@{buttonViewModel.hasConversationView &amp;&amp; !buttonViewModel.isSplitView}"
-    app:explorationViewPaddingBottom="@{@dimen/padding_12}"
-    app:explorationViewPaddingEnd="@{@dimen/padding_24}"
-    app:explorationViewPaddingStart="@{@dimen/padding_24}"
-    app:explorationViewPaddingTop="@{@dimen/padding_0}"
-    app:questionSplitViewMarginApplicable="@{!buttonViewModel.hasConversationView &amp;&amp; buttonViewModel.isSplitView}"
-    app:questionSplitViewMarginBottom="@{@dimen/margin_0}"
-    app:questionSplitViewMarginEnd="@{@dimen/margin_64}"
-    app:questionSplitViewMarginStart="@{@dimen/margin_0}"
-    app:questionSplitViewMarginTop="@{@dimen/margin_72}"
-    app:questionSplitViewPaddingApplicable="@{!buttonViewModel.hasConversationView &amp;&amp; buttonViewModel.isSplitView}"
-    app:questionSplitViewPaddingBottom="@{@dimen/padding_0}"
-    app:questionSplitViewPaddingEnd="@{@dimen/padding_0}"
-    app:questionSplitViewPaddingStart="@{@dimen/padding_0}"
-    app:questionSplitViewPaddingTop="@{@dimen/padding_0}"
-    app:questionViewMarginApplicable="@{!buttonViewModel.hasConversationView &amp;&amp; !buttonViewModel.isSplitView}"
-    app:questionViewMarginBottom="@{@dimen/margin_0}"
-    app:questionViewMarginEnd="@{@dimen/margin_0}"
-    app:questionViewMarginStart="@{@dimen/margin_0}"
-    app:questionViewMarginTop="@{@dimen/margin_56}"
-    app:questionViewPaddingApplicable="@{!buttonViewModel.hasConversationView &amp;&amp; !buttonViewModel.isSplitView}"
-    app:questionViewPaddingBottom="@{@dimen/padding_12}"
-    app:questionViewPaddingEnd="@{@dimen/padding_24}"
-    app:questionViewPaddingStart="@{@dimen/padding_24}"
-    app:questionViewPaddingTop="@{@dimen/padding_0}">
+    android:visibility="@{buttonViewModel.hasConversationView ? View.GONE : View.VISIBLE}">
 
     <Button
       android:id="@+id/replay_button"
       style="@style/StateButtonActive"
-      android:layout_height="48dp"
       android:layout_margin="4dp"
       android:background="@drawable/state_button_orange_background"
       android:drawableStart="@drawable/ic_refresh_white_24dp"
       android:drawablePadding="4dp"
+      android:minHeight="48dp"
       android:onClick="@{(v) -> buttonViewModel.replayButtonListener.onReplayButtonClicked()}"
       android:text="@string/lesson_replay_button_text"
       android:textColor="@color/white"
diff --git a/app/src/main/res/layout/return_to_topic_button_item.xml b/app/src/main/res/layout/return_to_topic_button_item.xml
index 11826b541d7..0832c237c00 100644
--- a/app/src/main/res/layout/return_to_topic_button_item.xml
+++ b/app/src/main/res/layout/return_to_topic_button_item.xml
@@ -10,51 +10,34 @@
       name="buttonViewModel"
       type="org.oppia.app.player.state.itemviewmodel.ReturnToTopicButtonViewModel" />
   </data>
-
+  <!-- Margins -->
+  <!-- Exploration Split View: 24, 72, 32, 0 -->
+  <!-- Exploration View: 24, 24, 24, 0 -->
+  <!-- Question Split View: 32, 12, 32, 0 -->
+  <!-- Question View: 32, 12, 32, 0 -->
+  <!-- Note: Start/End margins are 4dp less which is getting adjusted in child views. -->
   <androidx.constraintlayout.widget.ConstraintLayout
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:gravity="center_vertical"
-    app:explorationSplitViewMarginApplicable="@{buttonViewModel.hasConversationView &amp;&amp; buttonViewModel.isSplitView}"
-    app:explorationSplitViewMarginBottom="@{@dimen/margin_0}"
-    app:explorationSplitViewMarginEnd="@{@dimen/margin_0}"
-    app:explorationSplitViewMarginStart="@{@dimen/margin_0}"
-    app:explorationSplitViewMarginTop="@{@dimen/margin_0}"
-    app:explorationSplitViewPaddingApplicable="@{buttonViewModel.hasConversationView &amp;&amp; buttonViewModel.isSplitView}"
-    app:explorationSplitViewPaddingBottom="@{@dimen/padding_0}"
-    app:explorationSplitViewPaddingEnd="@{@dimen/padding_0}"
-    app:explorationSplitViewPaddingStart="@{@dimen/padding_0}"
-    app:explorationSplitViewPaddingTop="@{@dimen/padding_0}"
+    app:explorationSplitViewMarginEnd="@{@dimen/margin_28}"
+    app:explorationSplitViewMarginStart="@{@dimen/margin_20}"
+    app:explorationSplitViewMarginTop="@{@dimen/margin_72}"
     app:explorationViewMarginApplicable="@{buttonViewModel.hasConversationView &amp;&amp; !buttonViewModel.isSplitView}"
-    app:explorationViewMarginBottom="@{@dimen/margin_8}"
-    app:explorationViewMarginEnd="@{@dimen/margin_0}"
-    app:explorationViewMarginStart="@{@dimen/margin_0}"
-    app:explorationViewMarginTop="@{@dimen/margin_56}"
-    app:explorationViewPaddingApplicable="@{buttonViewModel.hasConversationView &amp;&amp; !buttonViewModel.isSplitView}"
-    app:explorationViewPaddingBottom="@{@dimen/padding_28}"
-    app:explorationViewPaddingEnd="@{@dimen/padding_24}"
-    app:explorationViewPaddingStart="@{@dimen/padding_24}"
-    app:explorationViewPaddingTop="@{@dimen/padding_0}"
+    app:explorationViewMarginBottom="@{@dimen/margin_0}"
+    app:explorationViewMarginEnd="@{@dimen/margin_20}"
+    app:explorationViewMarginStart="@{@dimen/margin_20}"
+    app:explorationViewMarginTop="@{@dimen/margin_24}"
     app:questionSplitViewMarginApplicable="@{!buttonViewModel.hasConversationView &amp;&amp; buttonViewModel.isSplitView}"
     app:questionSplitViewMarginBottom="@{@dimen/margin_0}"
-    app:questionSplitViewMarginEnd="@{@dimen/margin_0}"
-    app:questionSplitViewMarginStart="@{@dimen/margin_0}"
-    app:questionSplitViewMarginTop="@{@dimen/margin_0}"
-    app:questionSplitViewPaddingApplicable="@{!buttonViewModel.hasConversationView &amp;&amp; buttonViewModel.isSplitView}"
-    app:questionSplitViewPaddingBottom="@{@dimen/padding_0}"
-    app:questionSplitViewPaddingEnd="@{@dimen/padding_0}"
-    app:questionSplitViewPaddingStart="@{@dimen/padding_0}"
-    app:questionSplitViewPaddingTop="@{@dimen/padding_0}"
+    app:questionSplitViewMarginEnd="@{@dimen/margin_28}"
+    app:questionSplitViewMarginStart="@{@dimen/margin_28}"
+    app:questionSplitViewMarginTop="@{@dimen/margin_8}"
     app:questionViewMarginApplicable="@{!buttonViewModel.hasConversationView &amp;&amp; !buttonViewModel.isSplitView}"
-    app:questionViewMarginBottom="@{@dimen/margin_8}"
-    app:questionViewMarginEnd="@{@dimen/margin_0}"
-    app:questionViewMarginStart="@{@dimen/margin_0}"
-    app:questionViewMarginTop="@{@dimen/margin_56}"
-    app:questionViewPaddingApplicable="@{!buttonViewModel.hasConversationView &amp;&amp; !buttonViewModel.isSplitView}"
-    app:questionViewPaddingBottom="@{@dimen/padding_28}"
-    app:questionViewPaddingEnd="@{@dimen/padding_24}"
-    app:questionViewPaddingStart="@{@dimen/padding_24}"
-    app:questionViewPaddingTop="@{@dimen/padding_0}">
+    app:questionViewMarginBottom="@{@dimen/margin_0}"
+    app:questionViewMarginEnd="@{@dimen/margin_28}"
+    app:questionViewMarginStart="@{@dimen/margin_28}"
+    app:questionViewMarginTop="@{@dimen/margin_8}">
 
     <ImageButton
       android:id="@+id/previous_state_navigation_button"
@@ -65,7 +48,7 @@
       android:contentDescription="@string/previous_state_description"
       android:elevation="2dp"
       android:onClick="@{(v) -> buttonViewModel.previousNavigationButtonListener.onPreviousButtonClicked()}"
-      android:padding="16dp"
+      android:padding="8dp"
       android:src="@drawable/ic_arrow_back_oppia_dark_blue_24dp"
       android:visibility="@{buttonViewModel.hasPreviousButton ? View.VISIBLE: View.GONE, default=gone}"
       app:layout_constraintBottom_toBottomOf="parent"
diff --git a/app/src/main/res/layout/state_fragment.xml b/app/src/main/res/layout/state_fragment.xml
index e00e5db6adb..01181ceca68 100755
--- a/app/src/main/res/layout/state_fragment.xml
+++ b/app/src/main/res/layout/state_fragment.xml
@@ -37,6 +37,7 @@
         android:divider="@android:color/transparent"
         android:overScrollMode="never"
         android:paddingTop="@{viewModel.isSplitView() ? (viewModel.isAudioBarVisible ? @dimen/padding_96 : @dimen/padding_0) : (viewModel.isAudioBarVisible ? @dimen/padding_72 : @dimen/padding_0)}"
+        android:paddingBottom="160dp"
         android:scrollbars="none"
         app:data="@{viewModel.itemList}"
         app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
@@ -52,6 +53,7 @@
         android:clipToPadding="false"
         android:divider="@android:color/transparent"
         android:overScrollMode="never"
+        android:paddingBottom="160dp"
         android:scrollbars="none"
         android:visibility="@{viewModel.isSplitView ? View.VISIBLE : View.GONE}"
         app:data="@{viewModel.rightItemList}"
@@ -123,9 +125,9 @@
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:layout_gravity="bottom"
-      android:layout_marginStart="28dp"
+      android:layout_marginStart="24dp"
       android:layout_marginTop="8dp"
-      android:layout_marginEnd="28dp"
+      android:layout_marginEnd="24dp"
       android:layout_marginBottom="16dp"
       android:elevation="8dp"
       android:translationZ="4dp">
diff --git a/app/src/main/res/layout/submit_button_item.xml b/app/src/main/res/layout/submit_button_item.xml
index ac681857fd4..2d83648db48 100644
--- a/app/src/main/res/layout/submit_button_item.xml
+++ b/app/src/main/res/layout/submit_button_item.xml
@@ -10,51 +10,36 @@
       name="buttonViewModel"
       type="org.oppia.app.player.state.itemviewmodel.SubmitButtonViewModel" />
   </data>
-
+  <!-- Margins -->
+  <!-- Exploration Split View: 24, 72, 32, 0 -->
+  <!-- Exploration View: 24, 24, 24, 0 -->
+  <!-- Question Split View: 32, 72, 32, 0 -->
+  <!-- Question View: 32, 24, 32, 0 -->
+  <!-- Note: Start/End margins are 4dp less which is getting adjusted in child views. -->
   <androidx.constraintlayout.widget.ConstraintLayout
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:gravity="center_vertical"
     app:explorationSplitViewMarginApplicable="@{buttonViewModel.hasConversationView &amp;&amp; buttonViewModel.isSplitView}"
     app:explorationSplitViewMarginBottom="@{@dimen/margin_0}"
-    app:explorationSplitViewMarginEnd="@{@dimen/margin_64}"
-    app:explorationSplitViewMarginStart="@{@dimen/margin_0}"
+    app:explorationSplitViewMarginEnd="@{@dimen/margin_28}"
+    app:explorationSplitViewMarginStart="@{@dimen/margin_20}"
     app:explorationSplitViewMarginTop="@{@dimen/margin_72}"
-    app:explorationSplitViewPaddingApplicable="@{buttonViewModel.hasConversationView &amp;&amp; buttonViewModel.isSplitView}"
-    app:explorationSplitViewPaddingBottom="@{@dimen/padding_0}"
-    app:explorationSplitViewPaddingEnd="@{@dimen/padding_0}"
-    app:explorationSplitViewPaddingStart="@{@dimen/padding_0}"
-    app:explorationSplitViewPaddingTop="@{@dimen/padding_0}"
     app:explorationViewMarginApplicable="@{buttonViewModel.hasConversationView &amp;&amp; !buttonViewModel.isSplitView}"
-    app:explorationViewMarginBottom="@{@dimen/margin_8}"
-    app:explorationViewMarginEnd="@{@dimen/margin_0}"
-    app:explorationViewMarginStart="@{@dimen/margin_0}"
-    app:explorationViewMarginTop="@{@dimen/margin_56}"
-    app:explorationViewPaddingApplicable="@{buttonViewModel.hasConversationView &amp;&amp; !buttonViewModel.isSplitView}"
-    app:explorationViewPaddingBottom="@{@dimen/padding_28}"
-    app:explorationViewPaddingEnd="@{@dimen/padding_24}"
-    app:explorationViewPaddingStart="@{@dimen/padding_24}"
-    app:explorationViewPaddingTop="@{@dimen/padding_0}"
+    app:explorationViewMarginBottom="@{@dimen/margin_0}"
+    app:explorationViewMarginEnd="@{@dimen/margin_20}"
+    app:explorationViewMarginStart="@{@dimen/margin_20}"
+    app:explorationViewMarginTop="@{@dimen/margin_24}"
     app:questionSplitViewMarginApplicable="@{!buttonViewModel.hasConversationView &amp;&amp; buttonViewModel.isSplitView}"
     app:questionSplitViewMarginBottom="@{@dimen/margin_0}"
-    app:questionSplitViewMarginEnd="@{@dimen/margin_64}"
-    app:questionSplitViewMarginStart="@{@dimen/margin_0}"
+    app:questionSplitViewMarginEnd="@{@dimen/margin_28}"
+    app:questionSplitViewMarginStart="@{@dimen/margin_28}"
     app:questionSplitViewMarginTop="@{@dimen/margin_72}"
-    app:questionSplitViewPaddingApplicable="@{!buttonViewModel.hasConversationView &amp;&amp; buttonViewModel.isSplitView}"
-    app:questionSplitViewPaddingBottom="@{@dimen/padding_0}"
-    app:questionSplitViewPaddingEnd="@{@dimen/padding_0}"
-    app:questionSplitViewPaddingStart="@{@dimen/padding_0}"
-    app:questionSplitViewPaddingTop="@{@dimen/padding_0}"
     app:questionViewMarginApplicable="@{!buttonViewModel.hasConversationView &amp;&amp; !buttonViewModel.isSplitView}"
-    app:questionViewMarginBottom="@{@dimen/margin_8}"
-    app:questionViewMarginEnd="@{@dimen/margin_0}"
-    app:questionViewMarginStart="@{@dimen/margin_0}"
-    app:questionViewMarginTop="@{@dimen/margin_56}"
-    app:questionViewPaddingApplicable="@{!buttonViewModel.hasConversationView &amp;&amp; !buttonViewModel.isSplitView}"
-    app:questionViewPaddingBottom="@{@dimen/padding_28}"
-    app:questionViewPaddingEnd="@{@dimen/padding_24}"
-    app:questionViewPaddingStart="@{@dimen/padding_24}"
-    app:questionViewPaddingTop="@{@dimen/padding_0}">
+    app:questionViewMarginBottom="@{@dimen/margin_0}"
+    app:questionViewMarginEnd="@{@dimen/margin_28}"
+    app:questionViewMarginStart="@{@dimen/margin_28}"
+    app:questionViewMarginTop="@{@dimen/margin_24}">
 
     <ImageButton
       android:id="@+id/previous_state_navigation_button"
@@ -65,7 +50,7 @@
       android:contentDescription="@string/previous_state_description"
       android:elevation="2dp"
       android:onClick="@{(v) -> buttonViewModel.previousNavigationButtonListener.onPreviousButtonClicked()}"
-      android:padding="16dp"
+      android:padding="8dp"
       android:src="@drawable/ic_arrow_back_oppia_dark_blue_24dp"
       android:visibility="@{buttonViewModel.hasPreviousButton ? View.VISIBLE: View.GONE, default=gone}"
       app:layout_constraintBottom_toBottomOf="parent"
@@ -78,9 +63,9 @@
       android:layout_height="0dp"
       android:layout_alignParentEnd="true"
       android:layout_margin="4dp"
+      android:background="@{buttonViewModel.canSubmitAnswer ? @drawable/state_button_primary_background : @drawable/state_button_inactive_background}"
       android:button="@drawable/state_button_primary_background"
       android:clickable="@{buttonViewModel.canSubmitAnswer}"
-      android:background="@{buttonViewModel.canSubmitAnswer ? @drawable/state_button_primary_background : @drawable/state_button_inactive_background}"
       android:onClick="@{(v) -> buttonViewModel.submitNavigationButtonListener.onSubmitButtonClicked()}"
       android:text="@string/state_submit_button"
       android:textColor="@color/white"
diff --git a/app/src/main/res/values/dimens.xml b/app/src/main/res/values/dimens.xml
index b6006b723a5..642752f38b6 100644
--- a/app/src/main/res/values/dimens.xml
+++ b/app/src/main/res/values/dimens.xml
@@ -40,17 +40,21 @@
   <dimen name="margin_298">298dp</dimen>
   <dimen name="margin_208">208dp</dimen>
   <dimen name="margin_192">192dp</dimen>
+  <dimen name="margin_188">188dp</dimen>
   <dimen name="margin_176">176dp</dimen>
+  <dimen name="margin_172">172dp</dimen>
   <dimen name="margin_170">170dp</dimen>
   <dimen name="margin_144">144dp</dimen>
   <dimen name="margin_128">128dp</dimen>
   <dimen name="margin_124">124dp</dimen>
   <dimen name="margin_120">120dp</dimen>
   <dimen name="margin_112">112dp</dimen>
+  <dimen name="margin_108">108dp</dimen>
   <dimen name="margin_84">84dp</dimen>
   <dimen name="margin_80">80dp</dimen>
   <dimen name="margin_72">72dp</dimen>
   <dimen name="margin_68">68dp</dimen>
+  <dimen name="margin_60">60dp</dimen>
   <dimen name="margin_64">64dp</dimen>
   <dimen name="margin_56">56dp</dimen>
   <dimen name="margin_48">48dp</dimen>