Fix #151: Lowfi numeric input interaction view part 2

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/player/state/StateFragmentPresenter.kt

@@ -1,12 +1,18 @@
 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.Button
+import android.widget.LinearLayout
+import android.widget.TextView
 import androidx.fragment.app.Fragment
 import androidx.lifecycle.LiveData
 import androidx.lifecycle.Observer
 import androidx.lifecycle.Transformations
+import org.oppia.app.R
+import org.oppia.app.customview.inputInteractionView.NumberInputInteractionView
 import org.oppia.app.databinding.StateFragmentBinding
 import org.oppia.app.fragment.FragmentScope
 import org.oppia.app.model.CellularDataPreference
@@ -17,6 +23,7 @@ import org.oppia.domain.audio.CellularDialogController
 import org.oppia.domain.exploration.ExplorationProgressController
 import org.oppia.util.data.AsyncResult
 import org.oppia.util.logging.Logger
+import java.lang.Exception
 import javax.inject.Inject
 
 private const val TAG_CELLULAR_DATA_DIALOG = "CELLULAR_DATA_DIALOG"
@@ -33,7 +40,9 @@ class StateFragmentPresenter @Inject constructor(
 
   private var showCellularDataDialog = true
   private var useCellularData = false
-
+  private var llRoot: LinearLayout? = null
+  private var dummyEditTextButton: Button? = null
+  private var dummyFetchDataTV: TextView? = null
   fun handleCreateView(inflater: LayoutInflater, container: ViewGroup?): View? {
     cellularDialogController.getCellularDataPreference()
       .observe(fragment, Observer<AsyncResult<CellularDataPreference>> {
@@ -51,7 +60,9 @@ class StateFragmentPresenter @Inject constructor(
     }
 
     subscribeToCurrentState()
-
+    llRoot = binding.root.findViewById(R.id.llRoot)
+    dummyEditTextButton = binding.root.findViewById(R.id.dummy_edittext_button)
+    dummyFetchDataTV = binding.root.findViewById(R.id.fetched_data_tv)
     return binding.root
   }
 
@@ -94,10 +105,33 @@ class StateFragmentPresenter @Inject constructor(
 
   private fun subscribeToCurrentState() {
     ephemeralStateLiveData.observe(fragment, Observer<EphemeralState> { result ->
+      try {
+        if (result.state.interaction.id.equals("NumericInput"))
+          addNumberInputContentCard(result.state.interaction.customizationArgsMap.get("placeholder")!!.normalizedString)
+      } catch (e: Exception) {
+      }
       logger.d("StateFragment", "getCurrentState: ${result.state.name}")
     })
   }
 
+  /** 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)
+    dummyEditTextButton!!.setOnClickListener(View.OnClickListener {
+      dummyFetchDataTV!!.setText(contentComponent.text)
+    })
+  }
+
   private val ephemeralStateLiveData: LiveData<EphemeralState> by lazy {
     getEphemeralState()
   }
@@ -112,4 +146,8 @@ class StateFragmentPresenter @Inject constructor(
     }
     return ephemeralStateResult.getOrDefault(EphemeralState.getDefaultInstance())
   }
+
+  fun dpToPx(dp: Int): Int {
+    return (dp * Resources.getSystem().getDisplayMetrics().density).toInt()
+  }
 }

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

@@ -1,34 +1,80 @@
 <?xml version="1.0" encoding="utf-8"?>
-<layout
-  xmlns:android="http://schemas.android.com/apk/res/android"
+<layout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto">
+
   <data>
-    <import type="android.view.View"/>
+
+    <import type="android.view.View" />
+
     <variable
       name="stateFragment"
-      type="org.oppia.app.player.state.StateFragment"/>
+      type="org.oppia.app.player.state.StateFragment" />
+
     <variable
       name="viewModel"
-      type="org.oppia.app.player.state.StateViewModel"/>
+      type="org.oppia.app.player.state.StateViewModel" />
+
+    <variable
+      name="presenter"
+      type="org.oppia.app.player.state.StateFragmentPresenter" />
   </data>
+
   <androidx.constraintlayout.widget.ConstraintLayout
     android:layout_width="match_parent"
     android:layout_height="match_parent">
+
     <LinearLayout
+      android:id="@+id/linearLayout"
       android:layout_width="0dp"
       android:layout_height="wrap_content"
       android:layout_marginStart="24dp"
       android:layout_marginEnd="24dp"
+      android:orientation="vertical"
       android:visibility="@{viewModel.isAudioFragmentVisible? View.VISIBLE: View.GONE}"
       app:layout_constraintEnd_toEndOf="parent"
       app:layout_constraintStart_toStartOf="parent"
       app:layout_constraintTop_toTopOf="parent">
+
       <fragment
         android:id="@+id/audio_fragment"
         class="org.oppia.app.player.audio.AudioFragment"
         android:layout_width="match_parent"
-        android:layout_height="wrap_content"/>
+        android:layout_height="wrap_content" />
     </LinearLayout>
+
+    <LinearLayout
+      android:id="@+id/llRoot"
+      android:layout_width="match_parent"
+      android:layout_height="wrap_content"
+      android:layout_margin="24dp"
+      android:orientation="vertical"
+      app:layout_constraintBottom_toTopOf="@id/dummy_edittext_button"
+      app:layout_constraintEnd_toEndOf="parent"
+      app:layout_constraintTop_toTopOf="parent" />
+
+    <Button
+      android:id="@+id/dummy_edittext_button"
+      android:layout_width="wrap_content"
+      android:layout_height="wrap_content"
+      android:layout_margin="8dp"
+      android:text="fetch"
+      app:layout_constraintBottom_toTopOf="@id/fetched_data_tv"
+      app:layout_constraintEnd_toEndOf="parent"
+      app:layout_constraintStart_toStartOf="parent"
+      app:layout_constraintTop_toTopOf="parent" />
+
+    <TextView
+      android:id="@+id/fetched_data_tv"
+      android:layout_width="match_parent"
+      android:layout_height="wrap_content"
+      android:layout_margin="@dimen/padding_8"
+      android:gravity="center"
+      android:hint="click the fetch button to fetch data from edit text"
+      app:layout_constraintBottom_toTopOf="@id/dummy_audio_button"
+      app:layout_constraintEnd_toEndOf="parent"
+      app:layout_constraintStart_toStartOf="parent"
+      app:layout_constraintTop_toTopOf="parent" />
+
     <Button
       android:id="@+id/dummy_audio_button"
       android:layout_width="wrap_content"
@@ -42,6 +88,7 @@
       app:layout_constraintBottom_toBottomOf="parent"
       app:layout_constraintEnd_toEndOf="parent"
       app:layout_constraintStart_toStartOf="parent"
-      app:layout_constraintTop_toTopOf="parent"/>
+      app:layout_constraintTop_toTopOf="parent"
+      app:layout_constraintVertical_bias="0.935" />
   </androidx.constraintlayout.widget.ConstraintLayout>
 </layout>