Fix #150, #151, #155: TextInputInteractionView, NumericInputInteractionView, FractionInputInteractionView

app/build.gradle

@@ -38,6 +38,7 @@ android {
     unitTests {
       includeAndroidResources = true
     }
+    unitTests.returnDefaultValues = true
   }
 
   // https://proandroiddev.com/isolated-fragments-unit-tests-that-run-both-instrumented-and-on-the-jvm-with-the-same-source-code-283db2e9be5d
@@ -63,9 +64,9 @@ dependencies {
       'androidx.lifecycle:lifecycle-runtime-ktx:2.2.0-alpha03',
       'androidx.recyclerview:recyclerview:1.0.0',
       'com.google.dagger:dagger:2.24',
-      "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version",
-      "org.jetbrains.kotlinx:kotlinx-coroutines-core:1.2.1",
-      "org.jetbrains.kotlinx:kotlinx-coroutines-android:1.2.1"
+      'org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version',
+      'org.jetbrains.kotlinx:kotlinx-coroutines-core:1.2.1',
+      'org.jetbrains.kotlinx:kotlinx-coroutines-android:1.2.1'
   )
   testImplementation(
       'androidx.test:core:1.2.0',

app/src/main/java/org/oppia/app/customview/inputInteractionView/FractionInputInteractionView.kt

@@ -0,0 +1,40 @@
+package org.oppia.app.customview.inputInteractionView
+
+import android.content.Context
+import android.text.InputFilter
+import android.text.method.DigitsKeyListener
+import android.widget.EditText
+import org.oppia.app.R
+
+/** The customclass for [FractionInputInteractionView]. */
+class FractionInputInteractionView : EditText {
+
+  private var mContext: Context
+  private var placeholder: String
+  private var rows: Int
+
+  constructor(context: Context, placeholder: String, rows: Int) : super(context) {
+    this.mContext = context
+    this.placeholder = placeholder
+    this.rows = rows
+    attributes()
+  }
+
+  /** This function contains default attributes of [FractionInputInteractionView]. */
+  fun attributes() {
+    setBackgroundResource(R.drawable.edit_text_background)
+    val paddingPixel =  mContext.resources.getDimension(R.dimen.padding_8)
+    val density = resources.displayMetrics.density
+    val paddingDp = (paddingPixel * density).toInt()
+    setPadding(paddingDp, paddingDp, paddingDp, paddingDp)
+    setHint(placeholder)
+    setKeyListener(DigitsKeyListener.getInstance("0123456789/"))
+    setEditTextMaxLength(200)
+  }
+
+  fun setEditTextMaxLength(length: Int) {
+    val filterArray = arrayOfNulls<InputFilter>(1)
+    filterArray[0] = InputFilter.LengthFilter(length)
+    setFilters(filterArray)
+  }
+}

app/src/main/java/org/oppia/app/customview/inputInteractionView/NumberInputInteractionView.kt

@@ -0,0 +1,40 @@
+package org.oppia.app.customview.inputInteractionView
+
+import android.content.Context
+import android.text.InputFilter
+import android.text.method.DigitsKeyListener
+import android.widget.EditText
+import org.oppia.app.R
+
+/** The customclass for [NumberInputInteractionView]. */
+class NumberInputInteractionView : EditText {
+
+  private var mContext: Context
+  private var placeholder: String
+  private var rows: Int
+
+  constructor(context: Context, placeholder: String, rows: Int) : super(context) {
+    this.mContext = context
+    this.placeholder = placeholder
+    this.rows = rows
+    attributes()
+  }
+
+  /** This function contains default attributes of [NumberInputInteractionView]. */
+  fun attributes() {
+    setBackgroundResource(R.drawable.edit_text_background)
+    val paddingPixel =  mContext.resources.getDimension(R.dimen.padding_8)
+    val density = resources.displayMetrics.density
+    val paddingDp = (paddingPixel * density).toInt()
+    setPadding(paddingDp, paddingDp, paddingDp, paddingDp)
+    setHint(placeholder)
+    setKeyListener(DigitsKeyListener.getInstance("0123456789."))
+    setEditTextMaxLength(200)
+  }
+
+  fun setEditTextMaxLength(length: Int) {
+    val filterArray = arrayOfNulls<InputFilter>(1)
+    filterArray[0] = InputFilter.LengthFilter(length)
+    setFilters(filterArray)
+  }
+}

app/src/main/java/org/oppia/app/customview/inputInteractionView/TextInputInteractionView.kt

@@ -0,0 +1,38 @@
+package org.oppia.app.customview.inputInteractionView
+
+import android.content.Context
+import android.text.InputFilter
+import android.widget.EditText
+import org.oppia.app.R
+
+/** The customclass for [TextInputInteractionView]. */
+class TextInputInteractionView : EditText {
+
+  private var mContext: Context
+  private var placeholder: String
+  private var rows: Int
+
+  constructor(context: Context, placeholder: String, rows: Int) : super(context) {
+    this.mContext = context
+    this.placeholder = placeholder
+    this.rows = rows
+    attributes()
+  }
+
+  /** This function contains default attributes of [TextInputInteractionView]. */
+  fun attributes() {
+    setBackgroundResource(R.drawable.edit_text_background)
+    val paddingPixel = mContext.resources.getDimension(R.dimen.padding_8)
+    val density = resources.displayMetrics.density
+    val paddingDp = (paddingPixel * density).toInt()
+    setPadding(paddingDp, paddingDp, paddingDp, paddingDp)
+    setHint(placeholder)
+    setEditTextMaxLength(200)
+  }
+
+  fun setEditTextMaxLength(length: Int) {
+    val filterArray = arrayOfNulls<InputFilter>(1)
+    filterArray[0] = InputFilter.LengthFilter(length)
+    setFilters(filterArray)
+  }
+}

app/src/main/java/org/oppia/app/player/state/StateFragmentPresenter.kt

@@ -1,10 +1,16 @@
 package org.oppia.app.player.state
 
+import android.content.res.Resources
 import android.view.LayoutInflater
 import android.view.View
 import android.view.ViewGroup
+import android.widget.LinearLayout
 import androidx.fragment.app.Fragment
 import androidx.lifecycle.Observer
+import org.oppia.app.R
+import org.oppia.app.customview.inputInteractionView.FractionInputInteractionView
+import org.oppia.app.customview.inputInteractionView.NumberInputInteractionView
+import org.oppia.app.customview.inputInteractionView.TextInputInteractionView
 import org.oppia.app.databinding.StateFragmentBinding
 import org.oppia.app.fragment.FragmentScope
 import org.oppia.app.model.CellularDataPreference
@@ -27,6 +33,7 @@ class StateFragmentPresenter @Inject constructor(
   private var showCellularDataDialog = true
   private var useCellularData = false
 
+  private var llRoot: LinearLayout? = null
   fun handleCreateView(inflater: LayoutInflater, container: ViewGroup?): View? {
     cellularDialogController.getCellularDataPreference()
       .observe(fragment, Observer<AsyncResult<CellularDataPreference>>{
@@ -42,6 +49,10 @@ class StateFragmentPresenter @Inject constructor(
       it.stateFragment = fragment as StateFragment
       it.viewModel = getStateViewModel()
     }
+    llRoot = binding.root.findViewById(R.id.llRoot)
+    addTextInputContentCard("text")
+    addNumberInputContentCard("number 1")
+    addFractionInputContentCard("fraction 1/1")
     return binding.root
   }
 
@@ -74,6 +85,56 @@ class StateFragmentPresenter @Inject constructor(
     dialogFragment.showNow(fragment.childFragmentManager, TAG_CELLULAR_DATA_DIALOG)
   }
 
+  /** The function for adding [TextInputInteractionView]. */
+  fun addTextInputContentCard(placeholder: String) {
+    var contentComponent = TextInputInteractionView(
+      fragment.context!!,
+      placeholder,
+      1
+    )
+    val params = LinearLayout.LayoutParams(
+      LinearLayout.LayoutParams.MATCH_PARENT,
+      LinearLayout.LayoutParams.WRAP_CONTENT
+    )
+    params.setMargins(dpToPx(8), dpToPx(8), dpToPx(8), dpToPx(8))
+    llRoot!!.addView(contentComponent, params)
+  }
+
+  /** The function for adding [NumberInputInteractionView]. */
+  fun addNumberInputContentCard(placeholder: String) {
+    var contentComponent = NumberInputInteractionView(
+      fragment.context!!,
+      placeholder,
+      1
+    )
+    val params = LinearLayout.LayoutParams(
+      LinearLayout.LayoutParams.MATCH_PARENT,
+      LinearLayout.LayoutParams.WRAP_CONTENT
+    )
+    params.setMargins(dpToPx(8), dpToPx(8), dpToPx(8), dpToPx(8))
+    llRoot!!.addView(contentComponent, params)
+
+  }
+
+  /** The function for adding [FractionInputInteractionView]. */
+  fun addFractionInputContentCard(placeholder: String) {
+    var contentComponent = FractionInputInteractionView(
+      fragment.context!!,
+      placeholder,
+      1
+    )
+    val params = LinearLayout.LayoutParams(
+      LinearLayout.LayoutParams.MATCH_PARENT,
+      LinearLayout.LayoutParams.WRAP_CONTENT
+    )
+    params.setMargins(dpToPx(8), dpToPx(8), dpToPx(8), dpToPx(8))
+    llRoot!!.addView(contentComponent, params)
+  }
+
+  fun dpToPx(dp: Int): Int {
+    return (dp * Resources.getSystem().getDisplayMetrics().density).toInt()
+  }
+
   private fun getStateViewModel(): StateViewModel {
     return viewModelProvider.getForFragment(fragment, StateViewModel::class.java)
   }

app/src/main/res/drawable/edit_text_background.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<selector xmlns:android="http://schemas.android.com/apk/res/android">
+  <item android:drawable="@drawable/edit_text_background_shadow" android:state_focused="true" />
+  <item android:drawable="@drawable/edit_text_background_shadow" android:state_pressed="true" />
+  <item android:drawable="@drawable/edit_text_background_border" />
+</selector>

app/src/main/res/drawable/edit_text_background_border.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+  android:shape="rectangle">
+  <corners android:radius="4dp" />
+  <solid android:color="@color/white" />
+  <stroke
+    android:width="1dp"
+    android:color="@color/grey" />
+</shape>

app/src/main/res/drawable/edit_text_background_shadow.xml

@@ -0,0 +1,64 @@
+<?xml version="1.0" encoding="utf-8"?>
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+  <item>
+    <shape>
+      <corners android:radius="5dp"></corners>
+      <solid android:color="@color/grey_shade_10" />
+      <padding
+        android:bottom="1dp"
+        android:left="1dp"
+        android:right="1dp"
+        android:top="1dp" />
+    </shape>
+  </item>
+  <item>
+    <shape>
+      <corners android:radius="5dp"></corners>
+      <solid android:color="@color/blue_shade_20" />
+      <padding
+        android:bottom="1dp"
+        android:left="1dp"
+        android:right="1dp"
+        android:top="1dp" />
+    </shape>
+  </item>
+  <item>
+    <shape>
+      <corners android:radius="5dp"></corners>
+      <solid android:color="@color/blue_shade_40" />
+      <padding
+        android:bottom="1dp"
+        android:left="1dp"
+        android:right="1dp"
+        android:top="1dp" />
+    </shape>
+  </item>
+  <item>
+    <shape>
+      <corners android:radius="5dp"></corners>
+      <solid android:color="@color/blue_shade_50" />
+      <padding
+        android:bottom="1dp"
+        android:left="1dp"
+        android:right="1dp"
+        android:top="1dp" />
+    </shape>
+  </item>
+  <item>
+    <shape>
+      <corners android:radius="5dp"></corners>
+      <solid android:color="@color/blue_shade_60" />
+      <padding
+        android:bottom="1dp"
+        android:left="1dp"
+        android:right="1dp"
+        android:top="1dp" />
+    </shape>
+  </item>
+  <item>
+    <shape>
+      <corners android:radius="4dp"></corners>
+      <solid android:color="@color/white" />
+    </shape>
+  </item>
+</layer-list>

app/src/main/res/layout/cellular_data_dialog.xml

@@ -9,6 +9,5 @@
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:orientation="vertical"
-    android:text="@string/cellular_data_alert_dialog_checkbox">
-  </CheckBox>
+    android:text="@string/cellular_data_alert_dialog_checkbox"/>
 </RelativeLayout>