Thank you very much for very comprehensive video. I just have small additional improvement: we can use canvas rotate instead of doing the math with sin/cos. The code to draw the handle would be: val center = Offset(size.width / 2f, size.height / 2f) val r = size.width / 2f rotate( 250 * value - 215f, pivot = center) { drawPoints( listOf(Offset(center.x + r, center.y)), pointMode = PointMode.Points, color = handleColor, strokeWidth = (strokeWidth * 3f).toPx(), cap = StrokeCap.Round ) }
Thanks for the video. The work you put into making them useful and efficient is evident. A note for those coding along with the video: you may want to get the code first for the sake of seeing which imports are happening -- where Canvas and other components come from matters; also, the "initialValue" parameter is 0.0 to 1.0, representing a proportion of the arc (not realizing this led to some bizarre effects)
Wow On top of learning the mighty Jetpack Compose, I also learnt Trigs functions and the Unit Circle, in another world Philipp would be a Professor of Mathematics!!
Some things I think can be optimized imho: 1. You don't need to have size as a variable and to have the modifier onSizeChanged. DrawScope has a variable size, so I don't see any reason why not to use this var. Maybe it wasn't present 2 years ago, though. 2. In regards to the very drawing, given that we initialize a lot of variables during the drawing process, and also given that we do some calculations, it might be better to use the drawWithCache modifier instead of the Canvas composable. 3. initial value doesn't work right now as a param (at least not functionality wise). To make it work, you may need to define currentTime like this: var currentTimeMillis: Long by remember { mutableStateOf((initialValue * totalTimeMillis).toLong()) } 4. I think the current calculation for the position of the handle doesn't work well when the size is not a square. This might make it work better: val centerOffset = Offset(size.width / 2f, size.height/2f) val betaAngleDegrees = startAngle + sweepAngle * value val betaAngleRadians: Float = (betaAngleDegrees * Math.PI / 180F).toFloat() val a: Float = cos(betaAngleRadians) * centerOffset.x val b: Float = sin(betaAngleRadians) * centerOffset.y val handleOffset = Offset(centerOffset.x + a, centerOffset.y + b) 5. Mathematically wise, maybe it should have been noted (in case it was not implied) that once you have the start angle, sweep angle on the one hand and this value 145 on the other hand, are not something that you have to experimentally deduce, rather you can get them by doing some simple calculations. In the case of 145, you don't event need it, I think you should be able to safely replace it with start angle (as I do in my code snippet above). So, basically, start angle is something that we decide upon, but sweep angle is something that we get from the start angle with a calculation and 145 can be safely replaced with start angle... Other than that, I am very grateful for this content. It would have taken me a loooot of time to build something like this on my own.
Using canvas.rotate would be ideal. val center = Offset(size.width / 2f, size.height / 2f) val r = size.width / 2f rotate( 250 * value - 215f, pivot = center) { drawPoints( listOf(Offset(center.x + r, center.y)), ... ) }
at 19:04 there is a bug: the text of the button will never change to "Restart" because in the if block it checks if the timer is currently running and the current time is greater OR equal to 0. When the time runs out the text of the button will simply be "Stop". To fix this simply remove the "=" sign from the if block
Pretty neat UI work, something to learn from. Treat it as educational, it's not a proper timer because UI lags will screw the actual time keeping, for that you'd need to look into CountDownTimer class.
@@venkatesh4307 "she" is not a real person, but rather a girlfriend always imagined to be especially appreciative of one's capabilities; it is a frequent form of joke, in response to a set-up, such as "I wanna play with it now"....
Maybe, you can make a new video explaining how implement that timer inside LazyRow or LazyColum. Each item with different time, and when the time expires, remove from list.
It is not because of the LauncherEffect delay 100. But because of the way he is calculating the time. Delaying 100L means you will increase the counter each 100L, but the system also uses some time to do other processes. That is why it is slower. The only solution I can see is, instead, to calculate the difference in time from when the user presses the button "Start" to now. This will always be precise, doesn't matter how slow your machine is.
Would be helpful to know at the beginning of the tutorial if your timer uses the foreground service or not. As it turns out, it's not... Why make a timer without a foreground service? It'll only run while the activity is running.
Intuitive tutorial! Implemented a timer using coroutine delay, but it is not accurate enough, often 3 or 4 seconds lagged behind in a one-minute count. Any idea why is this happening?
you may need to alter the delay amount such that it considers what the expected end time is. One way I figured this out is before you delay figure out what time it should be when you delay the the next time (add 1000 to the current system milliseconds time).. And then before you delay the next time figure out the difference between the current time and the expected next time. Usually you end up delaying a bit less than 1000ms each time because of the overhead.
For getting user input, I would probably make a text field conditionally replace a text depending if the timer is reset or not. You can get its value when you start the timer and toggle the display condition. For converting to minutes and seconds, since the time is retrieved in milliseconds, seconds = (milliseconds / 1000) % 60 and minutes = (milliseconds / 1000 / 60) % 60. The % 60 is to keep the display in the range seconds and minutes usually take when you're viewing time. If you don't want to use hours (add a / 24 in the conversion and % 24 [or % 12 depending if you want to display it as am/pm for some reason]) and allow more than 60 minutes to display, just drop the % 60 from its conversion.
is it possible to trigger an event from this launched effect to the function calling it? i was trying to trigger something like onTimerDone() , but it never seems to get triggered. I'm beginner with kotlin and android so i might be missing some fundamental @Composable private fun CountdownTimer(startTime: LocalDateTime, onTimerDone: () -> Unit){ var timer by remember { mutableStateOf(startTime) } var timerIsRunning by remember { mutableStateOf(true) } LaunchedEffect(key1 = timer, key2 = timerIsRunning) { if (timer == 0L) { println("time is done launch effect") timerIsRunning = false onTimerDone() // not seeing this triggered from composables wrapping this. trying to delegate it all the way to navigation } else if (timer > 0 && timerIsRunning) { delay(1000L) timer -= 1000L } } }
A humble request Sir🙏, Sir I have been looking through out the internet, in search of a few things like implementing MVVM pattern, working with Room database(or any remote database) and then working with intents (ie, nearly all the basics of what we knew in *imperative development* ) in jetpack compose...But , I found no help. I request you that please consider a few of these topics. I'll be thankful to you 🙏
Late reply, but to fix that, you need to use System's currentTimeMillis function to remember when you pressed start and use it again like so: currentTime = currentTimeMillis - start. The delay and value calculation stay the same.
@@danielhmorgan Well back then there weren't as many tutorials and compose had just landed in its Beta. It wouldn't add anything but the countdown timer implementation with an ugly UI would probably be worth a laugh for someone reading it xD
Thank you very much for very comprehensive video. I just have small additional improvement: we can use canvas rotate instead of doing the math with sin/cos.
The code to draw the handle would be:
val center = Offset(size.width / 2f, size.height / 2f)
val r = size.width / 2f
rotate( 250 * value - 215f, pivot = center) {
drawPoints(
listOf(Offset(center.x + r, center.y)),
pointMode = PointMode.Points,
color = handleColor,
strokeWidth = (strokeWidth * 3f).toPx(),
cap = StrokeCap.Round
)
}
Thanks for the video. The work you put into making them useful and efficient is evident.
A note for those coding along with the video: you may want to get the code first for the sake of seeing which imports are happening -- where Canvas and other components come from matters; also, the "initialValue" parameter is 0.0 to 1.0, representing a proportion of the arc (not realizing this led to some bizarre effects)
only 160 likes for such a good content, shame on you guys give this master pieces some love that it deserve and at least buy him a coffee :(
Wow On top of learning the mighty Jetpack Compose, I also learnt Trigs functions and the Unit Circle, in another world Philipp would be a Professor of Mathematics!!
hahaha, glad you like it
Some things I think can be optimized imho:
1. You don't need to have size as a variable and to have the modifier onSizeChanged. DrawScope has a variable size, so I don't see any reason why not to use this var. Maybe it wasn't present 2 years ago, though.
2. In regards to the very drawing, given that we initialize a lot of variables during the drawing process, and also given that we do some calculations, it might be better to use the drawWithCache modifier instead of the Canvas composable.
3. initial value doesn't work right now as a param (at least not functionality wise). To make it work, you may need to define currentTime like this:
var currentTimeMillis: Long by remember {
mutableStateOf((initialValue * totalTimeMillis).toLong())
}
4. I think the current calculation for the position of the handle doesn't work well when the size is not a square. This might make it work better:
val centerOffset = Offset(size.width / 2f, size.height/2f)
val betaAngleDegrees = startAngle + sweepAngle * value
val betaAngleRadians: Float = (betaAngleDegrees * Math.PI / 180F).toFloat()
val a: Float = cos(betaAngleRadians) * centerOffset.x
val b: Float = sin(betaAngleRadians) * centerOffset.y
val handleOffset = Offset(centerOffset.x + a, centerOffset.y + b)
5. Mathematically wise, maybe it should have been noted (in case it was not implied) that once you have the start angle, sweep angle on the one hand and this value 145 on the other hand, are not something that you have to experimentally deduce, rather you can get them by doing some simple calculations. In the case of 145, you don't event need it, I think you should be able to safely replace it with start angle (as I do in my code snippet above). So, basically, start angle is something that we decide upon, but sweep angle is something that we get from the start angle with a calculation and 145 can be safely replaced with start angle...
Other than that, I am very grateful for this content. It would have taken me a loooot of time to build something like this on my own.
Using canvas.rotate would be ideal.
val center = Offset(size.width / 2f, size.height / 2f)
val r = size.width / 2f
rotate( 250 * value - 215f, pivot = center) {
drawPoints(
listOf(Offset(center.x + r, center.y)),
...
)
}
Very helpful, thank you
This content is underrated and definitely deserves more subs
at 19:04 there is a bug: the text of the button will never change to "Restart" because in the if block it checks if the timer is currently running and the current time is greater OR equal to 0. When the time runs out the text of the button will simply be "Stop". To fix this simply remove the "=" sign from the if block
wow!! Jetpack Compose have lots of tricks in the bag!!!
Thx works 100%. @18:02 remove the "=" and the text will fix the bug
that was neat✨
How to make a Map in Compose?
like some vector drawable where you can zoom in, pan/fling and click stuff?
Great tutorial, just 100 seconds is almost when measured by a stopwatch 117 seconds.
This video was super helpful to me, as well as many of your other Compose tutorials! Thanks so much Philipp :)
Pretty neat UI work, something to learn from. Treat it as educational, it's not a proper timer because UI lags will screw the actual time keeping, for that you'd need to look into CountDownTimer class.
Спасибо за отличные уроки всего вам хорошего👍👍👍
It would be appropriate to remove the equality in the if statement so that the restart text appears. :)
Great content! This was extremely helpful.
Thank you so much for this tutorial.
Nice 😘😘. I wanna play around with it now 🤗🤗
That's what she said
@@venkatesh4307 "she" is not a real person, but rather a girlfriend always imagined to be especially appreciative of one's capabilities; it is a frequent form of joke, in response to a set-up, such as "I wanna play with it now"....
@@fauxvillage3811 thank you. I don't know English very well. Now, I have understood that 😁😁
Maybe, you can make a new video explaining how implement that timer inside LazyRow or LazyColum.
Each item with different time, and when the time expires, remove from list.
Awesome tutorial, thank you so much !
Gracias, tu video me fue de gran utilidad. Deberías publicar un video que muestre como ocultar el ToBar de una que otra pantalla, es decir activity
Please make video on Android canvas basics
if you compare to others timers you will realiza the timer is slow, this is because of the LauncherEffect delay 100, any guess how to improve it?
It is not because of the LauncherEffect delay 100. But because of the way he is calculating the time. Delaying 100L means you will increase the counter each 100L, but the system also uses some time to do other processes. That is why it is slower.
The only solution I can see is, instead, to calculate the difference in time from when the user presses the button "Start" to now. This will always be precise, doesn't matter how slow your machine is.
Would be helpful to know at the beginning of the tutorial if your timer uses the foreground service or not. As it turns out, it's not...
Why make a timer without a foreground service? It'll only run while the activity is running.
Intuitive tutorial! Implemented a timer using coroutine delay, but it is not accurate enough, often 3 or 4 seconds lagged behind in a one-minute count. Any idea why is this happening?
you may need to alter the delay amount such that it considers what the expected end time is. One way I figured this out is before you delay figure out what time it should be when you delay the the next time (add 1000 to the current system milliseconds time).. And then before you delay the next time figure out the difference between the current time and the expected next time. Usually you end up delaying a bit less than 1000ms each time because of the overhead.
How would you go about getting user input to set the start value of the timer?
And how could you convert that number to minutes/seconds?
For getting user input, I would probably make a text field conditionally replace a text depending if the timer is reset or not. You can get its value when you start the timer and toggle the display condition.
For converting to minutes and seconds, since the time is retrieved in milliseconds, seconds = (milliseconds / 1000) % 60 and minutes = (milliseconds / 1000 / 60) % 60. The % 60 is to keep the display in the range seconds and minutes usually take when you're viewing time. If you don't want to use hours (add a / 24 in the conversion and % 24 [or % 12 depending if you want to display it as am/pm for some reason]) and allow more than 60 minutes to display, just drop the % 60 from its conversion.
👋🏼🇨🇴🧔🏻👍🏼🤝🏼 Saludos desde Colombia.
thank you
What if we rotate screen while timer is going on? Can you make a video to handle this, so that timer continue smoothly even if we change rotation
Can you make a full beginner to advance tutorial on Canvas
is it possible to trigger an event from this launched effect to the function calling it? i was trying to trigger something like onTimerDone() , but it never seems to get triggered. I'm beginner with kotlin and android so i might be missing some fundamental
@Composable
private fun CountdownTimer(startTime: LocalDateTime, onTimerDone: () -> Unit){
var timer by remember { mutableStateOf(startTime) }
var timerIsRunning by remember { mutableStateOf(true) }
LaunchedEffect(key1 = timer, key2 = timerIsRunning) {
if (timer == 0L) {
println("time is done launch effect")
timerIsRunning = false
onTimerDone() // not seeing this triggered from composables wrapping this. trying to delegate it all the way to navigation
} else if (timer > 0 && timerIsRunning) {
delay(1000L)
timer -= 1000L
}
}
}
Mank tanks mate
Damn. I was just starting to forget sin & cos shit.
no reset button?
A humble request Sir🙏,
Sir I have been looking through out the internet, in search of a few things like implementing MVVM pattern, working with Room database(or any remote database) and then working with intents (ie, nearly all the basics of what we knew in *imperative development* ) in jetpack compose...But , I found no help.
I request you that please consider a few of these topics.
I'll be thankful to you 🙏
I observed that the timer runs slower than actual time. How can we address that here?
Late reply, but to fix that, you need to use System's currentTimeMillis function to remember when you pressed start and use it again like so: currentTime = currentTimeMillis - start. The delay and value calculation stay the same.
danke schoon!!!!!!!!!!!!!!!
The "reset" text on the button doesn't get updated when the countdown is over. Other than that, great stuff!
Quick and dirty fix: Change the first if for the Buttontext to: if (isTimerRunning && currentTime > 0L) "Stop"
Simply you need to remove '=' sign from the if block.
Awww 😂
Rob the Lackner 😜
For those watching in 2024
colors = ButtonDefaults.buttonColors(containerColor =
if (!isTimerRunning || currentTime
Well.. how's my countdown timer with compose? 😂 ( Readme has screenshots: github.com/Mehul-Bisht/Jet-Timer )
Thanks for sharing. (And I apologize for my earlier comment being kind of mean in tone.)
@@danielhmorgan Well back then there weren't as many tutorials and compose had just landed in its Beta. It wouldn't add anything but the countdown timer implementation with an ugly UI would probably be worth a laugh for someone reading it xD