Skip to content
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit cc48218

Browse files
florina-muntenescuflorina-muntenescu
authoredNov 4, 2020
Merge pull request android#265 from android/fm/jetsurvey_redesign2
[Jetsurvey] Redesigning single and multiple choice questions
2 parents 047af3e + b2b8816 commit cc48218

File tree

6 files changed

+148
-81
lines changed

6 files changed

+148
-81
lines changed
 

‎Jetsurvey/app/src/main/java/com/example/compose/jetsurvey/survey/Survey.kt

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,8 @@ data class Survey(
3333
data class Question(
3434
val id: Int,
3535
@StringRes val questionText: Int,
36-
val answer: PossibleAnswer
36+
val answer: PossibleAnswer,
37+
@StringRes val description: Int? = null
3738
)
3839

3940
/**

‎Jetsurvey/app/src/main/java/com/example/compose/jetsurvey/survey/SurveyQuestions.kt

Lines changed: 101 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,12 @@
1616

1717
package com.example.compose.jetsurvey.survey
1818

19+
import androidx.compose.foundation.BorderStroke
1920
import androidx.compose.foundation.ScrollableColumn
2021
import androidx.compose.foundation.Text
2122
import androidx.compose.foundation.background
2223
import androidx.compose.foundation.clickable
24+
import androidx.compose.foundation.layout.Arrangement
2325
import androidx.compose.foundation.layout.Column
2426
import androidx.compose.foundation.layout.PaddingValues
2527
import androidx.compose.foundation.layout.Row
@@ -37,6 +39,7 @@ import androidx.compose.material.ProvideEmphasis
3739
import androidx.compose.material.RadioButton
3840
import androidx.compose.material.RadioButtonConstants
3941
import androidx.compose.material.Slider
42+
import androidx.compose.material.Surface
4043
import androidx.compose.runtime.Composable
4144
import androidx.compose.runtime.getValue
4245
import androidx.compose.runtime.mutableStateOf
@@ -49,27 +52,6 @@ import androidx.compose.ui.unit.dp
4952
import androidx.ui.tooling.preview.Preview
5053
import com.example.compose.jetsurvey.R
5154
import com.example.compose.jetsurvey.theme.JetsurveyTheme
52-
import com.example.compose.jetsurvey.theme.questionBackground
53-
54-
@Preview
55-
@Composable
56-
fun QuestionPreview() {
57-
val question = Question(
58-
id = 2,
59-
questionText = R.string.pick_superhero,
60-
answer = PossibleAnswer.SingleChoice(
61-
optionsStringRes = listOf(
62-
R.string.spiderman,
63-
R.string.ironman,
64-
R.string.unikitty,
65-
R.string.captain_planet
66-
)
67-
)
68-
)
69-
JetsurveyTheme {
70-
Question(question = question, answer = null, onAnswer = {}, onAction = { _, _ -> })
71-
}
72-
}
7355

7456
@Composable
7557
fun Question(
@@ -84,9 +66,14 @@ fun Question(
8466
contentPadding = PaddingValues(start = 20.dp, end = 20.dp)
8567
) {
8668
Spacer(modifier = Modifier.preferredHeight(44.dp))
69+
val backgroundColor = if (MaterialTheme.colors.isLight) {
70+
MaterialTheme.colors.onSurface.copy(alpha = 0.04f)
71+
} else {
72+
MaterialTheme.colors.onSurface.copy(alpha = 0.06f)
73+
}
8774
Row(
8875
modifier = Modifier.fillMaxWidth().background(
89-
color = MaterialTheme.colors.questionBackground,
76+
color = backgroundColor,
9077
shape = MaterialTheme.shapes.small
9178
)
9279
) {
@@ -99,6 +86,17 @@ fun Question(
9986
}
10087
}
10188
Spacer(modifier = Modifier.preferredHeight(24.dp))
89+
if (question.description != null) {
90+
ProvideEmphasis(emphasis = AmbientEmphasisLevels.current.medium) {
91+
Text(
92+
text = stringResource(id = question.description),
93+
style = MaterialTheme.typography.caption,
94+
modifier = Modifier
95+
.fillMaxWidth()
96+
.padding(bottom = 24.dp, start = 8.dp, end = 8.dp)
97+
)
98+
}
99+
}
102100
when (question.answer) {
103101
is PossibleAnswer.SingleChoice -> SingleChoiceQuestion(
104102
possibleAnswer = question.answer,
@@ -164,28 +162,37 @@ private fun SingleChoiceQuestion(
164162
Unit
165163
}
166164
val optionSelected = text == selectedOption
167-
Row(
168-
modifier = Modifier
169-
.fillMaxWidth()
170-
.selectable(
171-
selected = optionSelected,
172-
onClick = onClickHandle
173-
)
174-
.padding(vertical = 4.dp),
175-
verticalAlignment = Alignment.CenterVertically
165+
Surface(
166+
shape = MaterialTheme.shapes.small,
167+
border = BorderStroke(
168+
width = 1.dp,
169+
color = MaterialTheme.colors.onSurface.copy(alpha = 0.12f)
170+
),
171+
modifier = Modifier.padding(vertical = 8.dp)
176172
) {
177-
RadioButton(
178-
selected = optionSelected,
179-
onClick = onClickHandle,
180-
colors = RadioButtonConstants.defaultColors(
181-
selectedColor = MaterialTheme.colors.primary
173+
Row(
174+
modifier = Modifier
175+
.fillMaxWidth()
176+
.selectable(
177+
selected = optionSelected,
178+
onClick = onClickHandle
179+
)
180+
.padding(vertical = 16.dp, horizontal = 24.dp),
181+
verticalAlignment = Alignment.CenterVertically,
182+
horizontalArrangement = Arrangement.SpaceBetween
183+
) {
184+
Text(
185+
text = text
182186
)
183-
)
184187

185-
Text(
186-
text = text,
187-
modifier = Modifier.padding(horizontal = 16.dp)
188-
)
188+
RadioButton(
189+
selected = optionSelected,
190+
onClick = onClickHandle,
191+
colors = RadioButtonConstants.defaultColors(
192+
selectedColor = MaterialTheme.colors.primary
193+
)
194+
)
195+
}
189196
}
190197
}
191198
}
@@ -205,31 +212,40 @@ private fun MultipleChoiceQuestion(
205212
val selectedOption = answer?.answersStringRes?.contains(option.value)
206213
mutableStateOf(selectedOption ?: false)
207214
}
208-
Row(
209-
modifier = Modifier
210-
.fillMaxWidth()
211-
.padding(vertical = 4.dp)
212-
.clickable(
213-
onClick = {
214-
checkedState = !checkedState
215-
onAnswerSelected(option.value, checkedState)
216-
}
217-
)
215+
Surface(
216+
shape = MaterialTheme.shapes.small,
217+
border = BorderStroke(
218+
width = 1.dp,
219+
color = MaterialTheme.colors.onSurface.copy(alpha = 0.12f)
220+
),
221+
modifier = Modifier.padding(vertical = 4.dp)
218222
) {
219-
Checkbox(
220-
checked = checkedState,
221-
onCheckedChange = { selected ->
222-
checkedState = selected
223-
onAnswerSelected(option.value, selected)
224-
},
225-
colors = CheckboxConstants.defaultColors(
226-
checkedColor = MaterialTheme.colors.primary
223+
Row(
224+
modifier = Modifier
225+
.fillMaxWidth()
226+
.clickable(
227+
onClick = {
228+
checkedState = !checkedState
229+
onAnswerSelected(option.value, checkedState)
230+
}
231+
)
232+
.padding(vertical = 16.dp, horizontal = 24.dp),
233+
verticalAlignment = Alignment.CenterVertically,
234+
horizontalArrangement = Arrangement.SpaceBetween
235+
) {
236+
Text(text = option.key)
237+
238+
Checkbox(
239+
checked = checkedState,
240+
onCheckedChange = { selected ->
241+
checkedState = selected
242+
onAnswerSelected(option.value, selected)
243+
},
244+
colors = CheckboxConstants.defaultColors(
245+
checkedColor = MaterialTheme.colors.primary
246+
),
227247
)
228-
)
229-
Text(
230-
text = option.key,
231-
modifier = Modifier.padding(horizontal = 16.dp)
232-
)
248+
}
233249
}
234250
}
235251
}
@@ -295,3 +311,24 @@ private fun SliderQuestion(
295311
)
296312
}
297313
}
314+
315+
@Preview
316+
@Composable
317+
fun QuestionPreview() {
318+
val question = Question(
319+
id = 2,
320+
questionText = R.string.pick_superhero,
321+
answer = PossibleAnswer.SingleChoice(
322+
optionsStringRes = listOf(
323+
R.string.spiderman,
324+
R.string.ironman,
325+
R.string.unikitty,
326+
R.string.captain_planet
327+
)
328+
),
329+
description = R.string.select_one
330+
)
331+
JetsurveyTheme {
332+
Question(question = question, answer = null, onAnswer = {}, onAction = { _, _ -> })
333+
}
334+
}

‎Jetsurvey/app/src/main/java/com/example/compose/jetsurvey/survey/SurveyRepository.kt

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,8 @@ private val jetpackQuestions = listOf(
3636
R.string.dance,
3737
R.string.watch_movies
3838
)
39-
)
39+
),
40+
description = R.string.select_all
4041
),
4142
Question(
4243
id = 2,
@@ -48,7 +49,8 @@ private val jetpackQuestions = listOf(
4849
R.string.unikitty,
4950
R.string.captain_planet
5051
)
51-
)
52+
),
53+
description = R.string.select_one
5254
),
5355
Question(
5456
id = 7,
@@ -60,12 +62,14 @@ private val jetpackQuestions = listOf(
6062
R.string.back_to_future,
6163
R.string.outbreak
6264
)
63-
)
65+
),
66+
description = R.string.select_one
6467
),
6568
Question(
6669
id = 3,
6770
questionText = R.string.takeaway,
68-
answer = Action(label = R.string.pick_date, actionType = PICK_DATE)
71+
answer = Action(label = R.string.pick_date, actionType = PICK_DATE),
72+
description = R.string.select_date
6973
),
7074
Question(
7175
id = 4,

‎Jetsurvey/app/src/main/java/com/example/compose/jetsurvey/survey/SurveyScreen.kt

Lines changed: 33 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,9 @@ import androidx.compose.runtime.savedinstancestate.savedInstanceState
4646
import androidx.compose.runtime.setValue
4747
import androidx.compose.ui.Modifier
4848
import androidx.compose.ui.res.stringResource
49+
import androidx.compose.ui.text.annotatedString
50+
import androidx.compose.ui.text.font.FontWeight
51+
import androidx.compose.ui.text.withStyle
4952
import androidx.compose.ui.unit.dp
5053
import com.example.compose.jetsurvey.R
5154
import com.example.compose.jetsurvey.theme.progressIndicatorBackground
@@ -144,6 +147,33 @@ private fun SurveyResult(result: SurveyState.Result, modifier: Modifier = Modifi
144147
}
145148
}
146149

150+
@Composable
151+
private fun TopAppBarTitle(
152+
questionIndex: Int,
153+
totalQuestionsCount: Int,
154+
modifier: Modifier = Modifier
155+
) {
156+
val indexStyle = MaterialTheme.typography.caption.toSpanStyle().copy(
157+
fontWeight = FontWeight.Bold
158+
)
159+
val totalStyle = MaterialTheme.typography.caption.toSpanStyle().copy(
160+
fontWeight = FontWeight.SemiBold
161+
)
162+
val text = annotatedString {
163+
withStyle(style = indexStyle) {
164+
append("${questionIndex + 1}")
165+
}
166+
withStyle(style = totalStyle) {
167+
append(stringResource(R.string.question_count, totalQuestionsCount))
168+
}
169+
}
170+
Text(
171+
text = text,
172+
style = MaterialTheme.typography.caption,
173+
modifier = modifier
174+
)
175+
}
176+
147177
@OptIn(ExperimentalLayout::class)
148178
@Composable
149179
private fun SurveyTopAppBar(
@@ -153,13 +183,9 @@ private fun SurveyTopAppBar(
153183
) {
154184
ConstraintLayout(modifier = Modifier.fillMaxWidth()) {
155185
val (button, text, progress) = createRefs()
156-
Text(
157-
text = stringResource(
158-
R.string.question_count,
159-
questionIndex + 1,
160-
totalQuestionsCount
161-
),
162-
style = MaterialTheme.typography.caption,
186+
TopAppBarTitle(
187+
questionIndex = questionIndex,
188+
totalQuestionsCount = totalQuestionsCount,
163189
modifier = Modifier.padding(vertical = 20.dp).constrainAs(text) {
164190
centerHorizontallyTo(parent)
165191
}

‎Jetsurvey/app/src/main/java/com/example/compose/jetsurvey/theme/Theme.kt

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -60,10 +60,6 @@ val Colors.snackbarAction: Color
6060
val Colors.progressIndicatorBackground: Color
6161
get() = if (isLight) Color.Black.copy(alpha = 0.12f) else Color.Black.copy(alpha = 0.24f)
6262

63-
@Composable
64-
val Colors.questionBackground: Color
65-
get() = if (isLight) Gray100 else Gray900
66-
6763
@Composable
6864
fun JetsurveyTheme(darkTheme: Boolean = isSystemInDarkTheme(), content: @Composable() () -> Unit) {
6965
val colors = if (darkTheme) {

‎Jetsurvey/app/src/main/res/values/strings.xml

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,10 @@
3838

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

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

0 commit comments

Comments
 (0)
Please sign in to comment.