Fix part #31 : Final UI MultipleChoiceInteractionView (#335)

* created border * Update multiple_choice_interaction_items.xml * updated changes
oppia · Nov 13, 2019 · 907a0b6 · 907a0b6
1 parent 1da1a22
commit 907a0b6
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 9 deletions.
diff --git a/app/src/main/res/drawable/rounded_rect_grey_border_white_background.xml b/app/src/main/res/drawable/rounded_rect_grey_border_white_background.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android">
+  <stroke
+    android:width="1dp"
+    android:color="@color/oppiaGreyBorder" />
+  <solid android:color="@color/white" />
+  <corners android:radius="4dp" />
+</shape>
diff --git a/app/src/main/res/layout/multiple_choice_interaction_items.xml b/app/src/main/res/layout/multiple_choice_interaction_items.xml
@@ -16,24 +16,28 @@
     android:id="@+id/radio_container"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
-    android:layout_margin="4dp"
     android:enabled="@{!viewModel.isReadOnly}"
     android:onClick="@{(v) -> viewModel.handleItemClicked()}">
 
     <androidx.appcompat.widget.AppCompatRadioButton
       android:id="@+id/multiple_choice_radio_button"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
-      android:padding="4dp"
       android:clickable="false"
+      android:padding="4dp"
       android:checked="@{viewModel.answerSelected}"
       app:buttonTint="@color/oppiaDarkBlue" />
 
     <TextView
       android:id="@+id/multiple_choice_content_text_view"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
+      android:textSize="16sp"
+      android:layout_marginStart="4dp"
+      android:layout_marginEnd="16dp"
+      android:layout_marginBottom="16dp"
       android:layout_toEndOf="@+id/multiple_choice_radio_button"
+      android:fontFamily="sans-serif"
       android:padding="4dp"
       android:text="@{htmlContent}"
       android:textColor="@color/oppiaDarkBlue" />

diff --git a/app/src/main/res/layout/selection_interaction_item.xml b/app/src/main/res/layout/selection_interaction_item.xml
@@ -18,10 +18,12 @@
       android:id="@+id/interaction_container_linear_layout"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
-      android:layout_margin="8dp"
-      android:background="@color/white"
+      android:layout_marginTop="16dp"
+      android:layout_marginBottom="52dp"
+      android:layout_marginStart="28dp"
+      android:layout_marginEnd="28dp"
+      android:background="@drawable/rounded_rect_grey_border_white_background"
       android:orientation="vertical"
-      android:padding="8dp"
       app:layout_constraintBottom_toBottomOf="parent"
       app:layout_constraintTop_toTopOf="parent"
       tools:layout_editor_absoluteX="8dp">
@@ -30,11 +32,11 @@
         android:id="@+id/selection_interaction_recyclerview"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:layout_marginStart="8dp"
-        android:layout_marginTop="4dp"
-        android:layout_marginEnd="8dp"
+        android:layout_marginStart="20dp"
+        android:layout_marginTop="32dp"
+        android:layout_marginEnd="20dp"
+        android:layout_marginBottom="32dp"
         android:divider="@android:color/transparent"
-        android:dividerHeight="8dp"
         app:data="@{viewModel.choiceItems}"
         app:itemInputType="@{viewModel.getSelectionItemInputType()}"
         app:explorationId="@{viewModel.explorationId}"

diff --git a/app/src/main/res/values/colors.xml b/app/src/main/res/values/colors.xml
@@ -23,6 +23,7 @@
   <color name="oppiaProgressChapterFinished">#E76F51</color>
   <color name="oppiaProgressChapterNotFinished">#999999</color>
   <color name="oppiaDisabledButtonBackground">#61999999</color>
+  <color name="oppiaGreyBorder">#DDDDDD</color>
   <!-- BASIC COLORS -->
   <color name="white">#FFFFFF</color>
   <color name="white_80">#CCFFFFFF</color>