[All] Update to Compose 1.0.0-alpha07

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

@@ -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
 )
 
 /**

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

@@ -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
@@ -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
@@ -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(
@@ -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
             )
         ) {
@@ -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,
@@ -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
+                        )
+                    )
+                }
             }
         }
     }
@@ -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)
-                )
+                }
             }
         }
     }
@@ -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 = { _, _ -> })
+    }
+}

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

@@ -36,7 +36,8 @@ private val jetpackQuestions = listOf(
                 R.string.dance,
                 R.string.watch_movies
             )
-        )
+        ),
+        description = R.string.select_all
     ),
     Question(
         id = 2,
@@ -48,7 +49,8 @@ private val jetpackQuestions = listOf(
                 R.string.unikitty,
                 R.string.captain_planet
             )
-        )
+        ),
+        description = R.string.select_one
     ),
     Question(
         id = 7,
@@ -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,

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

@@ -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
@@ -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(
@@ -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)
             }

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

@@ -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) {

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

@@ -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>