Skip to content

[Jetsurvey] Redesigning single and multiple choice questions #265

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

Merged
florina-muntenescu merged 6 commits into from
Nov 4, 2020
Merged

[Jetsurvey] Redesigning single and multiple choice questions #265

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
4354d04
[Jetsurvey] Styling the questions progress indicator
florina-muntenescu Oct 28, 2020
d75e4c1
[Jetsurvey] Styling Single and Multiple choice questions
florina-muntenescu Oct 31, 2020
77e548d
[Jetsurvey] Adding question description
florina-muntenescu Oct 31, 2020
8cec984
[Jetsurvey] Setting correct border and background colors
florina-muntenescu Nov 2, 2020
13d04f3
[Jetsurvey] Make the entire Row clickable
florina-muntenescu Nov 2, 2020
b2b8816
[Jetsurvey] Adding end padding to description
florina-muntenescu Nov 4, 2020
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
3 changes: 2 additions & 1 deletion Jetsurvey/app/src/main/java/com/example/compose/jetsurvey/survey/Survey.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,8 @@ data class Survey(
data class Question(
val id: Int,
@StringRes val questionText: Int,
val answer: PossibleAnswer
val answer: PossibleAnswer,
@StringRes val description: Int? = null
)

/**
Expand Down
165 changes: 101 additions & 64 deletions Jetsurvey/app/src/main/java/com/example/compose/jetsurvey/survey/SurveyQuestions.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,12 @@

package com.example.compose.jetsurvey.survey

import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.ScrollableColumn
import androidx.compose.foundation.Text
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row
Expand All @@ -37,6 +39,7 @@ import androidx.compose.material.ProvideEmphasis
import androidx.compose.material.RadioButton
import androidx.compose.material.RadioButtonConstants
import androidx.compose.material.Slider
import androidx.compose.material.Surface
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
Expand All @@ -49,27 +52,6 @@ import androidx.compose.ui.unit.dp
import androidx.ui.tooling.preview.Preview
import com.example.compose.jetsurvey.R
import com.example.compose.jetsurvey.theme.JetsurveyTheme
import com.example.compose.jetsurvey.theme.questionBackground

@Preview
@Composable
fun QuestionPreview() {
val question = Question(
id = 2,
questionText = R.string.pick_superhero,
answer = PossibleAnswer.SingleChoice(
optionsStringRes = listOf(
R.string.spiderman,
R.string.ironman,
R.string.unikitty,
R.string.captain_planet
)
)
)
JetsurveyTheme {
Question(question = question, answer = null, onAnswer = {}, onAction = { _, _ -> })
}
}

@Composable
fun Question(
Expand All @@ -84,9 +66,14 @@ fun Question(
contentPadding = PaddingValues(start = 20.dp, end = 20.dp)
) {
Spacer(modifier = Modifier.preferredHeight(44.dp))
val backgroundColor = if (MaterialTheme.colors.isLight) {
MaterialTheme.colors.onSurface.copy(alpha = 0.04f)
} else {
MaterialTheme.colors.onSurface.copy(alpha = 0.06f)
}
Row(
modifier = Modifier.fillMaxWidth().background(
color = MaterialTheme.colors.questionBackground,
color = backgroundColor,
shape = MaterialTheme.shapes.small
)
) {
Expand All @@ -99,6 +86,17 @@ fun Question(
}
}
Spacer(modifier = Modifier.preferredHeight(24.dp))
if (question.description != null) {
ProvideEmphasis(emphasis = AmbientEmphasisLevels.current.medium) {
Text(
text = stringResource(id = question.description),
style = MaterialTheme.typography.caption,
modifier = Modifier
.fillMaxWidth()
.padding(bottom = 24.dp, start = 8.dp, end = 8.dp)
)
}
}
when (question.answer) {
is PossibleAnswer.SingleChoice -> SingleChoiceQuestion(
possibleAnswer = question.answer,
Expand Down Expand Up @@ -164,28 +162,37 @@ private fun SingleChoiceQuestion(
Unit
}
val optionSelected = text == selectedOption
Row(
modifier = Modifier
.fillMaxWidth()
.selectable(
selected = optionSelected,
onClick = onClickHandle
)
.padding(vertical = 4.dp),
verticalAlignment = Alignment.CenterVertically
Surface(
shape = MaterialTheme.shapes.small,
border = BorderStroke(
width = 1.dp,
color = MaterialTheme.colors.onSurface.copy(alpha = 0.12f)
),
modifier = Modifier.padding(vertical = 8.dp)
) {
RadioButton(
selected = optionSelected,
onClick = onClickHandle,
colors = RadioButtonConstants.defaultColors(
selectedColor = MaterialTheme.colors.primary
Row(
modifier = Modifier
.fillMaxWidth()
.selectable(
selected = optionSelected,
onClick = onClickHandle
)
.padding(vertical = 16.dp, horizontal = 24.dp),
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.SpaceBetween
) {
Text(
text = text
)
)

Text(
text = text,
modifier = Modifier.padding(horizontal = 16.dp)
)
RadioButton(
selected = optionSelected,
onClick = onClickHandle,
colors = RadioButtonConstants.defaultColors(
selectedColor = MaterialTheme.colors.primary
)
)
}
}
}
}
Expand All @@ -205,31 +212,40 @@ private fun MultipleChoiceQuestion(
val selectedOption = answer?.answersStringRes?.contains(option.value)
mutableStateOf(selectedOption ?: false)
}
Row(
modifier = Modifier
.fillMaxWidth()
.padding(vertical = 4.dp)
.clickable(
onClick = {
checkedState = !checkedState
onAnswerSelected(option.value, checkedState)
}
)
Surface(
shape = MaterialTheme.shapes.small,
border = BorderStroke(
width = 1.dp,
color = MaterialTheme.colors.onSurface.copy(alpha = 0.12f)
),
modifier = Modifier.padding(vertical = 4.dp)
) {
Checkbox(
checked = checkedState,
onCheckedChange = { selected ->
checkedState = selected
onAnswerSelected(option.value, selected)
},
colors = CheckboxConstants.defaultColors(
checkedColor = MaterialTheme.colors.primary
Row(
modifier = Modifier
.fillMaxWidth()
.clickable(
onClick = {
checkedState = !checkedState
onAnswerSelected(option.value, checkedState)
}
)
.padding(vertical = 16.dp, horizontal = 24.dp),
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.SpaceBetween
) {
Text(text = option.key)

Checkbox(
checked = checkedState,
onCheckedChange = { selected ->
checkedState = selected
onAnswerSelected(option.value, selected)
},
colors = CheckboxConstants.defaultColors(
checkedColor = MaterialTheme.colors.primary
),
)
)
Text(
text = option.key,
modifier = Modifier.padding(horizontal = 16.dp)
)
}
}
}
}
Expand Down Expand Up @@ -295,3 +311,24 @@ private fun SliderQuestion(
)
}
}

@Preview
@Composable
fun QuestionPreview() {
val question = Question(
id = 2,
questionText = R.string.pick_superhero,
answer = PossibleAnswer.SingleChoice(
optionsStringRes = listOf(
R.string.spiderman,
R.string.ironman,
R.string.unikitty,
R.string.captain_planet
)
),
description = R.string.select_one
)
JetsurveyTheme {
Question(question = question, answer = null, onAnswer = {}, onAction = { _, _ -> })
}
}
12 changes: 8 additions & 4 deletions Jetsurvey/app/src/main/java/com/example/compose/jetsurvey/survey/SurveyRepository.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,8 @@ private val jetpackQuestions = listOf(
R.string.dance,
R.string.watch_movies
)
)
),
description = R.string.select_all
),
Question(
id = 2,
Expand All @@ -48,7 +49,8 @@ private val jetpackQuestions = listOf(
R.string.unikitty,
R.string.captain_planet
)
)
),
description = R.string.select_one
),
Question(
id = 7,
Expand All @@ -60,12 +62,14 @@ private val jetpackQuestions = listOf(
R.string.back_to_future,
R.string.outbreak
)
)
),
description = R.string.select_one
),
Question(
id = 3,
questionText = R.string.takeaway,
answer = Action(label = R.string.pick_date, actionType = PICK_DATE)
answer = Action(label = R.string.pick_date, actionType = PICK_DATE),
description = R.string.select_date
),
Question(
id = 4,
Expand Down
40 changes: 33 additions & 7 deletions Jetsurvey/app/src/main/java/com/example/compose/jetsurvey/survey/SurveyScreen.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,9 @@ import androidx.compose.runtime.savedinstancestate.savedInstanceState
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.annotatedString
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.withStyle
import androidx.compose.ui.unit.dp
import com.example.compose.jetsurvey.R
import com.example.compose.jetsurvey.theme.progressIndicatorBackground
Expand Down Expand Up @@ -144,6 +147,33 @@ private fun SurveyResult(result: SurveyState.Result, modifier: Modifier = Modifi
}
}

@Composable
private fun TopAppBarTitle(
questionIndex: Int,
totalQuestionsCount: Int,
modifier: Modifier = Modifier
) {
val indexStyle = MaterialTheme.typography.caption.toSpanStyle().copy(
fontWeight = FontWeight.Bold
)
val totalStyle = MaterialTheme.typography.caption.toSpanStyle().copy(
fontWeight = FontWeight.SemiBold
)
val text = annotatedString {
withStyle(style = indexStyle) {
append("${questionIndex + 1}")
}
withStyle(style = totalStyle) {
append(stringResource(R.string.question_count, totalQuestionsCount))
}
}
Text(
text = text,
style = MaterialTheme.typography.caption,
modifier = modifier
)
}

@OptIn(ExperimentalLayout::class)
@Composable
private fun SurveyTopAppBar(
Expand All @@ -153,13 +183,9 @@ private fun SurveyTopAppBar(
) {
ConstraintLayout(modifier = Modifier.fillMaxWidth()) {
val (button, text, progress) = createRefs()
Text(
text = stringResource(
R.string.question_count,
questionIndex + 1,
totalQuestionsCount
),
style = MaterialTheme.typography.caption,
TopAppBarTitle(
questionIndex = questionIndex,
totalQuestionsCount = totalQuestionsCount,
modifier = Modifier.padding(vertical = 20.dp).constrainAs(text) {
centerHorizontallyTo(parent)
}
Expand Down
4 changes: 0 additions & 4 deletions Jetsurvey/app/src/main/java/com/example/compose/jetsurvey/theme/Theme.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,10 +60,6 @@ val Colors.snackbarAction: Color
val Colors.progressIndicatorBackground: Color
get() = if (isLight) Color.Black.copy(alpha = 0.12f) else Color.Black.copy(alpha = 0.24f)

@Composable
val Colors.questionBackground: Color
get() = if (isLight) Gray100 else Gray900

@Composable
fun JetsurveyTheme(darkTheme: Boolean = isSystemInDarkTheme(), content: @Composable() () -> Unit) {
val colors = if (darkTheme) {
Expand Down
5 changes: 4 additions & 1 deletion Jetsurvey/app/src/main/res/values/strings.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,10 @@

<!-- survey-->
<string name="which_jetpack_library">Which Jetpack library are you?</string>
<string name="question_count">%1$d of %2$d</string>
<string name="question_count">\u00A0of %d</string>
<string name="select_one">Select one.</string>
<string name="select_all">Select all that apply.</string>
<string name="select_date">Select date.</string>

<!-- question 1-->
<string name="in_my_free_time">In my free time I like to …</string>
Expand Down