Skip to content

Commit 8c39a94

Browse files
florina-muntenescuflorina-muntenescu
committed
[Jetsurvey] Updating the take a photo UI
1 parent f5b360d commit 8c39a94

File tree

6 files changed

+335
-21
lines changed

6 files changed

+335
-21
lines changed

‎Jetsurvey/app/src/main/java/com/example/compose/jetsurvey/signinsignup/SignInSignUp.kt‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,6 @@ import androidx.compose.foundation.layout.padding
2727
import androidx.compose.foundation.layout.preferredHeight
2828
import androidx.compose.foundation.layout.preferredWidth
2929
import androidx.compose.foundation.layout.wrapContentSize
30-
import androidx.compose.foundation.text.KeyboardOptions
3130
import androidx.compose.material.AmbientContentAlpha
3231
import androidx.compose.material.AmbientTextStyle
3332
import androidx.compose.material.ContentAlpha
@@ -54,6 +53,7 @@ import androidx.compose.ui.focus.FocusState
5453
import androidx.compose.ui.focusObserver
5554
import androidx.compose.ui.res.stringResource
5655
import androidx.compose.ui.text.input.ImeAction
56+
import androidx.compose.ui.text.input.KeyboardOptions
5757
import androidx.compose.ui.text.input.PasswordVisualTransformation
5858
import androidx.compose.ui.text.input.VisualTransformation
5959
import androidx.compose.ui.text.style.TextAlign

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

Lines changed: 122 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,8 @@
1616

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

19+
import androidx.annotation.StringRes
20+
import androidx.compose.foundation.Image
1921
import androidx.compose.foundation.BorderStroke
2022
import androidx.compose.foundation.ScrollableColumn
2123
import androidx.compose.foundation.background
@@ -29,17 +31,24 @@ import androidx.compose.foundation.layout.fillMaxSize
2931
import androidx.compose.foundation.layout.fillMaxWidth
3032
import androidx.compose.foundation.layout.padding
3133
import androidx.compose.foundation.layout.preferredHeight
34+
import androidx.compose.foundation.layout.width
35+
import androidx.compose.foundation.layout.wrapContentSize
3236
import androidx.compose.foundation.selection.selectable
3337
import androidx.compose.material.AmbientContentAlpha
3438
import androidx.compose.material.Button
3539
import androidx.compose.material.Checkbox
3640
import androidx.compose.material.CheckboxConstants
3741
import androidx.compose.material.ContentAlpha
42+
import androidx.compose.material.Icon
3843
import androidx.compose.material.MaterialTheme
44+
import androidx.compose.material.OutlinedButton
3945
import androidx.compose.material.RadioButton
4046
import androidx.compose.material.RadioButtonConstants
4147
import androidx.compose.material.Slider
4248
import androidx.compose.material.Surface
49+
import androidx.compose.material.icons.Icons
50+
import androidx.compose.material.icons.filled.AddAPhoto
51+
import androidx.compose.material.icons.filled.SwapHoriz
4352
import androidx.compose.runtime.Composable
4453
import androidx.compose.runtime.Providers
4554
import androidx.compose.runtime.getValue
@@ -49,13 +58,29 @@ import androidx.compose.runtime.setValue
4958
import androidx.compose.ui.Alignment
5059
import androidx.compose.ui.Modifier
5160
import androidx.compose.ui.res.stringResource
61+
import androidx.compose.ui.res.vectorResource
5262
import androidx.compose.ui.unit.dp
5363
import androidx.ui.tooling.preview.Preview
5464
import com.example.compose.jetsurvey.R
5565
import com.example.compose.jetsurvey.theme.JetsurveyTheme
56-
import com.example.compose.jetsurvey.theme.questionBackground
5766
import dev.chrisbanes.accompanist.coil.CoilImage
5867

