Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Draft
wants to merge 6 commits into
base: master
Choose a base branch
from
Draft

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

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
98e1123
Add divider in multiple choice options
shobhitagarwal1612 Dec 5, 2024
8fb4ef4
Reorder code
shobhitagarwal1612 Dec 5, 2024
1763e75
Remove different styling for other field
shobhitagarwal1612 Dec 5, 2024
e378266
Remove "Other" label and hint from other input
shobhitagarwal1612 Dec 5, 2024
514cfdd
Update text styling
shobhitagarwal1612 Dec 5, 2024
bdc7d31
Merge branch 'master' into ashobhit/2893/choice-ux
shobhitagarwal1612 Dec 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 20 additions & 17 deletions ...oogle/android/ground/ui/datacollection/tasks/multiplechoice/MultipleChoiceTaskFragment.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,13 +18,14 @@ 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.LinearLayoutManager
import androidx.recyclerview.widget.RecyclerView
import com.google.android.ground.databinding.MultipleChoiceTaskFragBinding
import com.google.android.ground.model.task.MultipleChoice
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.material.divider.MaterialDividerItemDecoration
import dagger.hilt.android.AndroidEntryPoint
import kotlinx.coroutines.launch

Expand All @@ -34,30 +35,32 @@ import kotlinx.coroutines.launch
*/
@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 =
MultipleChoiceTaskFragBinding.inflate(inflater)
.also { it.selectOptionList.setupRecyclerView() }
.root

private fun RecyclerView.setupRecyclerView() {
adapter = createMultipleChoiceAdapter()
itemAnimator = null
setHasFixedSize(true)

val itemDecoration = MaterialDividerItemDecoration(context, LinearLayoutManager.VERTICAL)
itemDecoration.isLastItemDecorated = false
addItemDecoration(itemDecoration)
}

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)
}
private fun createMultipleChoiceAdapter(): MultipleChoiceAdapter {
val cardinality = checkNotNull(getTask().multipleChoice).cardinality
val canSelectMultiple = cardinality == MultipleChoice.Cardinality.SELECT_MULTIPLE
val multipleChoiceAdapter = MultipleChoiceAdapter(viewModel, canSelectMultiple)
lifecycleScope.launch {
viewModel.itemsFlow.collect { items -> multipleChoiceAdapter.submitList(items) }
}
return multipleChoiceAdapter
}
}
12 changes: 6 additions & 6 deletions ground/src/main/res/layout/multiple_choice_checkbox_item.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,14 +24,11 @@
<variable
name="item"
type="com.google.android.ground.ui.datacollection.tasks.multiplechoice.MultipleChoiceItem" />


<variable
name="viewModel"
type="com.google.android.ground.ui.datacollection.tasks.multiplechoice.MultipleChoiceTaskViewModel" />
</data>


<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
Expand All @@ -42,16 +39,18 @@
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:checked="@{item.isSelected}"
android:fontFamily="@font/google_sans"
android:onClickListener="@{() -> viewModel.toggleItem(item)}"
android:padding="16dp"
android:text="@{ item.isOtherOption ? @string/other : item.option.label }"
android:textColor="@color/md_theme_onSurface"
android:textSize="16sp"
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could you define this in styles.xml instead using the Material theme names from Figma here and throughout? I think you need to extend Widget.Material3.CompoundButton.CheckBox.

app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="Option 1" />

<com.google.android.material.textfield.TextInputLayout
android:id="@+id/text_input"
style="@style/EditSubmission.Task.Text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginHorizontal="24dp"
Expand All @@ -62,9 +61,10 @@
android:id="@+id/user_response_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/other"
android:fontFamily="@font/text_500"
android:inputType="text"
android:text="@{item.otherText}"
android:textColor="@color/md_theme_onSurface"
android:textSize="16sp"
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I believe you'd want to extend Widget.MaterialComponents.TextInputEditText.FilledBox here.

android:visibility="@{item.isOtherOption ? View.VISIBLE: View.GONE}"
app:textChangedListener="@{viewModel.otherTextWatcher}" />
</com.google.android.material.textfield.TextInputLayout>
Expand Down
10 changes: 6 additions & 4 deletions ground/src/main/res/layout/multiple_choice_radiobutton_item.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,6 @@
<variable
name="item"
type="com.google.android.ground.ui.datacollection.tasks.multiplechoice.MultipleChoiceItem" />

<variable
name="viewModel"
type="com.google.android.ground.ui.datacollection.tasks.multiplechoice.MultipleChoiceTaskViewModel" />
Expand All @@ -41,16 +40,18 @@
android:layout_height="wrap_content"
android:buttonTint="?attr/colorPrimary"
android:checked="@{item.isSelected}"
android:fontFamily="@font/google_sans"
android:onClickListener="@{() -> viewModel.toggleItem(item)}"
android:padding="16dp"
android:text="@{ item.isOtherOption ? @string/other : item.option.label }"
android:textColor="@color/md_theme_onSurface"
android:textSize="16sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="Option 1" />

<com.google.android.material.textfield.TextInputLayout
android:id="@+id/text_input"
style="@style/EditSubmission.Task.Text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginHorizontal="24dp"
Expand All @@ -61,9 +62,10 @@
android:id="@+id/user_response_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/other"
android:fontFamily="@font/text_500"
android:inputType="text"
android:text="@{item.otherText}"
android:textColor="@color/md_theme_onSurface"
android:textSize="16sp"
android:visibility="@{item.isOtherOption ? View.VISIBLE: View.GONE}"
app:textChangedListener="@{viewModel.otherTextWatcher}" />
</com.google.android.material.textfield.TextInputLayout>
Expand Down
6 changes: 2 additions & 4 deletions ground/src/main/res/layout/multiple_choice_task_frag.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,10 +21,8 @@

<androidx.recyclerview.widget.RecyclerView
android:id="@+id/select_option_list"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:divider="@null"
android:dividerHeight="0dp"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingBottom="10dp"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager" />
Expand Down
10 changes: 7 additions & 3 deletions ground/src/main/res/layout/task_frag_with_header.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,14 +32,17 @@

<TextView
android:id="@+id/data_collection_header"
android:layout_width="wrap_content"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawablePadding="16dp"
android:fontFamily="@font/text_500"
android:padding="16dp"
android:text="@{viewModel.task.label}"
android:textColor="@color/md_theme_onSurface"
android:textSize="16sp"
app:drawableStartCompat="@drawable/ic_question_answer"
app:layout_constraintBottom_toTopOf="@+id/task_container"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="Sample question?" />
Expand All @@ -50,9 +53,10 @@
android:layout_height="0dp"
android:layout_marginStart="20dp"
android:layout_marginEnd="20dp"
app:layout_constraintBottom_toTopOf="@+id/action_buttons"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/data_collection_header"
app:layout_constraintBottom_toTopOf="@+id/action_buttons" />
app:layout_constraintTop_toBottomOf="@+id/data_collection_header" />

<include
android:id="@+id/action_buttons"
Expand Down
Loading