Skip to content

Commit 4c5476e

Browse files
Shady-SelimShady-Selim
committed
Final UI tweaks with screen shots and video push
1 parent 3eb36a2 commit 4c5476e

File tree

6 files changed

+130
-174
lines changed

6 files changed

+130
-174
lines changed

‎README-template.md

-36
This file was deleted.

‎README.md

+22-24
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,25 @@
1-
# Template repository
2-
3-
Template repository for the Jetpack Compose [#AndroidDevChallenge](https://developer.android.com/dev-challenge).
4-
5-
## Getting started
6-
Copy this repository by pressing the "Use this template" button in Github.
7-
Clone your repository and open it in the latest [Android Studio (Canary build)](https://developer.android.com/studio/preview).
8-
9-
## Submission requirements
10-
- Follow the challenge description on the project website: [developer.android.com/dev-challenge](https://developer.android.com/dev-challenge)
11-
- All UI should be written using Jetpack Compose
12-
- The Github Actions workflow should complete successfully
13-
- Include two screenshots of your submission in the [results](results) folder. The names should be
14-
screenshot_1.png and screenshot_2.png.
15-
- Include a screen record of your submission in the [results](results) folder. The name should be
16-
video.mp4
17-
- Replace the contents of [README.md](README.md) with the contents of [README-template.md](README-template.md) and fill out the template.
18-
19-
## Code formatting
20-
The CI uses [Spotless](https://github.com/diffplug/spotless) to check if your code is formatted correctly and contains the right licenses.
21-
Internally, Spotless uses [ktlint](https://github.com/pinterest/ktlint) to check the formatting of your code.
22-
To set up ktlint correctly with Android Studio, follow one of the [listed setup options](https://github.com/pinterest/ktlint#-with-intellij-idea).
23-
24-
Before committing your code, run `./gradlew app:spotlessApply` to automatically format your code.
1+
# Put title of your app here
2+
3+
<!--- Replace <OWNER> with your Github Username and <REPOSITORY> with the name of your repository. -->
4+
<!--- You can find both of these in the url bar when you open your repository in github. -->
5+
![Workflow result](https://github.com/<OWNER>/<REPOSITORY>/workflows/Check/badge.svg)
6+
7+
8+
## :scroll: Description
9+
This is my work for the #AndroidDevChallenge 2nd week
10+
11+
12+
## :bulb: Motivation and Context
13+
I used the State with some UI and animation for the 1st to create a beautiful concept countdown timer
14+
<!--- What are you especially proud of? -->
15+
16+
17+
## :camera_flash: Screenshots
18+
<!-- You can add more screenshots here if you like -->
19+
<img src="/results/screenshot_1.png" width="260">&emsp;<img src="/results/screenshot_2.png" width="260">
20+
<video width="320" height="240" controls>
21+
<source src="/results/movie.mp4" type="video/mp4">
22+
</video>
2523

2624
## License
2725
```

‎app/src/main/java/com/example/androiddevchallenge/MainActivity.kt

+108-114
Original file line numberDiff line numberDiff line change
@@ -55,22 +55,6 @@ class MainActivity : AppCompatActivity() {
5555
// Start building your app here!
5656
@Composable
5757
fun MyApp() {
58-
Surface(
59-
color = MaterialTheme.colors.background,
60-
) {
61-
Card(
62-
elevation = 4.dp,
63-
modifier = Modifier
64-
.padding(32.dp)
65-
.fillMaxWidth(),
66-
) {
67-
CountDownUI()
68-
}
69-
}
70-
}
71-
72-
@Composable
73-
fun CountDownUI() {
7458
var progress by remember { mutableStateOf(1f) }
7559
var timer: Long by remember { mutableStateOf(10_000) }
7660
var tempTimer by remember { mutableStateOf(timer) }
@@ -94,7 +78,6 @@ fun CountDownUI() {
9478
}
9579
)
9680
var changeClockCountDown by remember { mutableStateOf(false) }
97-
9881
var counterCancel by remember { mutableStateOf(false) }
9982
var counterPause by remember { mutableStateOf(false) }
10083
var counterStarted by remember { mutableStateOf(false) }
@@ -122,119 +105,130 @@ fun CountDownUI() {
122105
}
123106
}
124107

125-
126-
Column(
127-
horizontalAlignment = Alignment.CenterHorizontally,
128-
modifier = Modifier
129-
.fillMaxWidth()
130-
.padding(16.dp)
108+
Surface(
109+
color = animatedColor,
110+
modifier = Modifier.fillMaxHeight()
131111
) {
132-
Box(
112+
Card(
113+
elevation = 4.dp,
133114
modifier = Modifier
134-
.wrapContentHeight()
135-
.padding(bottom = 16.dp)
136-
115+
.padding(32.dp)
116+
.fillMaxWidth().wrapContentHeight()
137117
) {
138-
CircularProgressIndicator(
139-
progress = 1f,
140-
strokeWidth = 2.dp,
141-
color = teal200,
118+
Column(
119+
horizontalAlignment = Alignment.CenterHorizontally,
142120
modifier = Modifier
143-
.height(300.dp)
144-
.width(300.dp)
145-
)
146-
CircularProgressIndicator(
147-
progress = progress,
148-
strokeWidth = 2.dp,
149-
color = animatedColor,
150-
modifier = Modifier.width(300.dp)
151-
)
152-
Row(
153-
modifier = Modifier
154-
.height(300.dp)
155-
.width(300.dp),
156-
horizontalArrangement = Arrangement.Center,
157-
verticalAlignment = Alignment.CenterVertically
121+
.fillMaxWidth()
122+
.padding(16.dp)
158123
) {
159-
if (!changeClockCountDown)
160-
Text(
161-
text = time,
162-
style = typography.h3,
124+
Box(
125+
modifier = Modifier
126+
.wrapContentHeight()
127+
.padding(bottom = 16.dp)
128+
129+
) {
130+
CircularProgressIndicator(
131+
progress = 1f,
132+
strokeWidth = 2.dp,
133+
color = teal200,
134+
modifier = Modifier
135+
.height(300.dp)
136+
.width(300.dp)
137+
)
138+
CircularProgressIndicator(
139+
progress = progress,
140+
strokeWidth = 2.dp,
163141
color = animatedColor,
164-
modifier = Modifier.clickable(onClick = {
165-
changeClockCountDown = true
166-
if (counterPause)
167-
countDownTimer.onFinish()
168-
else {
169-
counterPause = true
170-
counterCancel = true
171-
}
172-
})
142+
modifier = Modifier.width(300.dp)
173143
)
174-
else {
175-
Column {
176-
Box {
177-
TextField(
178-
value = (timer / 1000).toString(),
179-
onValueChange = {
180-
timer = if (it != "")
181-
it.toLong() * 1000
182-
else
183-
0
184-
},
185-
textStyle = typography.h3,
186-
keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.NumberPassword),
187-
singleLine = true,
144+
Row(
145+
modifier = Modifier
146+
.height(300.dp)
147+
.width(300.dp),
148+
horizontalArrangement = Arrangement.Center,
149+
verticalAlignment = Alignment.CenterVertically
150+
) {
151+
if (!changeClockCountDown)
152+
Text(
153+
text = time,
154+
style = typography.h3,
155+
color = animatedColor,
156+
modifier = Modifier.clickable(onClick = {
157+
changeClockCountDown = true
158+
if (counterPause)
159+
countDownTimer.onFinish()
160+
else {
161+
counterPause = true
162+
counterCancel = true
163+
}
164+
})
188165
)
189-
Text(text = "seconds")
190-
}
191-
Button(onClick = {
192-
changeClockCountDown = false
193-
tempTimer = timer
194-
countDownTimer.start()
195-
}) {
196-
Text(text = "Set")
197-
}
198-
}
166+
else {
167+
Column {
168+
Box {
169+
TextField(
170+
value = (timer / 1000).toString(),
171+
onValueChange = {
172+
timer = if (it != "")
173+
it.toLong() * 1000
174+
else
175+
0
176+
},
177+
textStyle = typography.h3,
178+
keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.NumberPassword),
179+
singleLine = true,
180+
)
181+
Text(text = "seconds")
182+
}
183+
Button(onClick = {
184+
changeClockCountDown = false
185+
tempTimer = timer
186+
countDownTimer.start()
187+
}) {
188+
Text(text = "Set")
189+
}
190+
}
199191

200192

201-
}
193+
}
202194

203-
}
204-
}
195+
}
196+
}
205197

206-
Row {
198+
Row {
207199

208200

209-
if (!counterStarted) {
210-
Button(onClick = {
211-
progress = 0.0f
212-
countDownTimer.start()
213-
counterCancel = false
214-
counterStarted = true
215-
counterPause = false
201+
if (!counterStarted) {
202+
Button(onClick = {
203+
progress = 0.0f
204+
countDownTimer.start()
205+
counterCancel = false
206+
counterStarted = true
207+
counterPause = false
216208

217-
}) {
218-
Icon(imageVector = Icons.Filled.PlayArrow, contentDescription = "")
219-
}
220-
} else {
221-
Button(onClick = {
222-
counterStarted = false
223-
counterPause = true
224-
}) {
225-
Icon(imageVector = Icons.Filled.Pause, contentDescription = "")
226-
}
227-
}
228-
Spacer(modifier = Modifier.padding(8.dp))
229-
Button(onClick = {
230-
if (counterPause)
231-
countDownTimer.onFinish()
232-
else {
233-
counterPause = true
234-
counterCancel = true
209+
}) {
210+
Icon(imageVector = Icons.Filled.PlayArrow, contentDescription = "")
211+
}
212+
} else {
213+
Button(onClick = {
214+
counterStarted = false
215+
counterPause = true
216+
}) {
217+
Icon(imageVector = Icons.Filled.Pause, contentDescription = "")
218+
}
219+
}
220+
Spacer(modifier = Modifier.padding(8.dp))
221+
Button(onClick = {
222+
if (counterPause)
223+
countDownTimer.onFinish()
224+
else {
225+
counterPause = true
226+
counterCancel = true
227+
}
228+
}) {
229+
Icon(imageVector = Icons.Filled.Stop, contentDescription = "")
230+
}
235231
}
236-
}) {
237-
Icon(imageVector = Icons.Filled.Stop, contentDescription = "")
238232
}
239233
}
240234
}

‎results/screenshot_1.png

320 KB
Loading

‎results/screenshot_2.png

494 KB
Loading

‎results/video.mp4

11.5 MB
Binary file not shown.

0 commit comments

Comments
 (0)