[Multiple Choice Task] Fix UI bugs in multiple choice selectors

ground/src/main/java/com/google/android/ground/ui/datacollection/tasks/multiplechoice/MultipleChoiceItem.kt

@@ -24,9 +24,4 @@ data class MultipleChoiceItem(
   val isSelected: Boolean = false,
   val isOtherOption: Boolean = false,
   val otherText: String = "",
-) {
-  fun isTheSameItem(otherItem: MultipleChoiceItem): Boolean = this.option.id == otherItem.option.id
-
-  fun areContentsTheSame(otherItem: MultipleChoiceItem): Boolean =
-    otherItem.isSelected == this.isSelected
-}
+)

ground/src/main/java/com/google/android/ground/ui/datacollection/tasks/multiplechoice/MultipleChoiceItemView.kt

@@ -0,0 +1,172 @@
+/*
+ * Copyright 2024 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+package com.google.android.ground.ui.datacollection.tasks.multiplechoice
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.text.ClickableText
+import androidx.compose.material3.Checkbox
+import androidx.compose.material3.HorizontalDivider
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.RadioButton
+import androidx.compose.material3.TextField
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.testTag
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.AnnotatedString
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.google.android.ground.ExcludeFromJacocoGeneratedReport
+import com.google.android.ground.R
+import com.google.android.ground.model.task.MultipleChoice
+import com.google.android.ground.model.task.Option
+import com.google.android.ground.ui.theme.AppTheme
+
+const val MULTIPLE_CHOICE_ITEM_TEST_TAG = "multiple choice item test tag"
+const val OTHER_INPUT_TEXT_TEST_TAG = "other input test tag"
+const val SELECT_MULTIPLE_RADIO_TEST_TAG = "select multiple radio test tag"
+
+/**
+ * A composable function that displays a single item in a multiple-choice list.
+ *
+ * This composable provides a visually consistent and interactive way to present an option within a
+ * list of choices where the user can select one or more items. It typically includes a text label
+ * and a selectable indicator (e.g., a checkbox).
+ */
+@Composable
+fun MultipleChoiceItemView(
+  item: MultipleChoiceItem,
+  modifier: Modifier = Modifier,
+  isLastIndex: Boolean = false,
+  toggleItem: (item: MultipleChoiceItem) -> Unit = {},
+  otherValueChanged: (text: String) -> Unit = {},
+) {
+  Column(modifier = Modifier.testTag(MULTIPLE_CHOICE_ITEM_TEST_TAG)) {
+    Row(modifier.fillMaxWidth(), verticalAlignment = Alignment.CenterVertically) {
+      when (item.cardinality) {
+        MultipleChoice.Cardinality.SELECT_ONE -> {
+          RadioButton(
+            modifier = Modifier.testTag(SELECT_MULTIPLE_RADIO_TEST_TAG),
+            selected = item.isSelected,
+            onClick = { toggleItem(item) },
+          )
+        }
+
+        MultipleChoice.Cardinality.SELECT_MULTIPLE -> {
+          Checkbox(checked = item.isSelected, onCheckedChange = { toggleItem(item) })
+        }
+      }
+
+      ClickableText(
+        text = item.toTextLabel(),
+        modifier = modifier,
+        style = MaterialTheme.typography.bodyLarge,
+        onClick = { toggleItem(item) },
+      )
+    }
+
+    if (item.isOtherOption) {
+      Row(modifier = modifier.padding(horizontal = 48.dp)) {
+        TextField(
+          value = item.otherText,
+          textStyle = MaterialTheme.typography.bodyLarge,
+          onValueChange = { otherValueChanged(it) },
+          modifier = Modifier.testTag(OTHER_INPUT_TEXT_TEST_TAG),
+        )
+      }
+    }
+
+    if (!isLastIndex) {
+      HorizontalDivider(color = MaterialTheme.colorScheme.outlineVariant)
+    }
+  }
+}
+
+@Composable
+private fun MultipleChoiceItem.toTextLabel() =
+  AnnotatedString(if (isOtherOption) stringResource(id = R.string.other) else option.label)
+
+@Preview(backgroundColor = 0xFFFFFFFF, showBackground = true)
+@Composable
+@ExcludeFromJacocoGeneratedReport
+fun SelectOneListItemPreview() {
+  AppTheme {
+    MultipleChoiceItemView(
+      item =
+        MultipleChoiceItem(
+          Option(id = "id", code = "code", label = "Option 1"),
+          cardinality = MultipleChoice.Cardinality.SELECT_ONE,
+          isSelected = false,
+        )
+    )
+  }
+}
+
+@Preview(backgroundColor = 0xFFFFFFFF, showBackground = true)
+@Composable
+@ExcludeFromJacocoGeneratedReport
+fun SelectMultipleListItemPreview() {
+  AppTheme {
+    MultipleChoiceItemView(
+      item =
+        MultipleChoiceItem(
+          Option(id = "id", code = "code", label = "Option 2"),
+          cardinality = MultipleChoice.Cardinality.SELECT_MULTIPLE,
+          isSelected = false,
+        )
+    )
+  }
+}
+
+@Preview(backgroundColor = 0xFFFFFFFF, showBackground = true)
+@Composable
+@ExcludeFromJacocoGeneratedReport
+fun SelectOneOtherListItemPreview() {
+  AppTheme {
+    MultipleChoiceItemView(
+      item =
+        MultipleChoiceItem(
+          Option(id = "id", code = "code", label = "Option 3"),
+          cardinality = MultipleChoice.Cardinality.SELECT_ONE,
+          isSelected = true,
+          isOtherOption = true,
+          otherText = "Other text",
+        )
+    )
+  }
+}
+
+@Preview(backgroundColor = 0xFFFFFFFF, showBackground = true)
+@Composable
+@ExcludeFromJacocoGeneratedReport
+fun SelectMultipleOtherListItemPreview() {
+  AppTheme {
+    MultipleChoiceItemView(
+      item =
+        MultipleChoiceItem(
+          Option(id = "id", code = "code", label = "Option 4"),
+          cardinality = MultipleChoice.Cardinality.SELECT_MULTIPLE,
+          isSelected = true,
+          isOtherOption = true,
+          otherText = "Other text",
+        )
+    )
+  }
+}