68+
@Preview
69+
@Composable
70+
fun QuestionPreview() {
71+
val question = Question(
72+
id = 975,
73+
questionText = R.string.selfie_skills,
74+
answer = PossibleAnswer.Action(
75+
label = R.string.add_photo,
76+
actionType = SurveyActionType.TAKE_PHOTO
77+
)
78+
)
79+
JetsurveyTheme {
80+
Question(question = question, answer = null, onAnswer = {}, onAction = { _, _ -> })
81+
}
82+
}
83+
5984
@Composable
6085
fun Question(
6186
question: Question,
@@ -260,32 +285,112 @@ private fun ActionQuestion(
260285
onAction: (Int, SurveyActionType) -> Unit,
261286
modifier: Modifier = Modifier
262287
) {
263-
Button(
264-
onClick = { onAction(questionId, possibleAnswer.actionType) },
265-
modifier = modifier.padding(vertical = 20.dp)
266-
) {
267-
Text(text = stringResource(id = possibleAnswer.label))
288+
when (possibleAnswer.actionType) {
289+
SurveyActionType.PICK_DATE -> {
290+
DateQuestion(
291+
questionId = questionId,
292+
answerLabel = possibleAnswer.label,
293+
answer = answer,
294+
onAction = onAction,
295+
modifier = modifier
296+
)
297+
}
298+
SurveyActionType.TAKE_PHOTO -> {
299+
PhotoQuestion(
300+
questionId = questionId,
301+
answer = answer,
302+
onAction = onAction,
303+
modifier = modifier
304+
)
305+
}
306+
SurveyActionType.SELECT_CONTACT -> TODO()
268307
}
269-
if (answer != null) {
270-
when (answer.result) {
271-
is SurveyActionResult.Date -> {
272-
Text(
273-
text = stringResource(R.string.selected_date, answer.result.date),
274-
style = MaterialTheme.typography.h4,
275-
modifier = Modifier.padding(vertical = 20.dp)
276-
)
277-
}
278-
is SurveyActionResult.Photo -> {
308+
}
309+
310+
@Composable
311+
private fun PhotoQuestion(
312+
questionId: Int,
313+
answer: Answer.Action?,
314+
onAction: (Int, SurveyActionType) -> Unit,
315+
modifier: Modifier = Modifier
316+
) {
317+
val resource = if (answer != null) {
318+
Icons.Filled.SwapHoriz
319+
} else {
320+
Icons.Filled.AddAPhoto
321+
}
322+
val label = if (answer != null) {
323+
R.string.retake_photo
324+
} else {
325+
R.string.add_photo
326+
}
327+
OutlinedButton(
328+
onClick = { onAction(questionId, SurveyActionType.TAKE_PHOTO) },
329+
modifier = modifier
330+
) {
331+
Column {
332+
if (answer != null && answer.result is SurveyActionResult.Photo) {
279333
CoilImage(
280334
data = answer.result.uri,
281335
modifier = Modifier.fillMaxSize()
282336
)
337+
} else {
338+
PhotoDefaultImage(modifier = Modifier.padding(horizontal = 86.dp, vertical = 74.dp))
339+
}
340+
Row(
341+
modifier = Modifier
342+
.fillMaxWidth()
343+
.wrapContentSize(Alignment.BottomCenter)
344+
.padding(vertical = 26.dp)
345+
) {
346+
Icon(resource)
347+
Spacer(modifier = Modifier.width(8.dp))
348+
Text(text = stringResource(id = label))
283349
}
284-
is SurveyActionResult.Contact -> TODO()
285350
}
286351
}
287352
}
288353

354+
@Composable
355+
private fun DateQuestion(
356+
questionId: Int,
357+
@StringRes answerLabel: Int,
358+
answer: Answer.Action?,
359+
onAction: (Int, SurveyActionType) -> Unit,
360+
modifier: Modifier = Modifier
361+
) {
362+
Button(
363+
onClick = { onAction(questionId, SurveyActionType.PICK_DATE) },
364+
modifier = modifier.padding(vertical = 20.dp)
365+
) {
366+
Text(text = stringResource(id = answerLabel))
367+
}
368+
369+
if (answer != null && answer.result is SurveyActionResult.Date) {
370+
Text(
371+
text = stringResource(R.string.selected_date, answer.result.date),
372+
style = MaterialTheme.typography.h4,
373+
modifier = Modifier.padding(vertical = 20.dp)
374+
)
375+
}
376+
}
377+
378+
@Composable
379+
private fun PhotoDefaultImage(
380+
lightTheme: Boolean = MaterialTheme.colors.isLight,
381+
modifier: Modifier = Modifier
382+
) {
383+
val assetId = if (lightTheme) {
384+
R.drawable.ic_selfie_light
385+
} else {
386+
R.drawable.ic_selfie_dark
387+
}
388+
Image(
389+
asset = vectorResource(id = assetId),
390+
modifier = modifier
391+
)
392+
}
393+
289394
@Composable
290395
private fun SliderQuestion(
291396
possibleAnswer: PossibleAnswer.Slider,

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ private val jetpackQuestions = listOf(
2828
Question(
2929
id = 975,
3030
questionText = R.string.selfie_skills,
31-
answer = Action(label = R.string.take_selfie, actionType = TAKE_PHOTO)
31+
answer = Action(label = R.string.add_photo, actionType = TAKE_PHOTO)
3232
),
3333
Question(
3434
id = 1,

‎Jetsurvey/app/src/main/res/drawable/ic_selfie_dark.xml‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
<!--
2+
~ Copyright 2020 The Android Open Source Project
3+
~
4+
~ Licensed under the Apache License, Version 2.0 (the "License");
5+
~ you may not use this file except in compliance with the License.
6+
~ You may obtain a copy of the License at
7+
~
8+
~ http://www.apache.org/licenses/LICENSE-2.0
9+
~
10+
~ Unless required by applicable law or agreed to in writing, software
11+
~ distributed under the License is distributed on an "AS IS" BASIS,
12+
~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
~ See the License for the specific language governing permissions and
14+
~ limitations under the License.
15+
~
16+
-->
17+
<vector xmlns:android="http://schemas.android.com/apk/res/android"
18+
android:width="200dp"
19+
android:height="162dp"
20+
android:viewportWidth="200"
21+
android:viewportHeight="162">
22+
<group>
23+
<clip-path
24+
android:pathData="M0,0h200v161.78h-200z"/>
25+
<path
26+
android:pathData="M77.957,160.547L200,99L150.073,0L23.608,57.867L77.957,160.547Z"
27+
android:strokeAlpha="0.9"
28+
android:fillColor="#3C4043"
29+
android:fillAlpha="0.9"/>
30+
<path
31+
android:pathData="M163.568,125.799C167.692,125.799 171.035,122.456 171.035,118.332C171.035,114.208 167.692,110.865 163.568,110.865C159.444,110.865 156.101,114.208 156.101,118.332C156.101,122.456 159.444,125.799 163.568,125.799Z"
32+
android:strokeAlpha="0.25"
33+
android:fillColor="#9AA0A6"
34+
android:fillAlpha="0.25"/>
35+
<path
36+
android:pathData="M149.749,127.136C152.642,127.136 154.987,124.791 154.987,121.898C154.987,119.005 152.642,116.66 149.749,116.66C146.856,116.66 144.511,119.005 144.511,121.898C144.511,124.791 146.856,127.136 149.749,127.136Z"
37+
android:strokeAlpha="0.25"
38+
android:fillColor="#9AA0A6"
39+
android:fillAlpha="0.25"/>
40+
<path
41+
android:pathData="M41.563,119.974L21.283,108.265L9.574,128.545L29.854,140.254L41.563,119.974Z"
42+
android:strokeAlpha="0.9"
43+
android:fillColor="#3C4043"
44+
android:fillAlpha="0.9"/>
45+
<path
46+
android:pathData="M141.225,75.99C140.185,75.99 139.168,75.681 138.304,75.104C137.439,74.526 136.765,73.705 136.368,72.744C135.97,71.784 135.866,70.727 136.068,69.707C136.271,68.687 136.772,67.751 137.507,67.015C138.242,66.28 139.179,65.779 140.199,65.577C141.219,65.374 142.276,65.478 143.236,65.876C144.197,66.274 145.018,66.948 145.596,67.812C146.173,68.676 146.482,69.693 146.482,70.733C146.48,72.127 145.926,73.463 144.94,74.448C143.955,75.434 142.618,75.988 141.225,75.99ZM141.225,65.953C140.279,65.953 139.355,66.234 138.569,66.759C137.783,67.284 137.171,68.031 136.809,68.904C136.447,69.777 136.353,70.738 136.537,71.665C136.722,72.592 137.177,73.444 137.845,74.112C138.513,74.78 139.365,75.236 140.292,75.42C141.219,75.604 142.18,75.51 143.053,75.148C143.927,74.786 144.673,74.174 145.198,73.388C145.723,72.602 146.004,71.678 146.004,70.733C146.002,69.466 145.498,68.251 144.602,67.355C143.706,66.459 142.492,65.955 141.225,65.953Z"
47+
android:strokeAlpha="0.12"
48+
android:fillColor="#ffffff"
49+
android:fillAlpha="0.12"/>
50+
<path
51+
android:pathData="M51.137,60.935C50.097,60.935 49.081,60.627 48.216,60.049C47.352,59.471 46.678,58.65 46.28,57.69C45.882,56.729 45.778,55.672 45.981,54.652C46.184,53.633 46.685,52.696 47.42,51.961C48.155,51.225 49.092,50.725 50.111,50.522C51.131,50.319 52.188,50.423 53.149,50.821C54.11,51.219 54.931,51.893 55.508,52.757C56.086,53.622 56.394,54.638 56.394,55.678C56.393,57.072 55.838,58.408 54.853,59.394C53.867,60.379 52.531,60.933 51.137,60.935ZM51.137,50.899C50.192,50.899 49.268,51.179 48.482,51.704C47.696,52.229 47.083,52.976 46.722,53.849C46.36,54.722 46.265,55.683 46.45,56.61C46.634,57.537 47.089,58.389 47.758,59.057C48.426,59.726 49.278,60.181 50.205,60.365C51.132,60.55 52.093,60.455 52.966,60.093C53.839,59.732 54.586,59.119 55.111,58.333C55.636,57.547 55.916,56.623 55.916,55.678C55.915,54.411 55.411,53.196 54.515,52.3C53.619,51.404 52.404,50.9 51.137,50.899Z"
52+
android:strokeAlpha="0.12"
53+
android:fillColor="#ffffff"
54+
android:fillAlpha="0.12"/>
55+
<path
56+
android:pathData="M30.348,144.332C29.308,144.332 28.292,144.023 27.427,143.446C26.563,142.868 25.889,142.047 25.491,141.086C25.093,140.126 24.989,139.069 25.192,138.049C25.395,137.029 25.895,136.092 26.63,135.357C27.366,134.622 28.302,134.121 29.322,133.918C30.342,133.716 31.399,133.82 32.36,134.218C33.32,134.615 34.141,135.289 34.719,136.154C35.297,137.018 35.605,138.035 35.605,139.074C35.603,140.468 35.049,141.805 34.063,142.79C33.078,143.776 31.742,144.33 30.348,144.332ZM30.348,134.295C29.403,134.295 28.479,134.576 27.693,135.101C26.907,135.626 26.294,136.372 25.932,137.246C25.571,138.119 25.476,139.08 25.66,140.007C25.845,140.934 26.3,141.785 26.968,142.454C27.637,143.122 28.488,143.577 29.415,143.762C30.342,143.946 31.303,143.852 32.177,143.49C33.05,143.128 33.796,142.516 34.321,141.73C34.847,140.944 35.127,140.02 35.127,139.074C35.125,137.807 34.621,136.593 33.725,135.697C32.83,134.801 31.615,134.297 30.348,134.295Z"
57+
android:strokeAlpha="0.12"
58+
android:fillColor="#ffffff"
59+
android:fillAlpha="0.12"/>
60+
<path
61+
android:pathData="M78.691,58.822C81.675,55.471 82.457,51.296 80.437,49.496C78.416,47.697 74.359,48.955 71.375,52.306C68.391,55.657 67.609,59.832 69.63,61.631C71.65,63.43 75.707,62.173 78.691,58.822Z"
62+
android:fillColor="#2F2E41"/>
63+
<path
64+
android:pathData="M90.446,91.886C102.191,91.886 111.713,82.365 111.713,70.619C111.713,58.873 102.191,49.352 90.446,49.352C78.7,49.352 69.178,58.873 69.178,70.619C69.178,82.365 78.7,91.886 90.446,91.886Z"
65+
android:fillColor="#2F2E41"/>
66+
<path
67+
android:pathData="M28.296,61.245L8.528,62.863C7.75,62.926 7.021,63.266 6.471,63.82C5.922,64.375 5.589,65.108 5.532,65.886L4.794,76.072C4.762,76.52 4.822,76.97 4.971,77.394C5.121,77.818 5.356,78.207 5.662,78.536C5.968,78.865 6.338,79.128 6.751,79.307C7.163,79.487 7.607,79.579 8.057,79.579H16.966V80.057H20.551V79.579H22.462V80.057H26.046V79.579H27.957C28.796,79.579 29.602,79.257 30.21,78.68C30.818,78.102 31.181,77.313 31.224,76.476L31.829,64.673C31.853,64.207 31.777,63.742 31.606,63.308C31.436,62.874 31.174,62.482 30.84,62.158C30.505,61.833 30.105,61.584 29.667,61.426C29.228,61.269 28.76,61.207 28.296,61.245Z"
68+
android:fillColor="#202124"/>
69+
<path
70+
android:pathData="M40.862,93.44L12.904,80.297L7.886,88.183C7.886,88.183 22.423,97.463 23.179,98.219C24.254,99.294 35.844,106.821 40.384,105.626C44.924,104.432 42.774,94.634 40.862,93.44Z"
71+
android:fillColor="#9F616A"/>
72+
<path
73+
android:pathData="M59.979,153.657L56.394,161.781H93.5L90.804,153.179L59.979,153.657Z"
74+
android:fillColor="#2F2E41"/>
75+
<path
76+
android:pathData="M82.68,87.704C82.68,87.704 84.113,95.59 82.68,96.546C81.246,97.502 92.238,109.21 92.238,109.21L96.778,105.148L98.212,95.829C98.212,95.829 93.911,89.855 95.822,84.598C97.734,79.341 82.68,87.704 82.68,87.704Z"
77+
android:fillColor="#9F616A"/>
78+
<path
79+
android:pathData="M86.981,90.093C95.427,90.093 102.274,83.246 102.274,74.8C102.274,66.354 95.427,59.507 86.981,59.507C78.535,59.507 71.688,66.354 71.688,74.8C71.688,83.246 78.535,90.093 86.981,90.093Z"
80+
android:fillColor="#9F616A"/>
81+
<path
82+
android:pathData="M91.043,103.715C91.043,103.715 85.069,94.634 81.724,93.917C78.378,93.2 75.272,93.678 73.36,93.917C71.449,94.156 64.997,91.767 61.173,93.439C57.35,95.112 61.173,114.707 61.173,114.707C61.173,114.707 56.872,139.797 58.784,146.249C60.695,152.701 59.262,153.896 58.306,154.613C57.35,155.33 80.051,161.782 80.051,161.782H101.557C101.557,161.782 101.557,154.852 103.708,153.179C105.859,151.506 105.62,116.14 105.62,116.14L112.788,102.281C112.788,102.281 111.594,97.024 106.576,96.785C101.557,96.546 97.078,93.911 97.078,93.911L93.672,103.715H91.043Z"
83+
android:fillColor="#FFD083"/>
84+
<path
85+
android:pathData="M63.324,94.634L61.173,93.439C61.173,93.439 57.111,93.678 56.394,93.439C55.677,93.2 46.597,90.333 43.013,92.006C39.428,93.678 37.039,91.528 37.039,91.528C37.039,91.528 48.748,101.564 34.41,104.67C34.41,104.67 34.649,105.865 38.233,106.582C41.818,107.299 42.535,108.016 43.968,109.211C45.402,110.405 48.27,111.6 50.181,112.078C52.093,112.556 58.306,116.618 59.262,115.662C60.218,114.707 61.89,111.361 61.89,111.361L63.324,94.634Z"
86+
android:fillColor="#FFD083"/>
87+
<path
88+
android:pathData="M108.248,99.652L112.788,102.281C112.788,102.281 118.762,119.964 117.807,124.265C116.851,128.566 115.895,127.849 117.329,130.717C118.762,133.584 120.196,133.823 119.24,136.452C118.284,139.081 118.762,145.532 117.329,148.161C115.895,150.789 108.965,159.153 102.991,145.054C97.017,130.956 108.248,99.652 108.248,99.652Z"
89+
android:fillColor="#FFD083"/>
90+
<path
91+
android:pathData="M116.851,136.213C116.851,136.213 113.505,129.522 112.788,129.044C112.072,128.566 108.726,112.078 108.726,112.078C108.726,112.078 113.983,103.476 109.204,99.652C109.204,99.652 118.046,87.227 115.178,87.466C112.311,87.704 106.576,96.785 106.576,96.785C106.576,96.785 105.261,96.426 105.739,94.515C106.217,92.603 108.009,85.793 106.576,85.554C105.142,85.315 102.274,95.59 102.274,95.59C102.274,95.59 96.42,106.224 98.212,109.928C99.255,112.006 100.453,114.003 101.796,115.902L105.859,145.533C105.859,145.533 113.744,155.091 116.851,136.213Z"
92+
android:fillColor="#9F616A"/>
93+
<path
94+
android:pathData="M26.763,65.72C28.215,65.72 29.392,65.185 29.392,64.525C29.392,63.865 28.215,63.33 26.763,63.33C25.312,63.33 24.135,63.865 24.135,64.525C24.135,65.185 25.312,65.72 26.763,65.72Z"
95+
android:fillColor="#FFD083"/>
96+
<path
97+
android:pathData="M10.753,88.182H7.408C7.408,88.182 0,85.793 0,80.297C0,74.8 2.151,63.569 8.841,63.808C15.532,64.047 9.319,78.863 9.319,78.863L13.37,80.516L13.382,85.554L10.753,88.182Z"
98+
android:fillColor="#9F616A"/>
99+
<path
100+
android:pathData="M84.472,71.574C91.994,71.574 98.092,68.472 98.092,64.645C98.092,60.817 91.994,57.715 84.472,57.715C76.949,57.715 70.851,60.817 70.851,64.645C70.851,68.472 76.949,71.574 84.472,71.574Z"
101+
android:fillColor="#2F2E41"/>
102+
<path
103+
android:pathData="M102.872,75.875C103.532,75.875 104.066,74.698 104.066,73.247C104.066,71.795 103.532,70.618 102.872,70.618C102.212,70.618 101.677,71.795 101.677,73.247C101.677,74.698 102.212,75.875 102.872,75.875Z"
104+
android:fillColor="#9F616A"/>
105+
<path
106+
android:pathData="M113.47,66.696C115.904,65.514 116.288,61.284 114.327,57.247C112.367,53.211 108.806,50.897 106.372,52.079C103.938,53.261 103.554,57.491 105.514,61.527C107.475,65.563 111.036,67.878 113.47,66.696Z"
107+
android:fillColor="#2F2E41"/>
108+
</group>
109+
</vector>

0 commit comments

Comments
 (0)