ground/src/main/java/com/google/android/ground/ui/datacollection/tasks/multiplechoice/MultipleChoiceTaskFragment.kt

@@ -17,48 +17,51 @@ package com.google.android.ground.ui.datacollection.tasks.multiplechoice
 
 import android.view.LayoutInflater
 import android.view.View
-import androidx.lifecycle.lifecycleScope
-import androidx.recyclerview.widget.ListAdapter
-import androidx.recyclerview.widget.RecyclerView
-import com.google.android.ground.databinding.MultipleChoiceTaskFragBinding
-import com.google.android.ground.model.task.MultipleChoice
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.items
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.livedata.observeAsState
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.ComposeView
+import androidx.compose.ui.platform.testTag
+import androidx.lifecycle.asLiveData
 import com.google.android.ground.ui.datacollection.components.TaskView
 import com.google.android.ground.ui.datacollection.components.TaskViewFactory
 import com.google.android.ground.ui.datacollection.tasks.AbstractTaskFragment
+import com.google.android.ground.ui.theme.AppTheme
 import dagger.hilt.android.AndroidEntryPoint
-import kotlinx.coroutines.launch
+
+const val MULTIPLE_CHOICE_LIST_TEST_TAG = "multiple choice items test tag"
 
 /**
  * Fragment allowing the user to answer single selection multiple choice questions to complete a
  * task.
  */
 @AndroidEntryPoint
 class MultipleChoiceTaskFragment : AbstractTaskFragment<MultipleChoiceTaskViewModel>() {
-  private lateinit var binding: MultipleChoiceTaskFragBinding
-  private lateinit var multipleChoiceAdapter:
-    ListAdapter<MultipleChoiceItem, RecyclerView.ViewHolder>
 
   override fun onCreateTaskView(inflater: LayoutInflater): TaskView =
     TaskViewFactory.createWithHeader(inflater)
 
-  override fun onCreateTaskBody(inflater: LayoutInflater): View {
-    binding = MultipleChoiceTaskFragBinding.inflate(inflater)
-    setupMultipleChoice(binding.selectOptionList)
-    return binding.root
-  }
+  override fun onCreateTaskBody(inflater: LayoutInflater): View =
+    ComposeView(requireContext()).apply { setContent { AppTheme { ShowMultipleChoiceItems() } } }
 
-  // TODO: Test comment for adding links to repo.
-  private fun setupMultipleChoice(recyclerView: RecyclerView) {
-    val multipleChoice = checkNotNull(getTask().multipleChoice)
-    val canSelectMultiple = multipleChoice.cardinality == MultipleChoice.Cardinality.SELECT_MULTIPLE
-    multipleChoiceAdapter = MultipleChoiceAdapter(viewModel, canSelectMultiple)
-    recyclerView.apply {
-      adapter = multipleChoiceAdapter
-      itemAnimator = null
-      setHasFixedSize(true)
-    }
-    lifecycleScope.launch {
-      viewModel.itemsFlow.collect { items -> multipleChoiceAdapter.submitList(items) }
+  @Composable
+  private fun ShowMultipleChoiceItems() {
+    val list by viewModel.itemsFlow.asLiveData().observeAsState()
+    list?.let { items ->
+      LazyColumn(Modifier.fillMaxSize().testTag(MULTIPLE_CHOICE_LIST_TEST_TAG)) {
+        items(items) { item ->
+          MultipleChoiceItemView(
+            item = item,
+            isLastIndex = items.indexOf(item) == items.lastIndex,
+            toggleItem = { viewModel.onItemToggled(it) },
+            otherValueChanged = { viewModel.onOtherTextChanged(it) },
+          )
+        }
+      }
     }
   }
 }